From 45761f02508b4c6417b9886b13d782c6c87666b6 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Mon, 20 Mar 2023 02:55:09 -0500
Subject: [PATCH] build: lazy load `lottie-web` (#1622)

---
 .../blocksuite/header/editor-mode-switch/CustomLottie.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx b/apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx
index ba1a9904a3..fdcbfc4d7b 100644
--- a/apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx
+++ b/apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx
@@ -1,7 +1,9 @@
-import lottie from 'lottie-web';
+import { atom, useAtomValue } from 'jotai';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
 
+const lottieAtom = atom(async () => import('lottie-web').then(m => m.default));
+
 type CustomLottieProps = {
   options: {
     loop?: boolean | number | undefined;
@@ -26,6 +28,7 @@ const CustomLottie: FC<CustomLottieProps> = ({
 }) => {
   const element = useRef<HTMLDivElement>(null);
   const lottieInstance = useRef<any>();
+  const lottie = useAtomValue(lottieAtom);
 
   useEffect(() => {
     if (element.current) {
@@ -37,7 +40,7 @@ const CustomLottie: FC<CustomLottieProps> = ({
     return () => {
       lottieInstance.current?.destroy();
     };
-  }, [options]);
+  }, [lottie, options]);
 
   useEffect(() => {
     if (speed) {