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
+          <div key={`${pageMeta}-${index}`}>
-            data-testid={`favorite-list-item-${pageMeta.id}`}
+            <StyledSubListItem
-            active={active}
+              data-testid={`favorite-list-item-${pageMeta.id}`}
-            key={`${pageMeta}-${index}`}
+              active={active}
-            onClick={() => {
+              onClick={() => {
-              if (active) {
+                if (active) {
-                return;
+                  return;
-              }
+                }
-              openPage(pageMeta.id);
+                openPage(pageMeta.id);
-            }}
+              }}
-          >
+            >
-            {pageMeta.title || 'Untitled'}
+              {pageMeta.title || 'Untitled'}
-          </StyledSubListItem>
+            </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(() => {

pnpm-lock.yaml

@@ -154,7 +154,6 @@ importers:
       '@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
       cmdk: ^0.1.22
       css-spring: ^4.1.0
@@ -165,6 +164,7 @@ importers:
       jotai: ^2.0.3
       jotai-devtools: ^0.2.0
       lit: ^2.6.1
+      lottie-web: ^5.10.2
       next: ^13.2.2
       next-debug-local: ^0.1.5
       next-router-mock: ^0.9.2
@@ -173,7 +173,6 @@ importers:
       react: ^18.2.0
       react-dom: ^18.2.0
       react-is: ^18.2.0
-      react-lottie: ^1.2.3
       redux: ^4.2.1
       swc-plugin-coverage-instrument: ^0.0.14
       swr: ^2.0.4
@@ -205,11 +204,11 @@ importers:
       jotai: 2.0.3_react@18.2.0
       jotai-devtools: 0.2.0_tfg3pgykuuhpvkcrwis64xs5oq
       lit: 2.6.1
+      lottie-web: 5.10.2
       next-themes: 0.2.1_nvzgbose6yf6w7ijjprgspqefi
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-is: 18.2.0
-      react-lottie: 1.2.3_react@18.2.0
       swr: 2.0.4_react@18.2.0
       y-indexeddb: 9.0.9_yjs@13.5.48
       y-protocols: 1.0.5
@@ -222,7 +221,6 @@ importers:
       '@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
@@ -3385,6 +3383,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -3394,6 +3393,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     optional: true
 
@@ -3402,6 +3402,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -3411,6 +3412,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     optional: true
 
@@ -3419,6 +3421,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -3428,6 +3431,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     optional: true
 
@@ -3436,6 +3440,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -3445,6 +3450,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     optional: true
 
@@ -4802,6 +4808,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -4811,6 +4818,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -4820,6 +4828,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -4829,6 +4838,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -5185,12 +5195,6 @@ packages:
       '@types/react': 18.0.28
     dev: false
 
-  /@types/react-lottie/1.2.6:
-    resolution: {integrity: sha512-fvGJHD7SeUdVESHo7f7erRnXkTWaa/6Mo5TB+R0/ieSftKoFspA4sMlF2qMH6BljXI7ehFJbBtrD5bzDxPCkGg==}
-    dependencies:
-      '@types/react': 18.0.28
-    dev: true
-
   /@types/react-transition-group/4.4.5:
     resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
     dependencies:
@@ -6024,13 +6028,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-runtime/6.26.0:
-    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
-    dependencies:
-      core-js: 2.6.12
-      regenerator-runtime: 0.11.1
-    dev: false
-
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -6596,12 +6593,6 @@ packages:
       browserslist: 4.21.5
     dev: true
 
-  /core-js/2.6.12:
-    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
-    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
-    requiresBuild: true
-    dev: false
-
   /core-util-is/1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -10997,17 +10988,6 @@ packages:
   /react-is/18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
 
-  /react-lottie/1.2.3_react@18.2.0:
-    resolution: {integrity: sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==}
-    engines: {npm: ^3.0.0}
-    peerDependencies:
-      react: ^0.14.7 || ^15.0.0 || ^16.0.0
-    dependencies:
-      babel-runtime: 6.26.0
-      lottie-web: 5.10.2
-      react: 18.2.0
-    dev: false
-
   /react-refresh/0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -11208,10 +11188,6 @@ packages:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
     dev: true
 
-  /regenerator-runtime/0.11.1:
-    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
-    dev: false
-
   /regenerator-runtime/0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}