From fc56a53acdc99f5b2365019e1ca8aac993281e46 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Fri, 15 Dec 2023 08:21:41 +0000
Subject: [PATCH] fix(core): page mode switch sometimes not working (#5306)

Should not pass inline object without memo into `InternalLottie`.
https://github.com/toeverything/AFFiNE/blob/cdc96876b0a764ccf4f8ae9b7877ba8ae6774acb/packages/frontend/component/src/components/internal-lottie/index.tsx#L77

In the detail page when during syncing on the cloud, the detail page will be re-rendered constantly because of `useCurrentSyncEngineStatus` hook, which will then cause `PageSwitchItem` to re-render and forcing the internal lottie state to reset. As a result the click event may not be captured somehow.
---
 .../block-suite-mode-switch/switch-items.tsx  | 40 +++++++++----------
 .../workspace/detail-page/detail-page.tsx     |  5 ++-
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx
index 7d738acce1..cb9f4b20f6 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx
@@ -45,21 +45,30 @@ const HoverAnimateController = ({
   );
 };
 
+const pageLottieOptions = {
+  loop: false,
+  autoplay: false,
+  animationData: pageHover,
+  rendererSettings: {
+    preserveAspectRatio: 'xMidYMid slice',
+  },
+};
+
+const edgelessLottieOptions = {
+  loop: false,
+  autoplay: false,
+  animationData: edgelessHover,
+  rendererSettings: {
+    preserveAspectRatio: 'xMidYMid slice',
+  },
+};
+
 export const PageSwitchItem = (
   props: Omit<HoverAnimateControllerProps, 'children'>
 ) => {
   return (
     <HoverAnimateController {...props}>
-      <InternalLottie
-        options={{
-          loop: false,
-          autoplay: false,
-          animationData: pageHover,
-          rendererSettings: {
-            preserveAspectRatio: 'xMidYMid slice',
-          },
-        }}
-      />
+      <InternalLottie options={pageLottieOptions} />
     </HoverAnimateController>
   );
 };
@@ -69,16 +78,7 @@ export const EdgelessSwitchItem = (
 ) => {
   return (
     <HoverAnimateController {...props}>
-      <InternalLottie
-        options={{
-          loop: false,
-          autoplay: false,
-          animationData: edgelessHover,
-          rendererSettings: {
-            preserveAspectRatio: 'xMidYMid slice',
-          },
-        }}
-      />
+      <InternalLottie options={edgelessLottieOptions} />
     </HoverAnimateController>
   );
 };
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 1911cedb26..b955b829f5 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -14,6 +14,7 @@ import { useWorkspaceStatus } from '@toeverything/hooks/use-workspace-status';
 import { appSettingAtom, currentPageIdAtom } from '@toeverything/infra/atom';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
+  memo,
   type ReactElement,
   type ReactNode,
   useCallback,
@@ -101,7 +102,7 @@ const DetailPageLayout = ({
   );
 };
 
-const DetailPageImpl = ({ page }: { page: Page }) => {
+const DetailPageImpl = memo(function DetailPageImpl({ page }: { page: Page }) {
   const currentPageId = page.id;
   const { openPage, jumpToSubPath } = useNavigateHelper();
   const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
@@ -200,7 +201,7 @@ const DetailPageImpl = ({ page }: { page: Page }) => {
       <GlobalPageHistoryModal />
     </>
   );
-};
+});
 
 const useForceUpdate = () => {
   const [, setCount] = useState(0);