diff --git a/apps/web/src/pages/public-workspace/[workspaceId].tsx b/apps/web/src/pages/public-workspace/[workspaceId].tsx
index 62d47676ae..3ce7f9fe5a 100644
--- a/apps/web/src/pages/public-workspace/[workspaceId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId].tsx
@@ -1,4 +1,6 @@
+import { ListSkeleton } from '@affine/component';
 import { useAtomValue, useSetAtom } from 'jotai';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import React, { Suspense, useCallback, useEffect } from 'react';
 
@@ -8,11 +10,17 @@ import {
   publicWorkspaceIdAtom,
 } from '../../atoms/public-workspace';
 import { QueryParamError } from '../../components/affine/affine-error-eoundary';
-import { BlockSuitePublicPageList } from '../../components/blocksuite/block-suite-page-list';
+import { StyledTableContainer } from '../../components/blocksuite/block-suite-page-list/page-list/styles';
 import { PageLoading } from '../../components/pure/loading';
 import { WorkspaceLayout } from '../../layouts';
 import { NextPageWithLayout } from '../../shared';
 
+const BlockSuitePublicPageList = dynamic(
+  async () =>
+    (await import('../../components/blocksuite/block-suite-page-list'))
+      .BlockSuitePublicPageList
+);
+
 const ListPageInner: React.FC<{
   workspaceId: string;
 }> = ({ workspaceId }) => {
@@ -64,7 +72,13 @@ const ListPage: NextPageWithLayout = () => {
     throw new QueryParamError('workspaceId', workspaceId);
   }
   return (
-    <Suspense fallback={<PageLoading />}>
+    <Suspense
+      fallback={
+        <StyledTableContainer>
+          <ListSkeleton />
+        </StyledTableContainer>
+      }
+    >
       <ListPageInner workspaceId={workspaceId} />
     </Suspense>
   );
diff --git a/packages/component/src/components/ListSkeleton.tsx b/packages/component/src/components/ListSkeleton.tsx
new file mode 100644
index 0000000000..9d24d8b5a6
--- /dev/null
+++ b/packages/component/src/components/ListSkeleton.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from '@mui/material';
+import { memo } from 'react';
+
+export const ListSkeleton = memo(function ListItemSkeleton() {
+  return (
+    <>
+      <Skeleton animation="wave" height={40} />
+      <Skeleton animation="wave" height={40} />
+      <Skeleton animation="wave" height={40} />
+      <Skeleton animation="wave" height={40} />
+    </>
+  );
+});
diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts
index f372317228..5e46892cec 100644
--- a/packages/component/src/index.ts
+++ b/packages/component/src/index.ts
@@ -1,4 +1,5 @@
 // export * from './components/BlockSuiteEditor';
+export * from './components/ListSkeleton';
 export * from './styles';
 export * from './ui/breadcrumbs';
 export * from './ui/button';