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

packages/component/src/components/page-detail-skeleton/index.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+export const pageDetailSkeletonStyle = style({
+  padding: '0 20px',
+});
+
+export const pageDetailSkeletonTitleStyle = style({
+  height: '52px',
+  width: '100%',
+});

packages/component/src/components/page-detail-skeleton/index.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+
+import { PageDetailSkeleton } from '.';
+
+export default {
+  title: 'AFFiNE/PageDetailSkeleton',
+  component: PageDetailSkeleton,
+} satisfies Meta<typeof PageDetailSkeleton>;
+
+export const Basic = () => {
+  return <PageDetailSkeleton />;
+};

packages/component/src/components/page-detail-skeleton/index.tsx

@@ -0,0 +1,14 @@
+import { BlockSuiteFallback } from '../block-suite-editor';
+import {
+  pageDetailSkeletonStyle,
+  pageDetailSkeletonTitleStyle,
+} from './index.css';
+
+export const PageDetailSkeleton = () => {
+  return (
+    <div className={pageDetailSkeletonStyle}>
+      <div className={pageDetailSkeletonTitleStyle} />
+      <BlockSuiteFallback />
+    </div>
+  );
+};