feat: add suspense to workspace settings (#3167)

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

apps/web/src/components/affine/setting-modal/index.tsx

@@ -2,16 +2,11 @@ import {
   SettingModal as SettingModalBase,
   type SettingModalProps,
 } from '@affine/component/setting-components';
-import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { ContactWithUsIcon } from '@blocksuite/icons';
-import { useAtomValue } from 'jotai';
 import type React from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
-import type { AllWorkspace } from '../../../shared';
 import { AccountSetting } from './account-setting';
 import {
   GeneralSetting,
@@ -40,14 +35,7 @@ export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
 }) => {
   const t = useAFFiNEI18N();
 
-  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
-  const [currentWorkspace] = useCurrentWorkspace();
   const generalSettingList = useGeneralSettingList();
-  const workspaceList = useMemo(() => {
-    return workspaces.filter(
-      ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
-    );
-  }, [workspaces]);
 
   const onGeneralSettingClick = useCallback(
     (key: GeneralSettingKeys) => {
@@ -76,8 +64,6 @@ export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
       <SettingSidebar
         generalSettingList={generalSettingList}
         onGeneralSettingClick={onGeneralSettingClick}
-        currentWorkspace={currentWorkspace as AllWorkspace}
-        workspaceList={workspaceList}
         onWorkspaceSettingClick={onWorkspaceSettingClick}
         selectedGeneralKey={activeTab}
         selectedWorkspaceId={workspaceId}

apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -1,18 +1,24 @@
-import { UserAvatar } from '@affine/component/user-avatar';
+import {
+  WorkspaceListItemSkeleton,
+  WorkspaceListSkeleton,
+} from '@affine/component/setting-components';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { useStaticBlockSuiteWorkspace } from '@toeverything/hooks/use-block-suite-workspace';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import clsx from 'clsx';
+import { useAtomValue } from 'jotai';
+import type { FC } from 'react';
+import { Suspense } from 'react';
 
-import type { AllWorkspace } from '../../../../shared';
+import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import type {
   GeneralSettingKeys,
   GeneralSettingList,
 } from '../general-setting';
 import {
-  accountButton,
   settingSlideBar,
   sidebarItemsWrapper,
   sidebarSelectItem,
@@ -20,25 +26,19 @@ import {
   sidebarTitle,
 } from './style.css';
 
-export const SettingSidebar = ({
-  generalSettingList,
-  onGeneralSettingClick,
-  currentWorkspace,
-  workspaceList,
-  onWorkspaceSettingClick,
-  selectedWorkspaceId,
-  selectedGeneralKey,
-  onAccountSettingClick,
-}: {
+export const SettingSidebar: FC<{
   generalSettingList: GeneralSettingList;
   onGeneralSettingClick: (key: GeneralSettingKeys) => void;
-  currentWorkspace: AllWorkspace;
-  workspaceList: RootWorkspaceMetadata[];
   onWorkspaceSettingClick: (workspaceId: string) => void;
-
   selectedWorkspaceId: string | null;
   selectedGeneralKey: string | null;
   onAccountSettingClick: () => void;
+}> = ({
+  generalSettingList,
+  onGeneralSettingClick,
+  onWorkspaceSettingClick,
+  selectedWorkspaceId,
+  selectedGeneralKey,
 }) => {
   const t = useAFFiNEI18N();
   return (
@@ -70,10 +70,29 @@ export const SettingSidebar = ({
         {t['com.affine.settings.workspace']()}
       </div>
       <div className={clsx(sidebarItemsWrapper, 'scroll')}>
-        {workspaceList.map(workspace => {
-          return (
+        <Suspense fallback={<WorkspaceListSkeleton />}>
+          <WorkspaceList
+            onWorkspaceSettingClick={onWorkspaceSettingClick}
+            selectedWorkspaceId={selectedWorkspaceId}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+export const WorkspaceList: FC<{
+  onWorkspaceSettingClick: (workspaceId: string) => void;
+  selectedWorkspaceId: string | null;
+}> = ({ onWorkspaceSettingClick, selectedWorkspaceId }) => {
+  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
+  const [currentWorkspace] = useCurrentWorkspace();
+  return (
+    <>
+      {workspaces.map(workspace => {
+        return (
+          <Suspense key={workspace.id} fallback={<WorkspaceListItemSkeleton />}>
             <WorkspaceListItem
-              key={workspace.id}
               meta={workspace}
               onClick={() => {
                 onWorkspaceSettingClick(workspace.id);
@@ -81,30 +100,10 @@ export const SettingSidebar = ({
               isCurrent={workspace.id === currentWorkspace.id}
               isActive={workspace.id === selectedWorkspaceId}
             />
-          );
-        })}
-      </div>
-
-      {runtimeConfig.enableCloud && (
-        <div className={accountButton} onClick={onAccountSettingClick}>
-          <UserAvatar
-            size={28}
-            name="Account NameAccount Name"
-            url={''}
-            className="avatar"
-          />
-
-          <div className="content">
-            <div className="name" title="xxx">
-              Account NameAccount Name
-            </div>
-            <div className="email" title="xxx">
-              xxxxxxxx@gmail.comxxxxxxxx@gmail.com
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
+          </Suspense>
+        );
+      })}
+    </>
   );
 };
 

apps/web/src/components/affine/setting-modal/style.css.ts

@@ -14,6 +14,10 @@ globalStyle(`${settingContent} .wrapper`, {
   maxWidth: '560px',
   margin: '0 auto',
 });
+
+globalStyle(`${settingContent} .wrapper::-webkit-scrollbar`, {
+  display: 'none',
+});
 globalStyle(`${settingContent} .content`, {
   minHeight: '100%',
   paddingBottom: '80px',

apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx

@@ -1,3 +1,4 @@
+import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
 import { usePassiveWorkspaceEffect } from '@toeverything/hooks/use-block-suite-workspace';
 import { useSetAtom } from 'jotai';
 import { useRouter } from 'next/router';
@@ -29,7 +30,7 @@ export const WorkspaceSetting = ({ workspaceId }: { workspaceId: string }) => {
   const onTransformWorkspace = useOnTransformWorkspace();
 
   return (
-    <Suspense fallback={<div>loading</div>}>
+    <Suspense fallback={<WorkspaceDetailSkeleton />}>
       <NewSettingsDetail
         onTransformWorkspace={onTransformWorkspace}
         onDeleteWorkspace={onDeleteWorkspace}