fix: wrap React.lazy with Suspense (#1915)

This commit is contained in:
Himself65
2023-04-12 22:33:31 -05:00
committed by GitHub
parent 2bcda973d3
commit 6180a4c3cb
8 changed files with 138 additions and 120 deletions

View File

@@ -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 (
<>
<WorkspaceListModal
disabled={transitioning}
user={user}
workspaces={workspaces}
currentWorkspaceId={currentWorkspaceId}
open={openWorkspacesModal || workspaces.length === 0}
onClose={useCallback(() => {
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 => {
<Suspense>
<WorkspaceListModal
disabled={transitioning}
user={user}
workspaces={workspaces}
currentWorkspaceId={currentWorkspaceId}
open={openWorkspacesModal || workspaces.length === 0}
onClose={useCallback(() => {
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])}
/>
<CreateWorkspaceModal
open={openCreateWorkspaceModal}
onClose={useCallback(() => {
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])}
/>
</Suspense>
<Suspense>
<CreateWorkspaceModal
open={openCreateWorkspaceModal}
onClose={useCallback(() => {
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,
]
)}
/>
</Suspense>
</>
);
}