fix: avoid avatar flickering (#1319)

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

@@ -1,6 +1,7 @@
 import { useTranslation } from '@affine/i18n';
 import React, {
   MouseEvent,
+  Suspense,
   useCallback,
   useEffect,
   useMemo,
@@ -152,7 +153,10 @@ export const WorkspaceSettingDetail: React.FC<
         />
       </StyledTabButtonWrapper>
       <StyledSettingContent>
-        <Component {...props} key={currentTab} data-tab-ui={currentTab} />
+        {/* todo: add skeleton */}
+        <Suspense fallback="loading panel...">
+          <Component {...props} key={currentTab} data-tab-ui={currentTab} />
+        </Suspense>
       </StyledSettingContent>
     </StyledSettingContainer>
   );

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -1,9 +1,9 @@
 import { Button, FlexWrapper, MuiFade } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { assertExists } from '@blocksuite/store';
 import React, { useState } from 'react';
 
 import { useIsWorkspaceOwner } from '../../../../../hooks/affine/use-is-workspace-owner';
+import { useBlockSuiteWorkspaceBlobUrl } from '../../../../../hooks/use-blocksuite-workspace-blob-url';
 import { useBlockSuiteWorkspaceName } from '../../../../../hooks/use-blocksuite-workspace-name';
 import { RemWorkspaceFlavour } from '../../../../../shared';
 import { Upload } from '../../../../pure/file-upload';
@@ -43,14 +43,9 @@ export const GeneralPanel: React.FC<PanelProps> = ({
     setName(name);
   };
 
-  const fileChange = async (file: File) => {
-    const blob = new Blob([file], { type: file.type });
-    const blobs = await workspace.blockSuiteWorkspace.blobs;
-    assertExists(blobs);
-    const blobId = await blobs.set(blob);
-    workspace.blockSuiteWorkspace.meta.setAvatar(blobId);
-  };
-
+  const [, update] = useBlockSuiteWorkspaceBlobUrl(
+    workspace.blockSuiteWorkspace
+  );
   return (
     <>
       <StyledRow>
@@ -59,7 +54,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
           {isOwner ? (
             <Upload
               accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
-              fileChange={fileChange}
+              fileChange={update}
               data-testid="upload-avatar"
             >
               <>

apps/web/src/components/pure/workspace-avatar/index.tsx

@@ -1,8 +1,7 @@
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
 import React from 'react';
 
-import { useBlockSuiteWorkspaceAvatar } from '../../../hooks/use-blocksuite-workspace-avatar';
-import { useWorkspaceBlobImage } from '../../../hooks/use-workspace-blob';
+import { useBlockSuiteWorkspaceBlobUrl } from '../../../hooks/use-blocksuite-workspace-blob-url';
 import { BlockSuiteWorkspace, RemWorkspace } from '../../../shared';
 import { stringToColour } from '../../../utils';
 
@@ -88,14 +87,14 @@ export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
   style,
   ...props
 }) => {
-  const [avatar] = useBlockSuiteWorkspaceAvatar(workspace);
-  const avatarURL = useWorkspaceBlobImage(avatar ?? null, workspace);
+  const [avatar] = useBlockSuiteWorkspaceBlobUrl(workspace);
+
   return (
     <Avatar
       {...props}
       size={size}
       name={workspace.meta.name ?? UNTITLED_WORKSPACE_NAME}
-      avatar_url={avatarURL ?? ''}
+      avatar_url={avatar ?? ''}
       style={style}
     />
   );