From 49f1ba676fbf499c40b00c657b963f7634c5bcaa Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Wed, 24 May 2023 13:10:25 +0800
Subject: [PATCH] fix: regression on toast component (#2502)

---
 apps/web/src/utils/toast.ts              |  7 -------
 packages/component/src/ui/toast/toast.ts | 23 ++++++++++++++++++-----
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/utils/toast.ts b/apps/web/src/utils/toast.ts
index 8dbaae5b3..7f31414e0 100644
--- a/apps/web/src/utils/toast.ts
+++ b/apps/web/src/utils/toast.ts
@@ -1,17 +1,10 @@
 import type { ToastOptions } from '@affine/component';
 import { toast as basicToast } from '@affine/component';
-import { DebugLogger } from '@affine/debug';
-
-const logger = new DebugLogger('toast');
 
 export const toast = (message: string, options?: ToastOptions) => {
   const mainContainer = document.querySelector(
     '.main-container'
   ) as HTMLElement;
-  logger.debug(`toast with message: "${message}"`, options);
-  window.dispatchEvent(
-    new CustomEvent('affine-toast:emit', { detail: message })
-  );
   return basicToast(message, {
     portal: mainContainer || document.body,
     ...options,
diff --git a/packages/component/src/ui/toast/toast.ts b/packages/component/src/ui/toast/toast.ts
index 6b0bf157b..f7983d6bc 100644
--- a/packages/component/src/ui/toast/toast.ts
+++ b/packages/component/src/ui/toast/toast.ts
@@ -1,7 +1,10 @@
 // Copyright: https://github.com/toeverything/blocksuite/commit/8032ef3ab97aefce01664b36502fc392c5db8b78#diff-bf5b41be21936f9165a8400c7f20e24d3dbc49644ba57b9258e0943f0dc1c464
+import { DebugLogger } from '@affine/debug';
 import type { TemplateResult } from 'lit';
 import { css, html } from 'lit';
 
+const logger = new DebugLogger('toast');
+
 export const sleep = (ms = 0) =>
   new Promise(resolve => setTimeout(resolve, ms));
 
@@ -18,7 +21,7 @@ const htmlToElement = <T extends ChildNode>(html: string | TemplateResult) => {
     template.innerHTML = html;
   } else {
     const { strings, values } = html;
-    const v = [...values, '']; // + last emtpty part
+    const v = [...values, '']; // + last empty part
     template.innerHTML = strings.reduce((acc, cur, i) => acc + cur + v[i], '');
   }
   return template.content.firstChild as T;
@@ -92,22 +95,32 @@ export const toast = (
   element.textContent = message;
   ToastContainer.appendChild(element);
 
+  logger.debug(`toast with message: "${message}"`);
+  window.dispatchEvent(
+    new CustomEvent('affine-toast:emit', { detail: message })
+  );
+
   const fadeIn = [
     {
       opacity: 0,
     },
     { opacity: 1 },
   ];
+
   const options = {
     duration: 230,
     easing: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
     fill: 'forwards' as const,
-  }; // satisfies KeyframeAnimationOptions;
+  } satisfies KeyframeAnimationOptions;
+
+  element.animate(fadeIn, options);
 
   setTimeout(async () => {
-    if (typeof element.animate !== 'function') return;
-    const fadeOut = fadeIn.reverse();
-    const animation = element.animate(fadeOut, options);
+    const animation = element.animate(
+      // fade out
+      fadeIn.reverse(),
+      options
+    );
     await animation.finished;
     element.style.maxHeight = '0';
     element.style.margin = '0';