feat(core): add fallback component to member list (#6672)

<img width="549" alt="image" src="https://github.com/toeverything/AFFiNE/assets/102217452/7246002f-ebfb-4486-abbc-35bbee8fba0e">

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/members.tsx

@@ -208,8 +208,8 @@ export const CloudWorkspaceMembersPanel = () => {
               <MemberLimitModal
                 isFreePlan={!!plan}
                 open={open}
-                plan={workspaceQuota?.humanReadable.name ?? ''}
-                quota={workspaceQuota?.humanReadable.memberLimit ?? ''}
+                plan={workspaceQuota.humanReadable.name ?? ''}
+                quota={workspaceQuota.humanReadable.memberLimit ?? ''}
                 setOpen={setOpen}
                 onConfirm={handleUpgradeConfirm}
               />
@@ -250,6 +250,21 @@ export const CloudWorkspaceMembersPanel = () => {
     </>
   );
 };
+export const MembersPanelFallback = () => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <>
+      <SettingRow
+        name={t['Members']()}
+        desc={t['com.affine.payment.member.description2']()}
+      />
+      <div className={style.membersPanel}>
+        <MemberListFallback memberCount={1} />
+      </div>
+    </>
+  );
+};
 
 const MemberListFallback = ({ memberCount }: { memberCount: number }) => {
   // prevent page jitter
@@ -260,6 +275,7 @@ const MemberListFallback = ({ memberCount }: { memberCount: number }) => {
     }
     return 'auto';
   }, [memberCount]);
+  const t = useAFFiNEI18N();
 
   return (
     <div
@@ -268,7 +284,8 @@ const MemberListFallback = ({ memberCount }: { memberCount: number }) => {
       }}
       className={style.membersFallback}
     >
-      <Loading size={40} />
+      <Loading size={20} />
+      <span>{t['com.affine.settings.member.loading']()}</span>
     </div>
   );
 };
@@ -388,7 +405,7 @@ export const MembersPanel = (): ReactElement | null => {
   }
   return (
     <AffineErrorBoundary>
-      <Suspense>
+      <Suspense fallback={<MembersPanelFallback />}>
         <CloudWorkspaceMembersPanel />
       </Suspense>
     </AffineErrorBoundary>

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

@@ -84,8 +84,11 @@ export const fakeWrapper = style({
 export const membersFallback = style({
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'center',
-  color: cssVar('primaryColor'),
+  alignItems: 'flexStart',
+  color: cssVar('textSecondaryColor'),
+  gap: '4px',
+  padding: '8px',
+  fontSize: cssVar('fontXs'),
 });
 export const membersPanel = style({
   padding: '4px',

packages/frontend/i18n/src/resources/en.json

@@ -1075,6 +1075,7 @@
   "com.affine.settings.email.action.change": "Change Email",
   "com.affine.settings.email.action.verify": "Verify Email",
   "com.affine.settings.member-tooltip": "Enable AFFiNE Cloud to collaborate with others",
+  "com.affine.settings.member.loading": "Loading member list...",
   "com.affine.settings.noise-style": "Noise background on the sidebar",
   "com.affine.settings.noise-style-description": "Use background noise effect on the sidebar.",
   "com.affine.settings.password": "Password",