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

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

apps/web/package.json

@@ -30,11 +30,11 @@
     "jotai": "^2.0.3",
     "jotai-devtools": "^0.2.0",
     "lit": "^2.6.1",
+    "lottie-web": "^5.10.2",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-lottie": "^1.2.3",
     "swr": "^2.0.4",
     "y-indexeddb": "^9.0.9",
     "y-protocols": "^1.0.5",
@@ -48,7 +48,6 @@
     "@swc-jotai/react-refresh": "^0.0.4",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/react-lottie": "^1.2.6",
     "@types/webpack-env": "^1.18.0",
     "dotenv": "^16.0.3",
     "eslint": "^8.35.0",

apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx

@@ -21,7 +21,8 @@ import { useWorkspacesHelper } from '../../hooks/use-workspaces';
 import { ThemeProvider } from '../../providers/ThemeProvider';
 import { pathGenerator, RemWorkspaceFlavour } from '../../shared';
 import { WorkSpaceSliderBar } from '../pure/workspace-slider-bar';
-vi.mock('react-lottie', () => ({
+
+vi.mock('../blocksuite/header/editor-mode-switch/CustomLottie', () => ({
   default: (props: React.PropsWithChildren) => <>{props.children}</>,
 }));
 

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 = {

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -53,19 +53,20 @@ const FavoriteList: React.FC<FavoriteListProps> = ({
       {favoriteList.map((pageMeta, index) => {
         const active = router.query.pageId === pageMeta.id;
         return (
-          <StyledSubListItem
-            data-testid={`favorite-list-item-${pageMeta.id}`}
-            active={active}
-            key={`${pageMeta}-${index}`}
-            onClick={() => {
-              if (active) {
-                return;
-              }
-              openPage(pageMeta.id);
-            }}
-          >
-            {pageMeta.title || 'Untitled'}
-          </StyledSubListItem>
+          <div key={`${pageMeta}-${index}`}>
+            <StyledSubListItem
+              data-testid={`favorite-list-item-${pageMeta.id}`}
+              active={active}
+              onClick={() => {
+                if (active) {
+                  return;
+                }
+                openPage(pageMeta.id);
+              }}
+            >
+              {pageMeta.title || 'Untitled'}
+            </StyledSubListItem>
+          </div>
         );
       })}
       {favoriteList.length === 0 && (

apps/web/src/hooks/__tests__/index.spec.tsx

@@ -42,9 +42,13 @@ import {
   useSyncRouterWithCurrentWorkspaceAndPage,
 } from '../use-sync-router-with-current-workspace-and-page';
 import { useWorkspaces, useWorkspacesHelper } from '../use-workspaces';
-vi.mock('react-lottie', () => ({
-  default: (props: React.PropsWithChildren) => <>{props.children}</>,
-}));
+
+vi.mock(
+  '../../components/blocksuite/header/editor-mode-switch/CustomLottie',
+  () => ({
+    default: (props: React.PropsWithChildren) => <>{props.children}</>,
+  })
+);
 
 let blockSuiteWorkspace: BlockSuiteWorkspace;
 beforeAll(() => {