feat: add suspense to workspace settings (#3167)

Co-authored-by: Qi <474021214@qq.com>
(cherry picked from commit 3968deb6d4)

packages/component/src/components/setting-components/index.tsx

@@ -1,4 +1,6 @@
 export { SettingModal, type SettingModalProps } from './modal';
 export { SettingHeader } from './setting-header';
 export { SettingRow } from './setting-row';
+export * from './workspace-detail-skeleton';
+export * from './workspace-list-skeleton';
 export { SettingWrapper } from './wrapper';

packages/component/src/components/setting-components/setting-header.tsx

@@ -1,9 +1,9 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC, HTMLAttributes, ReactNode } from 'react';
 
 import { settingHeader } from './share.css';
 
 export const SettingHeader: FC<
-  { title: string; subtitle?: string } & Omit<
+  { title: ReactNode; subtitle?: ReactNode } & Omit<
     HTMLAttributes<HTMLDivElement>,
     'title'
   >

packages/component/src/components/setting-components/setting-row.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
-import type { CSSProperties, FC, PropsWithChildren, ReactElement } from 'react';
+import type { CSSProperties, FC, PropsWithChildren, ReactNode } from 'react';
 
 import { settingRow } from './share.css';
 
 export const SettingRow: FC<
   PropsWithChildren<{
-    name: string | ReactElement;
-    desc: string | ReactElement;
+    name: ReactNode;
+    desc: ReactNode;
     style?: CSSProperties;
     onClick?: () => void;
     spreadCol?: boolean;

packages/component/src/components/setting-components/workspace-detail-skeleton.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from '@mui/material';
+
+import { SettingHeader } from './setting-header';
+import { SettingRow } from './setting-row';
+import { SettingWrapper } from './wrapper';
+
+export const WorkspaceDetailSkeleton = () => {
+  return (
+    <>
+      <SettingHeader title={<Skeleton />} subtitle={<Skeleton />} />
+
+      {new Array(3).fill(0).map((_, index) => {
+        return (
+          <SettingWrapper title={<Skeleton />} key={index}>
+            <SettingRow
+              name={<Skeleton />}
+              desc={<Skeleton />}
+              spreadCol={false}
+            ></SettingRow>
+          </SettingWrapper>
+        );
+      })}
+    </>
+  );
+};

packages/component/src/components/setting-components/workspace-list-skeleton.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from '@mui/material';
+
+import { FlexWrapper } from '../../ui/layout';
+
+export const WorkspaceListItemSkeleton = () => {
+  return (
+    <FlexWrapper
+      alignItems="center"
+      style={{ padding: '0 8px', height: 30, marginBottom: 4 }}
+    >
+      <Skeleton
+        variant="circular"
+        width={14}
+        height={14}
+        style={{ marginRight: 10 }}
+      />
+      <Skeleton variant="rectangular" height={16} style={{ flexGrow: 1 }} />
+    </FlexWrapper>
+  );
+};
+
+export const WorkspaceListSkeleton = () => {
+  return (
+    <>
+      {new Array(5).fill(0).map((_, index) => {
+        return <WorkspaceListItemSkeleton key={index} />;
+      })}
+    </>
+  );
+};

packages/component/src/components/setting-components/wrapper.tsx

@@ -1,9 +1,9 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 
 import { wrapper } from './share.css';
 export const SettingWrapper: FC<
   PropsWithChildren<{
-    title?: string;
+    title?: ReactNode;
   }>
 > = ({ title, children }) => {
   return (

packages/component/src/ui/mui.ts

@@ -4,8 +4,8 @@ import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
 import MuiCollapse from '@mui/material/Collapse';
 import MuiFade from '@mui/material/Fade';
 import MuiGrow from '@mui/material/Grow';
+import MuiSkeleton from '@mui/material/Skeleton';
 import MuiSlide from '@mui/material/Slide';
-
 export {
   MuiAvatar,
   MuiBreadcrumbs,
@@ -13,5 +13,6 @@ export {
   MuiCollapse,
   MuiFade,
   MuiGrow,
+  MuiSkeleton,
   MuiSlide,
 };