Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-11 20:08:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(component): add skeleton in page detail (#2292)

Browse Source
This commit is contained in:
Himself65
2023-05-10 11:38:30 +08:00
committed by GitHub
parent 0c550a2827
commit b38017cd23
4 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
View File

@@ -1,6 +1,6 @@
import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
import type { BlockSuiteFeatureFlags } from '@affine/env';
import { config } from '@affine/env';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
import { WorkspaceFlavour } from '@affine/workspace/type';
import { assertExists } from '@blocksuite/store';
@@ -16,7 +16,6 @@ import { useCallback, useEffect } from 'react';
import { rootCurrentWorkspaceAtom } from '../../../atoms/root';
import { Unreachable } from '../../../components/affine/affine-error-eoundary';
import { PageLoading } from '../../../components/pure/loading';
import { useReferenceLinkEffect } from '../../../hooks/affine/use-reference-link-effect';
import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
import { usePinboardHandler } from '../../../hooks/use-pinboard-handler';
@@ -41,8 +40,8 @@ const WorkspaceDetail: React.FC = () => {
const { openPage } = useRouterHelper(router);
const currentPageId = useAtomValue(rootCurrentPageIdAtom);
const [currentWorkspace] = useCurrentWorkspace();
const t = useAFFiNEI18N();
assertExists(currentWorkspace);
assertExists(currentPageId);
const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
const { setPageMeta, getPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
const { deletePin } = usePinboardHandler({
@@ -85,9 +84,6 @@ const WorkspaceDetail: React.FC = () => {
setEditorFlags(currentWorkspace.blockSuiteWorkspace);
}
}, [currentWorkspace]);
if (!currentPageId) {
return <PageLoading text={t['Loading Page']()} />;
}
if (currentWorkspace.flavour === WorkspaceFlavour.AFFINE) {
const PageDetail = WorkspacePlugins[currentWorkspace.flavour].UI.PageDetail;
return (
@@ -112,16 +108,15 @@ const WorkspaceDetailPage: NextPageWithLayout = () => {
const router = useRouter();
const currentWorkspace = useAtomValue(rootCurrentWorkspaceAtom);
const currentPageId = useAtomValue(rootCurrentPageIdAtom);
const t = useAFFiNEI18N();
useRouterAndWorkspaceWithPageIdDefense(router);
const page = useBlockSuiteWorkspacePage(
currentWorkspace.blockSuiteWorkspace,
currentPageId
);
if (!router.isReady) {
return <PageLoading text={t['Router is Loading']()} />;
return <PageDetailSkeleton key="router-not-ready" />;
} else if (!currentPageId || !page) {
return <PageLoading text={t['Page is Loading']()} />;
return <PageDetailSkeleton key="current-page-is-null" />;
}
return <WorkspaceDetail />;
};