From cd2495e4e06982f7d8fa36271ab471f7d8404b2c Mon Sep 17 00:00:00 2001
From: tzhangchi <terry.zhangchi@outlook.com>
Date: Fri, 13 Jan 2023 23:43:09 +0800
Subject: [PATCH] feat: add page loading for public workspace page view

---
 .../[workspaceId]/[pageId].tsx                | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx
index a3629580b..81ae82329 100644
--- a/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@@ -5,6 +5,10 @@ import { styled } from '@/styles';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { Page as PageStore, Workspace } from '@blocksuite/store';
+import { PageLoading } from '@/components/loading';
+
+import { useTranslation } from '@affine/i18n';
+
 const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
   ssr: false,
 });
@@ -13,6 +17,8 @@ const Page: NextPageWithLayout = () => {
   const [page, setPage] = useState<PageStore>();
   const { dataCenter } = useAppState();
   const router = useRouter();
+  const [loaded, setLoaded] = useState(false);
+  const { t } = useTranslation();
   useEffect(() => {
     dataCenter
       .loadPublicWorkspace(router.query.workspaceId as string)
@@ -39,17 +45,21 @@ const Page: NextPageWithLayout = () => {
       });
   }, [router, dataCenter]);
   return (
-    <PageContainer>
-      {workspace && page && (
-        <DynamicBlocksuite
-          page={page}
-          workspace={workspace}
-          setEditor={editor => {
-            editor.readonly = true;
-          }}
-        />
-      )}
-    </PageContainer>
+    <>
+      {!loaded && <PageLoading />}
+      <PageContainer>
+        {workspace && page && (
+          <DynamicBlocksuite
+            page={page}
+            workspace={workspace}
+            setEditor={editor => {
+              editor.readonly = true;
+              setLoaded(true);
+            }}
+          />
+        )}
+      </PageContainer>
+    </>
   );
 };