fix(core): adjust suspense loading for some components (#6088)

Adjust setting & user info popover suspense to make them a little bit more responsive

packages/frontend/core/src/components/affine/setting-modal/index.tsx

@@ -1,3 +1,4 @@
+import { Loading } from '@affine/component';
 import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
 import { Modal, type ModalProps } from '@affine/component/ui/modal';
 import {
@@ -36,7 +37,15 @@ export interface SettingProps extends ModalProps {
 const isGeneralSetting = (key: string): key is GeneralSettingKey =>
   GeneralSettingKeys.includes(key as GeneralSettingKey);
 
-export const SettingModal = ({
+const CenteredLoading = () => {
+  return (
+    <div className={style.centeredLoading}>
+      <Loading size={24} />
+    </div>
+  );
+};
+
+const SettingModalInner = ({
   activeTab = 'appearance',
   workspaceMetadata = null,
   onSettingClick,
@@ -95,27 +104,12 @@ export const SettingModal = ({
   }, [setOpenStarAFFiNEModal]);
 
   return (
-    <Modal
+    <>
-      width={1080}
-      height={760}
-      contentOptions={{
-        ['data-testid' as string]: 'setting-modal',
-        style: {
-          maxHeight: '85vh',
-          maxWidth: '70vw',
-          padding: 0,
-          overflow: 'hidden',
-          display: 'flex',
-        },
-      }}
-      {...modalProps}
-    >
       <SettingSidebar
         activeTab={activeTab}
         onTabChange={onTabChange}
         selectedWorkspaceId={workspaceMetadata?.id ?? null}
       />
-
       <div
         data-testid="setting-modal-content"
         className={style.wrapper}
@@ -161,6 +155,40 @@ export const SettingModal = ({
           </div>
         </div>
       </div>
+    </>
+  );
+};
+
+export const SettingModal = ({
+  activeTab = 'appearance',
+  workspaceMetadata = null,
+  onSettingClick,
+  ...modalProps
+}: SettingProps) => {
+  return (
+    <Modal
+      width={1080}
+      height={760}
+      contentOptions={{
+        ['data-testid' as string]: 'setting-modal',
+        style: {
+          maxHeight: '85vh',
+          maxWidth: '70vw',
+          padding: 0,
+          overflow: 'hidden',
+          display: 'flex',
+        },
+      }}
+      {...modalProps}
+    >
+      <Suspense fallback={<CenteredLoading />}>
+        <SettingModalInner
+          activeTab={activeTab}
+          workspaceMetadata={workspaceMetadata}
+          onSettingClick={onSettingClick}
+          {...modalProps}
+        />
+      </Suspense>
     </Modal>
   );
 };

packages/frontend/core/src/components/affine/setting-modal/style.css.ts

@@ -51,3 +51,11 @@ export const link = style({
   color: cssVar('linkColor'),
   cursor: 'pointer',
 });
+
+export const centeredLoading = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  width: '100%',
+});

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.css.ts

@@ -49,3 +49,10 @@ export const signInTextSecondary = style({
 export const menuItem = style({
   borderRadius: '8px',
 });
+export const loadingWrapper = style({
+  height: 42,
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx

@@ -1,3 +1,4 @@
+import { Loading } from '@affine/component';
 import { Divider } from '@affine/component/ui/divider';
 import { MenuItem } from '@affine/component/ui/menu';
 import { useSession } from '@affine/core/hooks/affine/use-current-user';
@@ -8,7 +9,7 @@ import { WorkspaceManager } from '@toeverything/infra';
 import { useService } from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { useSetAtom } from 'jotai';
-import { useCallback, useEffect } from 'react';
+import { Suspense, useCallback, useEffect } from 'react';
 
 import {
   authAtom,
@@ -62,11 +63,21 @@ const SignInItem = () => {
   );
 };
 
-export const UserWithWorkspaceList = ({
+const UserWithWorkspaceListLoading = () => {
-  onEventEnd,
+  return (
-}: {
+    <div className={styles.loadingWrapper}>
+      <Loading size={24} />
+    </div>
+  );
+};
+
+interface UserWithWorkspaceListProps {
   onEventEnd?: () => void;
-}) => {
+}
+
+const UserWithWorkspaceListInner = ({
+  onEventEnd,
+}: UserWithWorkspaceListProps) => {
   const { user, status } = useSession();
 
   const isAuthenticated = status === 'authenticated';
@@ -139,3 +150,11 @@ export const UserWithWorkspaceList = ({
     </div>
   );
 };
+
+export const UserWithWorkspaceList = (props: UserWithWorkspaceListProps) => {
+  return (
+    <Suspense fallback={<UserWithWorkspaceListLoading />}>
+      <UserWithWorkspaceListInner {...props} />
+    </Suspense>
+  );
+};