From 6180a4c3cb324e8d0ca3f01007f914693d739282 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Wed, 12 Apr 2023 22:33:31 -0500 Subject: [PATCH] fix: wrap React.lazy with Suspense (#1915) --- .../web/src/components/page-detail-editor.tsx | 56 ++++---- .../src/components/pure/help-island/index.tsx | 14 +- apps/web/src/layouts/index.tsx | 14 +- .../src/layouts/public-workspace-layout.tsx | 14 +- apps/web/src/pages/_debug/init-page.dev.tsx | 6 +- apps/web/src/pages/_debug/login.dev.tsx | 12 +- .../pages/public-workspace/[workspaceId].tsx | 10 +- apps/web/src/providers/ModalProvider.tsx | 132 +++++++++--------- 8 files changed, 138 insertions(+), 120 deletions(-) diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx index 72c335a16f..37db8eb07c 100644 --- a/apps/web/src/components/page-detail-editor.tsx +++ b/apps/web/src/components/page-detail-editor.tsx @@ -5,7 +5,7 @@ import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-blocksu import { useAtomValue, useSetAtom } from 'jotai'; import Head from 'next/head'; import type React from 'react'; -import { lazy, startTransition, useCallback } from 'react'; +import { lazy, startTransition, Suspense, useCallback } from 'react'; import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms'; import { usePageMeta } from '../hooks/use-page-meta'; @@ -64,32 +64,34 @@ export const PageDetailEditor: React.FC = ({ > {header} - ) => { - startTransition(() => { - setEditor(editor); - }); - onInit(page, editor); - }, - [onInit, setEditor] - )} - onLoad={useCallback( - (page: Page, editor: EditorContainer) => { - startTransition(() => { - setEditor(editor); - }); - onLoad?.(page, editor); - }, - [onLoad, setEditor] - )} - /> + + ) => { + startTransition(() => { + setEditor(editor); + }); + onInit(page, editor); + }, + [onInit, setEditor] + )} + onLoad={useCallback( + (page: Page, editor: EditorContainer) => { + startTransition(() => { + setEditor(editor); + }); + onLoad?.(page, editor); + }, + [onLoad, setEditor] + )} + /> + ); }; diff --git a/apps/web/src/components/pure/help-island/index.tsx b/apps/web/src/components/pure/help-island/index.tsx index e80a373517..1c9382fa81 100644 --- a/apps/web/src/components/pure/help-island/index.tsx +++ b/apps/web/src/components/pure/help-island/index.tsx @@ -2,7 +2,7 @@ import { MuiFade, Tooltip } from '@affine/component'; import { config } from '@affine/env'; import { useTranslation } from '@affine/i18n'; import { CloseIcon, NewIcon } from '@blocksuite/icons'; -import { lazy, useState } from 'react'; +import { lazy, Suspense, useState } from 'react'; import { ShortcutsModal } from '../shortcuts-modal'; import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons'; @@ -113,11 +113,13 @@ export const HelpIsland = ({ - setOpen(false)} - logoSrc="/imgs/affine-text-logo.png" - /> + + setOpen(false)} + logoSrc="/imgs/affine-text-logo.png" + /> + setOpenShortCut(false)} diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx index ff4182efd6..110e5946eb 100644 --- a/apps/web/src/layouts/index.tsx +++ b/apps/web/src/layouts/index.tsx @@ -69,12 +69,14 @@ export const PublicQuickSearch: FC = () => { openQuickSearchModalAtom ); return ( - + + + ); }; diff --git a/apps/web/src/layouts/public-workspace-layout.tsx b/apps/web/src/layouts/public-workspace-layout.tsx index f4ecd6eede..d113d3c31d 100644 --- a/apps/web/src/layouts/public-workspace-layout.tsx +++ b/apps/web/src/layouts/public-workspace-layout.tsx @@ -28,12 +28,14 @@ export const PublicQuickSearch: React.FC = () => { openQuickSearchModalAtom ); return ( - + + + ); }; diff --git a/apps/web/src/pages/_debug/init-page.dev.tsx b/apps/web/src/pages/_debug/init-page.dev.tsx index b44d91554f..dbe19a966a 100644 --- a/apps/web/src/pages/_debug/init-page.dev.tsx +++ b/apps/web/src/pages/_debug/init-page.dev.tsx @@ -1,6 +1,6 @@ import { NoSsr } from '@mui/material'; import { useRouter } from 'next/router'; -import { lazy } from 'react'; +import { lazy, Suspense } from 'react'; import { StyledPage, StyledWrapper } from '../../layouts/styles'; import type { NextPageWithLayout } from '../../shared'; @@ -26,7 +26,9 @@ const InitPagePage: NextPageWithLayout = () => { return ( - + + +
diff --git a/apps/web/src/pages/_debug/login.dev.tsx b/apps/web/src/pages/_debug/login.dev.tsx index 484df22fb7..84bf75035c 100644 --- a/apps/web/src/pages/_debug/login.dev.tsx +++ b/apps/web/src/pages/_debug/login.dev.tsx @@ -11,7 +11,7 @@ import { } from '@affine/workspace/affine/login'; import { useAtom } from 'jotai'; import type { NextPage } from 'next'; -import { lazy, useMemo } from 'react'; +import { lazy, Suspense, useMemo } from 'react'; import { toast } from '../../utils'; @@ -91,10 +91,12 @@ const LoginDevPage: NextPage = () => { > Check Permission - + + + ); diff --git a/apps/web/src/pages/public-workspace/[workspaceId].tsx b/apps/web/src/pages/public-workspace/[workspaceId].tsx index c0a17bd712..95d02cf3d6 100644 --- a/apps/web/src/pages/public-workspace/[workspaceId].tsx +++ b/apps/web/src/pages/public-workspace/[workspaceId].tsx @@ -71,10 +71,12 @@ const ListPageInner: React.FC<{ - + + + ); }; diff --git a/apps/web/src/providers/ModalProvider.tsx b/apps/web/src/providers/ModalProvider.tsx index 11a229f9cf..95c9bb82fa 100644 --- a/apps/web/src/providers/ModalProvider.tsx +++ b/apps/web/src/providers/ModalProvider.tsx @@ -3,7 +3,7 @@ import { arrayMove } from '@dnd-kit/sortable'; import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import { useRouter } from 'next/router'; import type React from 'react'; -import { lazy, useCallback, useTransition } from 'react'; +import { lazy, Suspense, useCallback, useTransition } from 'react'; import { currentWorkspaceIdAtom, @@ -49,71 +49,75 @@ export function Modals() { return ( <> - { - setOpenWorkspacesModal(false); - }, [setOpenWorkspacesModal])} - onMoveWorkspace={useCallback( - (activeId, overId) => { - const oldIndex = workspaces.findIndex(w => w.id === activeId); - const newIndex = workspaces.findIndex(w => w.id === overId); - transition(() => - setWorkspaces(workspaces => - arrayMove(workspaces, oldIndex, newIndex) - ) - ); - }, - [setWorkspaces, workspaces] - )} - onClickWorkspace={useCallback( - workspace => { + + { setOpenWorkspacesModal(false); - setCurrentWorkspace(workspace.id); - jumpToSubPath(workspace.id, WorkspaceSubPath.ALL); - }, - [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal] - )} - onClickWorkspaceSetting={useCallback( - workspace => { - setOpenWorkspacesModal(false); - setCurrentWorkspace(workspace.id); - jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING); - }, - [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal] - )} - onClickLogin={useAffineLogIn()} - onClickLogout={useAffineLogOut()} - onCreateWorkspace={useCallback(() => { - setOpenCreateWorkspaceModal(true); - }, [setOpenCreateWorkspaceModal])} - /> - { - setOpenCreateWorkspaceModal(false); - }, [setOpenCreateWorkspaceModal])} - onCreate={useCallback( - async name => { - const id = await createLocalWorkspace(name); + }, [setOpenWorkspacesModal])} + onMoveWorkspace={useCallback( + (activeId, overId) => { + const oldIndex = workspaces.findIndex(w => w.id === activeId); + const newIndex = workspaces.findIndex(w => w.id === overId); + transition(() => + setWorkspaces(workspaces => + arrayMove(workspaces, oldIndex, newIndex) + ) + ); + }, + [setWorkspaces, workspaces] + )} + onClickWorkspace={useCallback( + workspace => { + setOpenWorkspacesModal(false); + setCurrentWorkspace(workspace.id); + jumpToSubPath(workspace.id, WorkspaceSubPath.ALL); + }, + [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal] + )} + onClickWorkspaceSetting={useCallback( + workspace => { + setOpenWorkspacesModal(false); + setCurrentWorkspace(workspace.id); + jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING); + }, + [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal] + )} + onClickLogin={useAffineLogIn()} + onClickLogout={useAffineLogOut()} + onCreateWorkspace={useCallback(() => { + setOpenCreateWorkspaceModal(true); + }, [setOpenCreateWorkspaceModal])} + /> + + + { setOpenCreateWorkspaceModal(false); - setOpenWorkspacesModal(false); - setCurrentWorkspace(id); - return jumpToSubPath(id, WorkspaceSubPath.ALL); - }, - [ - createLocalWorkspace, - jumpToSubPath, - setCurrentWorkspace, - setOpenCreateWorkspaceModal, - setOpenWorkspacesModal, - ] - )} - /> + }, [setOpenCreateWorkspaceModal])} + onCreate={useCallback( + async name => { + const id = await createLocalWorkspace(name); + setOpenCreateWorkspaceModal(false); + setOpenWorkspacesModal(false); + setCurrentWorkspace(id); + return jumpToSubPath(id, WorkspaceSubPath.ALL); + }, + [ + createLocalWorkspace, + jumpToSubPath, + setCurrentWorkspace, + setOpenCreateWorkspaceModal, + setOpenWorkspacesModal, + ] + )} + /> + ); }