fix(core): workspace storage rows are displayed unexpectedly (#9539)

close AF-2066

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/workspace-quota.tsx

@@ -11,6 +11,15 @@ import * as styles from './style.css';
 
 export const WorkspaceQuotaPanel = () => {
   const t = useI18n();
+  const workspacePermissionService = useService(
+    WorkspacePermissionService
+  ).permission;
+  const isTeam = useLiveData(workspacePermissionService.isTeam$);
+
+  if (!isTeam) {
+    return null;
+  }
+
   return (
     <SettingRow
       name={t['com.affine.workspace.storage']()}
@@ -24,11 +33,9 @@ export const WorkspaceQuotaPanel = () => {
 
 export const StorageProgress = () => {
   const t = useI18n();
-  const workspacePermissionService = useService(
+
-    WorkspacePermissionService
-  ).permission;
   const workspaceQuotaService = useService(WorkspaceQuotaService).quota;
-  const isTeam = useLiveData(workspacePermissionService.isTeam$);
+
   const isLoading = useLiveData(workspaceQuotaService.isRevalidating$);
   const usedFormatted = useLiveData(workspaceQuotaService.usedFormatted$);
   const maxFormatted = useLiveData(workspaceQuotaService.maxFormatted$);
@@ -49,10 +56,6 @@ export const StorageProgress = () => {
     return <Skeleton height={26} />;
   }
 
-  if (!isTeam) {
-    return null;
-  }
-
   return (
     <div className={styles.storageProgressContainer}>
       <div className={styles.storageProgressWrapper}>