feat(component): improve fallback skeleton (#2323)

packages/component/src/components/app-sidebar/fallback.css.ts

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+
+export const fallbackStyle = style({
+  margin: '0 2px',
+  height: '100%',
+});
+
+export const fallbackHeaderStyle = style({
+  padding: '0 6px',
+  height: '58px',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '8px',
+});

packages/component/src/components/app-sidebar/fallback.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from '@mui/material';
+import type { ReactElement } from 'react';
+
+import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
+import { AppSidebar } from './index';
+
+export const AppSidebarFallback = (): ReactElement | null => {
+  return (
+    <AppSidebar>
+      <div className={fallbackStyle}>
+        <div className={fallbackHeaderStyle}>
+          <Skeleton variant="circular" width={40} height={40} />
+          <Skeleton variant="rectangular" width={150} height={40} />
+        </div>
+      </div>
+    </AppSidebar>
+  );
+};

packages/component/src/components/app-sidebar/index.stories.tsx

@@ -2,9 +2,15 @@ import { IconButton } from '@affine/component';
 import { SidebarIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
 import { useAtom } from 'jotai';
+import type { PropsWithChildren } from 'react';
 import { useState } from 'react';
 
-import { AppSidebar, appSidebarOpenAtom, ResizeIndicator } from '.';
+import {
+  AppSidebar,
+  AppSidebarFallback,
+  appSidebarOpenAtom,
+  ResizeIndicator,
+} from '.';
 import { navHeaderStyle, sidebarButtonStyle } from './index.css';
 
 export default {
@@ -12,42 +18,61 @@ export default {
   component: AppSidebar,
 } satisfies Meta;
 
+const Container = ({ children }: PropsWithChildren) => (
+  <main
+    style={{
+      position: 'relative',
+      width: '100vw',
+      height: '600px',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'row',
+    }}
+  >
+    {children}
+  </main>
+);
+const Main = () => {
+  const [open, setOpen] = useAtom(appSidebarOpenAtom);
+  return (
+    <div>
+      <div className={navHeaderStyle}>
+        {!open && (
+          <IconButton
+            className={sidebarButtonStyle}
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            <SidebarIcon width={24} height={24} />
+          </IconButton>
+        )}
+      </div>
+    </div>
+  );
+};
 const Footer = () => <div>Add Page</div>;
 
 export const Default: StoryFn = () => {
-  const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const [ref, setRef] = useState<HTMLElement | null>(null);
   return (
     <>
-      <main
-        style={{
-          position: 'relative',
-          width: '100vw',
-          height: '600px',
-          overflow: 'hidden',
-          display: 'flex',
-          flexDirection: 'row',
-        }}
-      >
+      <Container>
         <AppSidebar footer={<Footer />} ref={setRef}>
           Test
         </AppSidebar>
         <ResizeIndicator targetElement={ref} />
-        <div>
-          <div className={navHeaderStyle}>
-            {!open && (
-              <IconButton
-                className={sidebarButtonStyle}
-                onClick={() => {
-                  setOpen(true);
-                }}
-              >
-                <SidebarIcon width={24} height={24} />
-              </IconButton>
-            )}
-          </div>
-        </div>
-      </main>
+        <Main />
+      </Container>
     </>
   );
 };
+
+export const Fallback = () => {
+  return (
+    <Container>
+      <AppSidebarFallback />
+      <Main />
+    </Container>
+  );
+};

packages/component/src/components/app-sidebar/index.tsx

@@ -151,5 +151,6 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
   }
 );
 
+export { AppSidebarFallback } from './fallback';
 export type { ResizeIndicatorProps } from './resize-indicator';
 export { ResizeIndicator } from './resize-indicator';