From f369ca39f7d4e4f24de86b21d6deb05b6447f3c0 Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Wed, 16 Aug 2023 16:42:35 -0500
Subject: [PATCH] fix(core): correct the suspense behavior (#3789)

---
 .../src/components/affine/setting-modal/index.tsx |  7 +++++--
 .../setting-modal/workspace-setting/index.tsx     | 15 ++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/core/src/components/affine/setting-modal/index.tsx b/apps/core/src/components/affine/setting-modal/index.tsx
index c7db8d535b..20236f4096 100644
--- a/apps/core/src/components/affine/setting-modal/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/index.tsx
@@ -1,10 +1,11 @@
 import {
   SettingModal as SettingModalBase,
   type SettingModalProps as SettingModalBaseProps,
+  WorkspaceDetailSkeleton,
 } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ContactWithUsIcon } from '@blocksuite/icons';
-import { useCallback } from 'react';
+import { Suspense, useCallback } from 'react';
 
 import { AccountSetting } from './account-setting';
 import {
@@ -77,7 +78,9 @@ export const SettingModal = ({
         <div className="wrapper">
           <div className="content">
             {activeTab === 'workspace' && workspaceId ? (
-              <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
+              <Suspense fallback={<WorkspaceDetailSkeleton />}>
+                <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
+              </Suspense>
             ) : null}
             {generalSettingList.find(v => v.key === activeTab) ? (
               <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
diff --git a/apps/core/src/components/affine/setting-modal/workspace-setting/index.tsx b/apps/core/src/components/affine/setting-modal/workspace-setting/index.tsx
index bda3c7fc7b..0a9213305a 100644
--- a/apps/core/src/components/affine/setting-modal/workspace-setting/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/workspace-setting/index.tsx
@@ -1,7 +1,6 @@
-import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
 import { usePassiveWorkspaceEffect } from '@toeverything/infra/__internal__/react';
 import { useSetAtom } from 'jotai';
-import { Suspense, useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { getUIAdapter } from '../../../../adapters/workspace';
 import { openSettingModalAtom } from '../../../../atoms';
@@ -33,12 +32,10 @@ export const WorkspaceSetting = ({ workspaceId }: { workspaceId: string }) => {
   const onTransformWorkspace = useOnTransformWorkspace();
 
   return (
-    <Suspense fallback={<WorkspaceDetailSkeleton />}>
-      <NewSettingsDetail
-        onTransformWorkspace={onTransformWorkspace}
-        onDeleteWorkspace={onDeleteWorkspace}
-        currentWorkspaceId={workspaceId}
-      />
-    </Suspense>
+    <NewSettingsDetail
+      onTransformWorkspace={onTransformWorkspace}
+      onDeleteWorkspace={onDeleteWorkspace}
+      currentWorkspaceId={workspaceId}
+    />
   );
 };