fix: solved the issue of the sidebar favoritedList not being fully displayed (#1523)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/blocksuite/header/editor-mode-switch/CustomLottie.tsx

@@ -0,0 +1,54 @@
+import lottie from 'lottie-web';
+import { FC, useEffect, useRef } from 'react';
+
+type CustomLottieProps = {
+  options: {
+    loop?: boolean | number | undefined;
+    autoplay?: boolean | undefined;
+    animationData: any;
+    rendererSettings?: {
+      preserveAspectRatio?: string | undefined;
+    };
+  };
+  isStopped?: boolean | undefined;
+  speed?: number | undefined;
+  width?: number | string | undefined;
+  height?: number | string | undefined;
+};
+
+const CustomLottie: FC<CustomLottieProps> = ({
+  options,
+  isStopped,
+  speed,
+  width,
+  height,
+}) => {
+  const element = useRef<HTMLDivElement>(null);
+  const lottieInstance = useRef<any>();
+
+  useEffect(() => {
+    if (element.current) {
+      lottieInstance.current = lottie.loadAnimation({
+        ...options,
+        container: element.current,
+      });
+    }
+    return () => {
+      lottieInstance.current?.destroy();
+    };
+  }, [options]);
+
+  useEffect(() => {
+    if (speed) {
+      lottieInstance.current?.setSpeed(speed);
+    }
+    if (isStopped) {
+      lottieInstance.current?.stop();
+    } else {
+      lottieInstance.current?.play();
+    }
+  }, [isStopped, speed]);
+
+  return <div ref={element} style={{ width, height }}></div>;
+};
+export default CustomLottie;

apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx

@@ -1,6 +1,6 @@
 import React, { cloneElement, HTMLAttributes, useState } from 'react';
-import Lottie from 'react-lottie';
 
+import Lottie from './CustomLottie';
 import { StyledSwitchItem } from './style';
 
 type HoverAnimateControllerProps = {