fix(core): fix ui flashing (#7056)

packages/common/infra/src/modules/workspace/entities/profile.ts

@@ -1,4 +1,5 @@
 import { DebugLogger } from '@affine/debug';
+import { isEqual } from 'lodash-es';
 import { catchError, EMPTY, exhaustMap, mergeMap } from 'rxjs';
 
 import { Entity } from '../../../framework';
@@ -54,7 +55,10 @@ export class WorkspaceProfile extends Entity<{ metadata: WorkspaceMetadata }> {
       providers.find(p => p.flavour === this.props.metadata.flavour) ?? null;
   }
 
-  private setCache(info: WorkspaceProfileInfo) {
+  private setProfile(info: WorkspaceProfileInfo) {
+    if (isEqual(this.profile$.value, info)) {
+      return;
+    }
     this.cache.setProfileCache(this.props.metadata.id, info);
   }
 
@@ -69,7 +73,7 @@ export class WorkspaceProfile extends Entity<{ metadata: WorkspaceMetadata }> {
       ).pipe(
         mergeMap(info => {
           if (info) {
-            this.setCache({ ...this.profile$.value, ...info });
+            this.setProfile({ ...this.profile$.value, ...info });
           }
           return EMPTY;
         }),
@@ -86,11 +90,11 @@ export class WorkspaceProfile extends Entity<{ metadata: WorkspaceMetadata }> {
   syncWithWorkspace(workspace: Workspace) {
     workspace.name$.subscribe(name => {
       const old = this.profile$.value;
-      this.setCache({ ...old, name: name ?? old?.name });
+      this.setProfile({ ...old, name: name ?? old?.name });
     });
     workspace.avatar$.subscribe(avatar => {
       const old = this.profile$.value;
-      this.setCache({ ...old, avatar: avatar ?? old?.avatar });
+      this.setProfile({ ...old, avatar: avatar ?? old?.avatar });
     });
   }
 }

packages/frontend/component/src/components/card/workspace-card/index.tsx

@@ -1,3 +1,4 @@
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons';
@@ -5,7 +6,7 @@ import type { WorkspaceMetadata } from '@toeverything/infra';
 import clsx from 'clsx';
 import { type MouseEvent, useCallback } from 'react';
 
-import { Avatar, type AvatarProps } from '../../../ui/avatar';
+import { type AvatarProps } from '../../../ui/avatar';
 import { Button } from '../../../ui/button';
 import { Skeleton } from '../../../ui/skeleton';
 import * as styles from './styles.css';
@@ -24,7 +25,6 @@ export interface WorkspaceCardProps {
   isOwner?: boolean;
   openingId?: string | null;
   enableCloudText?: string;
-  avatar?: string;
   name?: string;
 }
 
@@ -57,7 +57,6 @@ export const WorkspaceCard = ({
   isOwner = true,
   enableCloudText = 'Enable Cloud',
   name,
-  avatar,
 }: WorkspaceCardProps) => {
   const isLocal = meta.flavour === WorkspaceFlavour.LOCAL;
   const displayName = name ?? UNTITLED_WORKSPACE_NAME;
@@ -78,11 +77,12 @@ export const WorkspaceCard = ({
         onClick(meta);
       }, [onClick, meta])}
     >
-      <Avatar
+      <WorkspaceAvatar
+        key={meta.id}
+        meta={meta}
         imageProps={avatarImageProps}
         fallbackProps={avatarImageProps}
         size={28}
-        url={avatar}
         name={name}
         colorfulFallback
       />

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -33,9 +33,6 @@ export const root = style({
     '&[data-enable-animation="true"]': {
       transition: `margin-left ${animationTimeout} .05s, margin-right ${animationTimeout} .05s, width ${animationTimeout} .05s`,
     },
-    '&[data-is-floating="false"][data-transparent=true]': {
-      backgroundColor: 'transparent',
-    },
     '&[data-transition-state="exited"]': {
       // avoid focus on hidden panel
       visibility: 'hidden',

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -1,7 +1,14 @@
 import { assertExists } from '@blocksuite/global/utils';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTransition } from 'react-transition-state';
 
 import * as styles from './resize-panel.css';
@@ -157,7 +164,7 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
     const [{ status }, toggle] = useTransition({
       timeout: animationTimeout,
     });
-    useEffect(() => {
+    useLayoutEffect(() => {
       toggle(open);
     }, [open]);
     return (

packages/frontend/component/src/components/workspace-avatar/index.tsx

@@ -0,0 +1,80 @@
+import {
+  useLiveData,
+  useService,
+  type WorkspaceMetadata,
+  WorkspacesService,
+} from '@toeverything/infra';
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { Avatar, type AvatarProps } from '../../ui/avatar';
+
+const cache = new Map<string, { imageBitmap: ImageBitmap; key: string }>();
+
+/**
+ * workspace avatar component with automatic cache, and avoid flashing
+ */
+export const WorkspaceAvatar = ({
+  meta,
+  ...otherProps
+}: { meta: WorkspaceMetadata } & AvatarProps) => {
+  const workspacesService = useService(WorkspacesService);
+
+  const profile = workspacesService.getProfile(meta);
+
+  useEffect(() => {
+    profile.revalidate();
+  }, [meta, profile]);
+
+  const avatarKey = useLiveData(profile.profile$.map(v => v?.avatar));
+
+  const [downloadedAvatar, setDownloadedAvatar] = useState<
+    { imageBitmap: ImageBitmap; key: string } | undefined
+  >(cache.get(meta.id));
+
+  useLayoutEffect(() => {
+    if (!avatarKey || !meta) {
+      setDownloadedAvatar(undefined);
+      return;
+    }
+
+    let canceled = false;
+    workspacesService
+      .getWorkspaceBlob(meta, avatarKey)
+      .then(async blob => {
+        if (blob && !canceled) {
+          const image = document.createElement('img');
+          const objectUrl = URL.createObjectURL(blob);
+          image.src = objectUrl;
+          await image.decode();
+          // limit the size of the image data to reduce memory usage
+          const hRatio = 128 / image.naturalWidth;
+          const vRatio = 128 / image.naturalHeight;
+          const ratio = Math.min(hRatio, vRatio);
+          const imageBitmap = await createImageBitmap(image, {
+            resizeWidth: image.naturalWidth * ratio,
+            resizeHeight: image.naturalHeight * ratio,
+          });
+          URL.revokeObjectURL(objectUrl);
+          setDownloadedAvatar(prev => {
+            if (prev?.key === avatarKey) {
+              return prev;
+            }
+            return { imageBitmap, key: avatarKey };
+          });
+          cache.set(meta.id, {
+            imageBitmap,
+            key: avatarKey,
+          });
+        }
+      })
+      .catch(err => {
+        console.error('get workspace blob error: ' + err);
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [meta, workspacesService, avatarKey]);
+
+  return <Avatar image={downloadedAvatar?.imageBitmap} {...otherProps} />;
+};

packages/frontend/component/src/components/workspace-list/index.tsx

@@ -18,9 +18,6 @@ export interface WorkspaceListProps {
   useIsWorkspaceOwner: (
     workspaceMetadata: WorkspaceMetadata
   ) => boolean | undefined;
-  useWorkspaceAvatar: (
-    workspaceMetadata: WorkspaceMetadata
-  ) => string | undefined;
   useWorkspaceName: (
     workspaceMetadata: WorkspaceMetadata
   ) => string | undefined;
@@ -34,7 +31,6 @@ const SortableWorkspaceItem = ({
   item,
   openingId,
   useIsWorkspaceOwner,
-  useWorkspaceAvatar,
   useWorkspaceName,
   currentWorkspaceId,
   onClick,
@@ -42,7 +38,6 @@ const SortableWorkspaceItem = ({
   onEnableCloudClick,
 }: SortableWorkspaceItemProps) => {
   const isOwner = useIsWorkspaceOwner?.(item);
-  const avatar = useWorkspaceAvatar?.(item);
   const name = useWorkspaceName?.(item);
   return (
     <div className={workspaceItemStyle} data-testid="draggable-item">
@@ -55,7 +50,6 @@ const SortableWorkspaceItem = ({
         openingId={openingId}
         isOwner={isOwner}
         name={name}
-        avatar={avatar}
       />
     </div>
   );

packages/frontend/component/src/ui/avatar/avatar.tsx

@@ -17,7 +17,13 @@ import type {
   MouseEvent,
   ReactElement,
 } from 'react';
-import { forwardRef, useMemo, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { IconButton } from '../button';
 import type { TooltipProps } from '../tooltip';
@@ -29,6 +35,7 @@ import { blurVar, sizeVar } from './style.css';
 export type AvatarProps = {
   size?: number;
   url?: string | null;
+  image?: ImageBitmap /* use pre-loaded image data can avoid flashing */;
   name?: string;
   className?: string;
   style?: CSSProperties;
@@ -39,18 +46,56 @@ export type AvatarProps = {
   removeTooltipOptions?: Omit<TooltipProps, 'children'>;
 
   fallbackProps?: AvatarFallbackProps;
-  imageProps?: Omit<AvatarImageProps, 'src'>;
+  imageProps?: Omit<
+    AvatarImageProps & React.HTMLProps<HTMLCanvasElement>,
+    'src' | 'ref'
+  >;
   avatarProps?: RadixAvatarProps;
   hoverWrapperProps?: HTMLAttributes<HTMLDivElement>;
   removeButtonProps?: HTMLAttributes<HTMLButtonElement>;
 } & HTMLAttributes<HTMLSpanElement>;
 
+function drawImageFit(
+  img: ImageBitmap,
+  ctx: CanvasRenderingContext2D,
+  size: number
+) {
+  const hRatio = size / img.width;
+  const vRatio = size / img.height;
+  const ratio = Math.max(hRatio, vRatio);
+  const centerShift_x = (size - img.width * ratio) / 2;
+  const centerShift_y = (size - img.height * ratio) / 2;
+  console.log(ctx.canvas);
+  ctx.canvas.dataset['drawed'] = 'true';
+  console.log(
+    'drawImageFit',
+    img.width,
+    img.height,
+    size,
+    ratio,
+    centerShift_x,
+    centerShift_y
+  );
+  ctx.drawImage(
+    img,
+    0,
+    0,
+    img.width,
+    img.height,
+    centerShift_x,
+    centerShift_y,
+    img.width * ratio,
+    img.height * ratio
+  );
+}
+
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
   (
     {
       size = 20,
       style: propsStyles = {},
       url,
+      image,
       name,
       className,
       colorfulFallback = false,
@@ -76,18 +121,35 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
     const firstCharOfName = useMemo(() => {
       return name?.slice(0, 1) || 'A';
     }, [name]);
-    const [imageDom, setImageDom] = useState<HTMLDivElement | null>(null);
+    const [containerDom, setContainerDom] = useState<HTMLDivElement | null>(
+      null
+    );
     const [removeButtonDom, setRemoveButtonDom] =
       useState<HTMLButtonElement | null>(null);
+    const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
+
+    useLayoutEffect(() => {
+      if (canvas && image) {
+        const ctx = canvas?.getContext('2d');
+        if (ctx) {
+          drawImageFit(image, ctx, size * window.devicePixelRatio);
+        }
+      }
+      return;
+    }, [canvas, image, size]);
+
+    const canvasRef = useCallback((node: HTMLCanvasElement | null) => {
+      setCanvas(node);
+    }, []);
 
     return (
       <AvatarRoot className={style.avatarRoot} {...avatarProps} ref={ref}>
         <Tooltip
-          portalOptions={{ container: imageDom }}
+          portalOptions={{ container: containerDom }}
           {...avatarTooltipOptions}
         >
           <div
-            ref={setImageDom}
+            ref={setContainerDom}
             className={clsx(style.avatarWrapper, className)}
             style={{
               ...assignInlineVars({
@@ -98,24 +160,36 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
             }}
             {...props}
           >
-            <AvatarImage
+            {image /* canvas mode */ ? (
-              className={style.avatarImage}
+              <canvas
-              src={url || ''}
+                className={style.avatarImage}
-              alt={name}
+                ref={canvasRef}
-              {...imageProps}
+                width={size * window.devicePixelRatio}
-            />
+                height={size * window.devicePixelRatio}
+                {...imageProps}
+              />
+            ) : (
+              <AvatarImage
+                className={style.avatarImage}
+                src={url || ''}
+                alt={name}
+                {...imageProps}
+              />
+            )}
 
-            <AvatarFallback
+            {!image /* no fallback on canvas mode */ && (
-              className={clsx(style.avatarFallback, fallbackClassName)}
+              <AvatarFallback
-              delayMs={url ? 600 : undefined}
+                className={clsx(style.avatarFallback, fallbackClassName)}
-              {...fallbackProps}
+                delayMs={url ? 600 : undefined}
-            >
+                {...fallbackProps}
-              {colorfulFallback ? (
+              >
-                <ColorfulFallback char={firstCharOfName} />
+                {colorfulFallback ? (
-              ) : (
+                  <ColorfulFallback char={firstCharOfName} />
-                firstCharOfName.toUpperCase()
+                ) : (
-              )}
+                  firstCharOfName.toUpperCase()
-            </AvatarFallback>
+                )}
+              </AvatarFallback>
+            )}
             {hoverIcon ? (
               <div
                 className={clsx(style.hoverWrapper, hoverWrapperClassName)}

packages/frontend/core/src/components/affine/app-container.tsx

@@ -1,6 +1,12 @@
+import type { ReactElement } from 'react';
+
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
+import { AppSidebarFallback } from '../app-sidebar';
 import type { WorkspaceRootProps } from '../workspace';
-import { AppContainer as AppContainerWithoutSettings } from '../workspace';
+import {
+  AppContainer as AppContainerWithoutSettings,
+  MainContainer,
+} from '../workspace';
 
 export const AppContainer = (props: WorkspaceRootProps) => {
   const { appSettings } = useAppSettingHelper();
@@ -17,3 +23,12 @@ export const AppContainer = (props: WorkspaceRootProps) => {
     />
   );
 };
+
+export const AppFallback = (): ReactElement => {
+  return (
+    <AppContainer>
+      <AppSidebarFallback />
+      <MainContainer />
+    </AppContainer>
+  );
+};

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

@@ -4,7 +4,7 @@ import {
 } from '@affine/component/setting-components';
 import { Avatar } from '@affine/component/ui/avatar';
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { AuthService } from '@affine/core/modules/cloud';
 import { UserFeatureService } from '@affine/core/modules/cloud/services/user-feature';
@@ -277,7 +277,6 @@ const WorkspaceListItem = ({
     UserFeatureService,
   });
   const information = useWorkspaceInfo(meta);
-  const avatarUrl = useWorkspaceBlobObjectUrl(meta, information?.avatar);
   const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
   const currentWorkspace = workspaceService.workspace;
   const isCurrent = currentWorkspace.id === meta.id;
@@ -318,9 +317,10 @@ const WorkspaceListItem = ({
         onClick={onClickPreference}
         data-testid="workspace-list-item"
       >
-        <Avatar
+        <WorkspaceAvatar
+          key={meta.id}
+          meta={meta}
           size={16}
-          url={avatarUrl}
           name={name}
           colorfulFallback
           style={{

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

@@ -1,9 +1,8 @@
 import { FlexWrapper, Input, notify, Wrapper } from '@affine/component';
-import { Avatar } from '@affine/component/ui/avatar';
 import { Button } from '@affine/component/ui/button';
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { Upload } from '@affine/core/components/pure/file-upload';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { validateAndReduceImage } from '@affine/core/utils/reduce-image';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
@@ -28,18 +27,13 @@ export const ProfilePanel = () => {
   }, [permissionService]);
   const workspaceIsReady = useLiveData(workspace?.engine.rootDocState$)?.ready;
 
-  const [avatarBlob, setAvatarBlob] = useState<string | null>(null);
   const [name, setName] = useState('');
 
-  const avatarUrl = useWorkspaceBlobObjectUrl(workspace?.meta, avatarBlob);
-
   useEffect(() => {
     if (workspace?.docCollection) {
-      setAvatarBlob(workspace.docCollection.meta.avatar ?? null);
       setName(workspace.docCollection.meta.name ?? UNTITLED_WORKSPACE_NAME);
       const dispose = workspace.docCollection.meta.commonFieldsUpdated.on(
         () => {
-          setAvatarBlob(workspace.docCollection.meta.avatar ?? null);
           setName(workspace.docCollection.meta.name ?? UNTITLED_WORKSPACE_NAME);
         }
       );
@@ -47,7 +41,6 @@ export const ProfilePanel = () => {
         dispose.dispose();
       };
     } else {
-      setAvatarBlob(null);
       setName(UNTITLED_WORKSPACE_NAME);
     }
     return;
@@ -139,7 +132,7 @@ export const ProfilePanel = () => {
     [setWorkspaceAvatar]
   );
 
-  const canAdjustAvatar = workspaceIsReady && avatarUrl && isOwner;
+  const canAdjustAvatar = workspaceIsReady && isOwner;
 
   return (
     <div className={style.profileWrapper}>
@@ -149,9 +142,9 @@ export const ProfilePanel = () => {
         data-testid="upload-avatar"
         disabled={!isOwner}
       >
-        <Avatar
+        <WorkspaceAvatar
+          meta={workspace.meta}
           size={56}
-          url={avatarUrl}
           name={name}
           imageProps={avatarImageProps}
           fallbackProps={avatarImageProps}

packages/frontend/core/src/components/app-sidebar/index.css.ts

@@ -4,7 +4,6 @@ export const floatingMaxWidth = 768;
 export const navWrapperStyle = style({
   zIndex: 3,
   paddingBottom: '8px',
-  backgroundColor: cssVar('backgroundPrimaryColor'),
   '@media': {
     print: {
       display: 'none',
@@ -15,6 +14,9 @@ export const navWrapperStyle = style({
     '&[data-has-border=true]': {
       borderRight: `1px solid ${cssVar('borderColor')}`,
     },
+    '&[data-is-floating="true"]': {
+      backgroundColor: cssVar('backgroundPrimaryColor'),
+    },
   },
 });
 export const navHeaderButton = style({

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

@@ -10,7 +10,7 @@ import {
   WorkspacesService,
 } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
-import { Suspense, useCallback, useEffect } from 'react';
+import { Suspense, useCallback } from 'react';
 
 import {
   authAtom,
@@ -130,11 +130,6 @@ const UserWithWorkspaceListInner = ({
   const workspaceManager = useService(WorkspacesService);
   const workspaces = useLiveData(workspaceManager.list.workspaces$);
 
-  // revalidate workspace list when mounted
-  useEffect(() => {
-    workspaceManager.list.revalidate();
-  }, [workspaceManager]);
-
   return (
     <div className={styles.workspaceListWrapper}>
       {isAuthenticated ? (

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

@@ -3,7 +3,6 @@ import { Divider } from '@affine/component/ui/divider';
 import { WorkspaceList } from '@affine/component/workspace-list';
 import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
 import {
-  useWorkspaceAvatar,
   useWorkspaceInfo,
   useWorkspaceName,
 } from '@affine/core/hooks/use-workspace-info';
@@ -76,7 +75,6 @@ const CloudWorkSpaceList = ({
         onSettingClick={onClickWorkspaceSetting}
         useIsWorkspaceOwner={useIsWorkspaceOwner}
         useWorkspaceName={useWorkspaceName}
-        useWorkspaceAvatar={useWorkspaceAvatar}
       />
     </div>
   );
@@ -115,7 +113,6 @@ const LocalWorkspaces = ({
         onEnableCloudClick={onClickEnableCloud}
         useIsWorkspaceOwner={useIsWorkspaceOwner}
         useWorkspaceName={useWorkspaceName}
-        useWorkspaceAvatar={useWorkspaceAvatar}
       />
     </div>
   );
@@ -186,8 +183,18 @@ export const AFFiNEWorkspaceList = ({
 
   const onClickWorkspace = useCallback(
     (workspaceMetadata: WorkspaceMetadata) => {
-      jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL);
+      if (document.startViewTransition) {
-      onEventEnd?.();
+        document.startViewTransition(() => {
+          jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL);
+          onEventEnd?.();
+          return new Promise(resolve =>
+            setTimeout(resolve, 150)
+          ); /* start transition after 150ms */
+        });
+      } else {
+        jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL);
+        onEventEnd?.();
+      }
     },
     [jumpToSubPath, onEventEnd]
   );

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx

@@ -1,9 +1,9 @@
 import { notify, Tooltip } from '@affine/component';
-import { Avatar, type AvatarProps } from '@affine/component/ui/avatar';
+import { type AvatarProps } from '@affine/component/ui/avatar';
 import { Loading } from '@affine/component/ui/loading';
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useDocEngineStatus } from '@affine/core/hooks/affine/use-doc-engine-status';
-import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
@@ -284,11 +284,6 @@ export const WorkspaceCard = forwardRef<
 
   const information = useWorkspaceInfo(currentWorkspace.meta);
 
-  const avatarUrl = useWorkspaceBlobObjectUrl(
-    currentWorkspace.meta,
-    information?.avatar
-  );
-
   const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
 
   return (
@@ -301,12 +296,13 @@ export const WorkspaceCard = forwardRef<
       ref={ref}
       {...props}
     >
-      <Avatar
+      <WorkspaceAvatar
+        key={currentWorkspace.id}
+        meta={currentWorkspace.meta}
         imageProps={avatarImageProps}
         fallbackProps={avatarImageProps}
         data-testid="workspace-avatar"
         size={32}
-        url={avatarUrl}
         name={name}
         colorfulFallback
       />

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -13,7 +13,7 @@ import { useLiveData, useService } from '@toeverything/infra';
 import { useAtomValue } from 'jotai';
 import { nanoid } from 'nanoid';
 import type { HTMLAttributes, ReactElement } from 'react';
-import { forwardRef, useCallback, useEffect } from 'react';
+import { forwardRef, memo, useCallback, useEffect } from 'react';
 
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
 import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
@@ -89,174 +89,177 @@ RouteMenuLinkItem.displayName = 'RouteMenuLinkItem';
  *
  * @todo(himself65): rewrite all styled component into @vanilla-extract/css
  */
-export const RootAppSidebar = ({
+export const RootAppSidebar = memo(
-  currentWorkspace,
+  ({
-  openPage,
+    currentWorkspace,
-  createPage,
+    openPage,
-  paths,
+    createPage,
-  onOpenQuickSearchModal,
+    paths,
-  onOpenSettingModal,
+    onOpenQuickSearchModal,
-}: RootAppSidebarProps): ReactElement => {
+    onOpenSettingModal,
-  const currentWorkspaceId = currentWorkspace.id;
+  }: RootAppSidebarProps): ReactElement => {
-  const { appSettings } = useAppSettingHelper();
+    const currentWorkspaceId = currentWorkspace.id;
-  const docCollection = currentWorkspace.docCollection;
+    const { appSettings } = useAppSettingHelper();
-  const t = useAFFiNEI18N();
+    const docCollection = currentWorkspace.docCollection;
-  const currentPath = useLiveData(
+    const t = useAFFiNEI18N();
-    useService(WorkbenchService).workbench.location$.map(
+    const currentPath = useLiveData(
-      location => location.pathname
+      useService(WorkbenchService).workbench.location$.map(
-    )
+        location => location.pathname
-  );
+      )
+    );
 
-  const allPageActive = currentPath === '/all';
+    const allPageActive = currentPath === '/all';
 
-  const trashActive = currentPath === '/trash';
+    const trashActive = currentPath === '/trash';
 
-  const onClickNewPage = useAsyncCallback(async () => {
+    const onClickNewPage = useAsyncCallback(async () => {
-    const page = createPage();
+      const page = createPage();
-    page.load();
+      page.load();
-    openPage(page.id);
+      openPage(page.id);
-    mixpanel.track('DocCreated', {
+      mixpanel.track('DocCreated', {
-      page: allPageActive ? 'all' : trashActive ? 'trash' : 'other',
+        page: allPageActive ? 'all' : trashActive ? 'trash' : 'other',
-      segment: 'navigation panel',
+        segment: 'navigation panel',
-      module: 'bottom button',
+        module: 'bottom button',
-      control: 'new doc button',
+        control: 'new doc button',
-      category: 'page',
+        category: 'page',
-      type: 'doc',
+        type: 'doc',
+      });
+    }, [allPageActive, createPage, openPage, trashActive]);
+
+    const { trashModal, setTrashModal, handleOnConfirm } =
+      useTrashModalHelper(docCollection);
+    const deletePageTitles = trashModal.pageTitles;
+    const trashConfirmOpen = trashModal.open;
+    const onTrashConfirmOpenChange = useCallback(
+      (open: boolean) => {
+        setTrashModal({
+          ...trashModal,
+          open,
+        });
+      },
+      [trashModal, setTrashModal]
+    );
+
+    const navigateHelper = useNavigateHelper();
+    // Listen to the "New Page" action from the menu
+    useEffect(() => {
+      if (environment.isDesktop) {
+        return events?.applicationMenu.onNewPageAction(onClickNewPage);
+      }
+      return;
+    }, [onClickNewPage]);
+
+    const sidebarOpen = useAtomValue(appSidebarOpenAtom);
+    useEffect(() => {
+      if (environment.isDesktop) {
+        apis?.ui.handleSidebarVisibilityChange(sidebarOpen).catch(err => {
+          console.error(err);
+        });
+      }
+    }, [sidebarOpen]);
+
+    const dropItemId = getDNDId('sidebar-trash', 'container', 'trash');
+    const trashDroppable = useDroppable({
+      id: dropItemId,
     });
-  }, [allPageActive, createPage, openPage, trashActive]);
 
-  const { trashModal, setTrashModal, handleOnConfirm } =
+    const collection = useService(CollectionService);
-    useTrashModalHelper(docCollection);
+    const { node, open } = useEditCollectionName({
-  const deletePageTitles = trashModal.pageTitles;
+      title: t['com.affine.editCollection.createCollection'](),
-  const trashConfirmOpen = trashModal.open;
+      showTips: true,
-  const onTrashConfirmOpenChange = useCallback(
+    });
-    (open: boolean) => {
+    const handleCreateCollection = useCallback(() => {
-      setTrashModal({
+      open('')
-        ...trashModal,
+        .then(name => {
-        open,
+          const id = nanoid();
-      });
+          collection.addCollection(createEmptyCollection(id, { name }));
-    },
+          navigateHelper.jumpToCollection(docCollection.id, id);
-    [trashModal, setTrashModal]
+        })
-  );
+        .catch(err => {
+          console.error(err);
+        });
+    }, [docCollection.id, collection, navigateHelper, open]);
 
-  const navigateHelper = useNavigateHelper();
+    return (
-  // Listen to the "New Page" action from the menu
+      <AppSidebar
-  useEffect(() => {
+        clientBorder={appSettings.clientBorder}
-    if (environment.isDesktop) {
+        translucentUI={appSettings.enableBlurBackground}
-      return events?.applicationMenu.onNewPageAction(onClickNewPage);
+      >
-    }
+        <MoveToTrash.ConfirmModal
-    return;
+          open={trashConfirmOpen}
-  }, [onClickNewPage]);
+          onConfirm={handleOnConfirm}
-
+          onOpenChange={onTrashConfirmOpenChange}
-  const sidebarOpen = useAtomValue(appSidebarOpenAtom);
+          titles={deletePageTitles}
-  useEffect(() => {
+        />
-    if (environment.isDesktop) {
+        <SidebarContainer>
-      apis?.ui.handleSidebarVisibilityChange(sidebarOpen).catch(err => {
+          <div className={workspaceAndUserWrapper}>
-        console.error(err);
+            <div className={workspaceWrapper}>
-      });
+              <WorkspaceSelector />
-    }
+            </div>
-  }, [sidebarOpen]);
+            <UserInfo />
-
-  const dropItemId = getDNDId('sidebar-trash', 'container', 'trash');
-  const trashDroppable = useDroppable({
-    id: dropItemId,
-  });
-
-  const collection = useService(CollectionService);
-  const { node, open } = useEditCollectionName({
-    title: t['com.affine.editCollection.createCollection'](),
-    showTips: true,
-  });
-  const handleCreateCollection = useCallback(() => {
-    open('')
-      .then(name => {
-        const id = nanoid();
-        collection.addCollection(createEmptyCollection(id, { name }));
-        navigateHelper.jumpToCollection(docCollection.id, id);
-      })
-      .catch(err => {
-        console.error(err);
-      });
-  }, [docCollection.id, collection, navigateHelper, open]);
-
-  return (
-    <AppSidebar
-      clientBorder={appSettings.clientBorder}
-      translucentUI={appSettings.enableBlurBackground}
-    >
-      <MoveToTrash.ConfirmModal
-        open={trashConfirmOpen}
-        onConfirm={handleOnConfirm}
-        onOpenChange={onTrashConfirmOpenChange}
-        titles={deletePageTitles}
-      />
-      <SidebarContainer>
-        <div className={workspaceAndUserWrapper}>
-          <div className={workspaceWrapper}>
-            <WorkspaceSelector />
           </div>
-          <UserInfo />
+          <QuickSearchInput
-        </div>
+            data-testid="slider-bar-quick-search-button"
-        <QuickSearchInput
+            onClick={onOpenQuickSearchModal}
-          data-testid="slider-bar-quick-search-button"
+          />
-          onClick={onOpenQuickSearchModal}
-        />
-        <RouteMenuLinkItem
-          icon={<FolderIcon />}
-          active={allPageActive}
-          path={paths.all(currentWorkspaceId)}
-        >
-          <span data-testid="all-pages">
-            {t['com.affine.workspaceSubPath.all']()}
-          </span>
-        </RouteMenuLinkItem>
-        <AppSidebarJournalButton
-          docCollection={currentWorkspace.docCollection}
-        />
-        {runtimeConfig.enableNewSettingModal ? (
-          <MenuItem
-            data-testid="slider-bar-workspace-setting-button"
-            icon={<SettingsIcon />}
-            onClick={onOpenSettingModal}
-          >
-            <span data-testid="settings-modal-trigger">
-              {t['com.affine.settingSidebar.title']()}
-            </span>
-          </MenuItem>
-        ) : null}
-      </SidebarContainer>
-
-      <SidebarScrollableContainer>
-        <FavoriteList docCollection={docCollection} />
-        <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
-          <AddCollectionButton node={node} onClick={handleCreateCollection} />
-        </CategoryDivider>
-        <CollectionsList
-          docCollection={docCollection}
-          onCreate={handleCreateCollection}
-        />
-        <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
-        {/* fixme: remove the following spacer */}
-        <div style={{ height: '4px' }} />
-        <div style={{ padding: '0 8px' }}>
           <RouteMenuLinkItem
-            ref={trashDroppable.setNodeRef}
+            icon={<FolderIcon />}
-            icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
+            active={allPageActive}
-            active={trashActive || trashDroppable.isOver}
+            path={paths.all(currentWorkspaceId)}
-            path={paths.trash(currentWorkspaceId)}
           >
-            <span data-testid="trash-page">
+            <span data-testid="all-pages">
-              {t['com.affine.workspaceSubPath.trash']()}
+              {t['com.affine.workspaceSubPath.all']()}
             </span>
           </RouteMenuLinkItem>
-          <ImportPage docCollection={docCollection} />
+          <AppSidebarJournalButton
-        </div>
+            docCollection={currentWorkspace.docCollection}
-      </SidebarScrollableContainer>
+          />
-      <SidebarContainer>
+          {runtimeConfig.enableNewSettingModal ? (
-        {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
+            <MenuItem
-        <div style={{ height: '4px' }} />
+              data-testid="slider-bar-workspace-setting-button"
-        <AddPageButton onClick={onClickNewPage} />
+              icon={<SettingsIcon />}
-      </SidebarContainer>
+              onClick={onOpenSettingModal}
-    </AppSidebar>
+            >
-  );
+              <span data-testid="settings-modal-trigger">
-};
+                {t['com.affine.settingSidebar.title']()}
+              </span>
+            </MenuItem>
+          ) : null}
+        </SidebarContainer>
+        <SidebarScrollableContainer>
+          <FavoriteList docCollection={docCollection} />
+          <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
+            <AddCollectionButton node={node} onClick={handleCreateCollection} />
+          </CategoryDivider>
+          <CollectionsList
+            docCollection={docCollection}
+            onCreate={handleCreateCollection}
+          />
+          <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
+          {/* fixme: remove the following spacer */}
+          <div style={{ height: '4px' }} />
+          <div style={{ padding: '0 8px' }}>
+            <RouteMenuLinkItem
+              ref={trashDroppable.setNodeRef}
+              icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
+              active={trashActive || trashDroppable.isOver}
+              path={paths.trash(currentWorkspaceId)}
+            >
+              <span data-testid="trash-page">
+                {t['com.affine.workspaceSubPath.trash']()}
+              </span>
+            </RouteMenuLinkItem>
+            <ImportPage docCollection={docCollection} />
+          </div>
+        </SidebarScrollableContainer>
+        <SidebarContainer>
+          {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
+          <div style={{ height: '4px' }} />
+          <AddPageButton onClick={onClickNewPage} />
+        </SidebarContainer>
+      </AppSidebar>
+    );
+  }
+);
+
+RootAppSidebar.displayName = 'memo(RootAppSidebar)';

packages/frontend/core/src/components/workspace-selector/index.tsx

@@ -1,6 +1,7 @@
 import { Menu } from '@affine/component';
+import { useService, WorkspacesService } from '@toeverything/infra';
 import { useAtom } from 'jotai';
-import { Suspense, useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { openWorkspaceListModalAtom } from '../../atoms';
 import { mixpanel } from '../../utils';
@@ -21,16 +22,21 @@ export const WorkspaceSelector = () => {
     setOpenUserWorkspaceList(true);
   }, [setOpenUserWorkspaceList]);
 
+  const workspaceManager = useService(WorkspacesService);
+
+  // revalidate workspace list when open workspace list
+  useEffect(() => {
+    if (isUserWorkspaceListOpened) {
+      workspaceManager.list.revalidate();
+    }
+  }, [workspaceManager, isUserWorkspaceListOpened]);
+
   return (
     <Menu
       rootOptions={{
         open: isUserWorkspaceListOpened,
       }}
-      items={
+      items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
-        <Suspense>
-          <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
-        </Suspense>
-      }
       contentOptions={{
         // hide trigger
         sideOffset: -58,

packages/frontend/core/src/components/workspace/index.tsx

@@ -9,7 +9,7 @@ import { useAtomValue } from 'jotai';
 import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
 import { forwardRef } from 'react';
 
-import { AppSidebarFallback, appSidebarOpenAtom } from '../app-sidebar';
+import { appSidebarOpenAtom } from '../app-sidebar';
 import { appStyle, mainContainerStyle, toolStyle } from './index.css';
 
 export type WorkspaceRootProps = PropsWithChildren<{
@@ -87,12 +87,3 @@ export const ToolContainer = (props: PropsWithChildren): ReactElement => {
     </div>
   );
 };
-
-export const WorkspaceFallback = (): ReactElement => {
-  return (
-    <AppContainer>
-      <AppSidebarFallback />
-      <MainContainer />
-    </AppContainer>
-  );
-};

packages/frontend/core/src/hooks/use-workspace-blob.ts

@@ -1,39 +0,0 @@
-import type { WorkspaceMetadata } from '@toeverything/infra';
-import { useService, WorkspacesService } from '@toeverything/infra';
-import { useEffect, useState } from 'react';
-
-export function useWorkspaceBlobObjectUrl(
-  meta?: WorkspaceMetadata,
-  blobKey?: string | null
-) {
-  const workspacesService = useService(WorkspacesService);
-
-  const [blob, setBlob] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    setBlob(undefined);
-    if (!blobKey || !meta) {
-      return;
-    }
-    let canceled = false;
-    let objectUrl: string = '';
-    workspacesService
-      .getWorkspaceBlob(meta, blobKey)
-      .then(blob => {
-        if (blob && !canceled) {
-          objectUrl = URL.createObjectURL(blob);
-          setBlob(objectUrl);
-        }
-      })
-      .catch(err => {
-        console.error('get workspace blob error: ' + err);
-      });
-
-    return () => {
-      canceled = true;
-      URL.revokeObjectURL(objectUrl);
-    };
-  }, [meta, blobKey, workspacesService]);
-
-  return blob;
-}

packages/frontend/core/src/hooks/use-workspace-info.ts

@@ -4,24 +4,16 @@ import {
   useService,
   WorkspacesService,
 } from '@toeverything/infra';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
-
-import { useWorkspaceBlobObjectUrl } from './use-workspace-blob';
 
 export function useWorkspaceInfo(meta: WorkspaceMetadata) {
   const workspacesService = useService(WorkspacesService);
 
-  const [profile, setProfile] = useState(() =>
+  const profile = workspacesService.getProfile(meta);
-    workspacesService.getProfile(meta)
-  );
 
   useEffect(() => {
-    const profile = workspacesService.getProfile(meta);
-
     profile.revalidate();
-
+  }, [meta, profile]);
-    setProfile(profile);
-  }, [meta, workspacesService]);
 
   return useLiveData(profile.profile$);
 }
@@ -31,10 +23,3 @@ export function useWorkspaceName(meta: WorkspaceMetadata) {
 
   return information?.name;
 }
-
-export function useWorkspaceAvatar(meta: WorkspaceMetadata) {
-  const information = useWorkspaceInfo(meta);
-  const avatar = useWorkspaceBlobObjectUrl(meta, information?.avatar);
-
-  return avatar;
-}

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -16,7 +16,7 @@ import {
 } from '@toeverything/infra';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { PropsWithChildren, ReactNode } from 'react';
-import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
+import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Map as YMap } from 'yjs';
 
@@ -24,14 +24,11 @@ import { openQuickSearchModalAtom, openSettingModalAtom } from '../atoms';
 import { WorkspaceAIOnboarding } from '../components/affine/ai-onboarding';
 import { AppContainer } from '../components/affine/app-container';
 import { SyncAwareness } from '../components/affine/awareness';
-import {
+import { appSidebarResizingAtom } from '../components/app-sidebar';
-  AppSidebarFallback,
-  appSidebarResizingAtom,
-} from '../components/app-sidebar';
 import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
 import type { DraggableTitleCellData } from '../components/page-list';
 import { RootAppSidebar } from '../components/root-app-sidebar';
-import { MainContainer, WorkspaceFallback } from '../components/workspace';
+import { MainContainer } from '../components/workspace';
 import { WorkspaceUpgrade } from '../components/workspace-upgrade';
 import { useAppSettingHelper } from '../hooks/affine/use-app-setting-helper';
 import {
@@ -93,15 +90,11 @@ export const WorkspaceLayout = function WorkspaceLayout({
   return (
     <SWRConfigProvider>
       {/* load all workspaces is costly, do not block the whole UI */}
-      <Suspense>
+      <AllWorkspaceModals />
-        <AllWorkspaceModals />
+      <CurrentWorkspaceModals />
-        <CurrentWorkspaceModals />
+      <WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
-      </Suspense>
+      {/* should show after workspace loaded */}
-      <Suspense fallback={<WorkspaceFallback />}>
+      <WorkspaceAIOnboarding />
-        <WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
-        {/* should show after workspace loaded */}
-        <WorkspaceAIOnboarding />
-      </Suspense>
     </SWRConfigProvider>
   );
 };
@@ -177,11 +170,18 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
   const resizing = useAtomValue(appSidebarResizingAtom);
 
   const sensors = useSensors(
-    useSensor(MouseSensor, {
+    useSensor(
-      activationConstraint: {
+      MouseSensor,
-        distance: 10,
+      useMemo(
-      },
+        /* useMemo is necessary to avoid re-render */
-    })
+        () => ({
+          activationConstraint: {
+            distance: 10,
+          },
+        }),
+        []
+      )
+    )
   );
 
   const { handleDragEnd } = useGlobalDNDHelper();
@@ -192,27 +192,23 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
       {/* This DndContext is used for drag page from all-pages list into a folder in sidebar */}
       <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
         <AppContainer data-current-path={currentPath} resizing={resizing}>
-          <Suspense fallback={<AppSidebarFallback />}>
+          <RootAppSidebar
-            <RootAppSidebar
+            isPublicWorkspace={false}
-              isPublicWorkspace={false}
+            onOpenQuickSearchModal={handleOpenQuickSearchModal}
-              onOpenQuickSearchModal={handleOpenQuickSearchModal}
+            onOpenSettingModal={handleOpenSettingModal}
-              onOpenSettingModal={handleOpenSettingModal}
+            currentWorkspace={currentWorkspace}
-              currentWorkspace={currentWorkspace}
+            openPage={useCallback(
-              openPage={useCallback(
+              (pageId: string) => {
-                (pageId: string) => {
+                assertExists(currentWorkspace);
-                  assertExists(currentWorkspace);
+                return openPage(currentWorkspace.id, pageId);
-                  return openPage(currentWorkspace.id, pageId);
+              },
-                },
+              [currentWorkspace, openPage]
-                [currentWorkspace, openPage]
+            )}
-              )}
+            createPage={handleCreatePage}
-              createPage={handleCreatePage}
+            paths={pathGenerator}
-              paths={pathGenerator}
+          />
-            />
-          </Suspense>
           <MainContainer clientBorder={appSettings.clientBorder}>
-            <Suspense>
+            {needUpgrade || upgrading ? <WorkspaceUpgrade /> : children}
-              {needUpgrade || upgrading ? <WorkspaceUpgrade /> : children}
-            </Suspense>
           </MainContainer>
         </AppContainer>
         <GlobalDragOverlay />

packages/frontend/core/src/modules/workbench/view/split-view/panel.tsx

@@ -16,7 +16,14 @@ import type {
   PropsWithChildren,
   RefObject,
 } from 'react';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  memo,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import type { View } from '../../entities/view';
 import { WorkbenchService } from '../../services/workbench';
@@ -57,7 +64,7 @@ export const SplitViewPanel = memo(function SplitViewPanel({
   const isDragging = dndIsDragging || indicatorPressed;
   const isActive = activeView === view;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref.current) {
       setSlots?.(slots => ({ ...slots, [view.id]: ref }));
     }

packages/frontend/core/src/modules/workbench/view/split-view/split-view.tsx

@@ -15,7 +15,7 @@ import {
 import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import type { HTMLAttributes, RefObject } from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import type { View } from '../../entities/view';
@@ -52,11 +52,18 @@ export const SplitView = ({
   const workbench = useService(WorkbenchService).workbench;
 
   const sensors = useSensors(
-    useSensor(PointerSensor, {
+    useSensor(
-      activationConstraint: {
+      PointerSensor,
-        distance: 0,
+      useMemo(
-      },
+        /* avoid re-rendering */
-    })
+        () => ({
+          activationConstraint: {
+            distance: 0,
+          },
+        }),
+        []
+      )
+    )
   );
 
   const onResizing = useCallback(

packages/frontend/core/src/modules/workbench/view/view-root.tsx

@@ -1,5 +1,5 @@
 import { FrameworkScope, useLiveData } from '@toeverything/infra';
-import { lazy as reactLazy, useEffect, useMemo } from 'react';
+import { lazy as reactLazy, useLayoutEffect, useMemo } from 'react';
 import {
   createMemoryRouter,
   RouterProvider,
@@ -34,7 +34,7 @@ export const ViewRoot = ({ view }: { view: View }) => {
 
   const location = useLiveData(view.location$);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     viewRouter.navigate(location).catch(err => {
       console.error('navigate error', err);
     });

packages/frontend/core/src/modules/workbench/view/workbench-root.tsx

@@ -1,5 +1,5 @@
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import type { View } from '../entities/view';
@@ -14,7 +14,7 @@ const useAdapter = environment.isDesktop
   ? useBindWorkbenchToDesktopRouter
   : useBindWorkbenchToBrowserRouter;
 
-export const WorkbenchRoot = () => {
+export const WorkbenchRoot = memo(() => {
   const workbench = useService(WorkbenchService).workbench;
 
   // for debugging
@@ -50,7 +50,9 @@ export const WorkbenchRoot = () => {
       onMove={onMove}
     />
   );
-};
+});
+
+WorkbenchRoot.displayName = 'memo(WorkbenchRoot)';
 
 const WorkbenchView = ({ view, index }: { view: View; index: number }) => {
   const workbench = useService(WorkbenchService).workbench;

packages/frontend/core/src/modules/workspace-engine/impls/cloud.ts

@@ -24,6 +24,7 @@ import {
   type WorkspaceProfileInfo,
 } from '@toeverything/infra';
 import { effect, globalBlockSuiteSchema, Service } from '@toeverything/infra';
+import { isEqual } from 'lodash-es';
 import { nanoid } from 'nanoid';
 import { EMPTY, map, mergeMap } from 'rxjs';
 import { applyUpdate, encodeStateAsUpdate } from 'yjs';
@@ -148,11 +149,16 @@ export class CloudWorkspaceFlavourProviderService
           mergeMap(data => {
             if (data) {
               const { accountId, workspaces } = data;
+              const sorted = workspaces.sort((a, b) => {
+                return a.id.localeCompare(b.id);
+              });
               this.globalState.set(
                 CLOUD_WORKSPACES_CACHE_KEY + accountId,
-                workspaces
+                sorted
               );
-              this.workspaces$.next(workspaces);
+              if (!isEqual(this.workspaces$.value, sorted)) {
+                this.workspaces$.next(sorted);
+              }
             } else {
               this.workspaces$.next([]);
             }

packages/frontend/core/src/modules/workspace-engine/impls/engine/blob-cloud.ts

@@ -22,13 +22,15 @@ export class CloudBlobStorage implements BlobStorage {
       ? key
       : `/api/workspaces/${this.workspaceId}/blobs/${key}`;
 
-    return fetch(getBaseUrl() + suffix).then(async res => {
+    return fetch(getBaseUrl() + suffix, { cache: 'default' }).then(
-      if (!res.ok) {
+      async res => {
-        // status not in the range 200-299
+        if (!res.ok) {
-        return null;
+          // status not in the range 200-299
+          return null;
+        }
+        return bufferToBlob(await res.arrayBuffer());
       }
-      return bufferToBlob(await res.arrayBuffer());
+    );
-    });
   }
 
   async set(key: string, value: Blob) {

packages/frontend/core/src/modules/workspace-engine/impls/local.ts

@@ -9,6 +9,7 @@ import type {
   WorkspaceProfileInfo,
 } from '@toeverything/infra';
 import { globalBlockSuiteSchema, LiveData, Service } from '@toeverything/infra';
+import { isEqual } from 'lodash-es';
 import { nanoid } from 'nanoid';
 import { Observable } from 'rxjs';
 import { applyUpdate, encodeStateAsUpdate } from 'yjs';
@@ -96,12 +97,14 @@ export class LocalWorkspaceFlavourProvider
   }
   workspaces$ = LiveData.from(
     new Observable<WorkspaceMetadata[]>(subscriber => {
+      let last: WorkspaceMetadata[] | null = null;
       const emit = () => {
-        subscriber.next(
+        const value = JSON.parse(
-          JSON.parse(
+          localStorage.getItem(LOCAL_WORKSPACE_LOCAL_STORAGE_KEY) ?? '[]'
-            localStorage.getItem(LOCAL_WORKSPACE_LOCAL_STORAGE_KEY) ?? '[]'
+        ).map((id: string) => ({ id, flavour: WorkspaceFlavour.LOCAL }));
-          ).map((id: string) => ({ id, flavour: WorkspaceFlavour.LOCAL }))
+        if (isEqual(last, value)) return;
-        );
+        subscriber.next(value);
+        last = value;
       };
 
       emit();

packages/frontend/core/src/pages/index.tsx

@@ -19,8 +19,8 @@ import {
   buildShowcaseWorkspace,
   createFirstAppData,
 } from '../bootstrap/first-app-data';
+import { AppFallback } from '../components/affine/app-container';
 import { UserWithWorkspaceList } from '../components/pure/workspace-slider-bar/user-with-workspace-list';
-import { WorkspaceFallback } from '../components/workspace';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
 import { AuthService } from '../modules/cloud';
 import { WorkspaceSubPath } from '../shared';
@@ -141,7 +141,7 @@ export const Component = () => {
   }, [jumpToPage, openPage, workspacesService]);
 
   if (navigating || creating) {
-    return <WorkspaceFallback></WorkspaceFallback>;
+    return <AppFallback></AppFallback>;
   }
 
   // TODO: We need a no workspace page

packages/frontend/core/src/pages/workspace/index.tsx

@@ -1,3 +1,4 @@
+import { AppFallback } from '@affine/core/components/affine/app-container';
 import { useWorkspace } from '@affine/core/hooks/use-workspace';
 import { ZipTransformer } from '@blocksuite/blocks';
 import type { Workspace } from '@toeverything/infra';
@@ -9,11 +10,10 @@ import {
   WorkspacesService,
 } from '@toeverything/infra';
 import type { ReactElement } from 'react';
-import { Suspense, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { AffineErrorBoundary } from '../../components/affine/affine-error-boundary';
-import { WorkspaceFallback } from '../../components/workspace';
 import { WorkspaceLayout } from '../../layouts/workspace-layout';
 import { RightSidebarContainer } from '../../modules/right-sidebar';
 import { WorkbenchRoot } from '../../modules/workbench';
@@ -121,13 +121,13 @@ export const Component = (): ReactElement => {
     return <PageNotFound noPermission />;
   }
   if (!workspace) {
-    return <WorkspaceFallback key="workspaceLoading" />;
+    return <AppFallback key="workspaceLoading" />;
   }
 
   if (!isRootDocReady) {
     return (
       <FrameworkScope scope={workspace.scope}>
-        <WorkspaceFallback key="workspaceLoading" />
+        <AppFallback key="workspaceLoading" />
         <AllWorkspaceModals />
       </FrameworkScope>
     );
@@ -135,14 +135,12 @@ export const Component = (): ReactElement => {
 
   return (
     <FrameworkScope scope={workspace.scope}>
-      <Suspense fallback={<WorkspaceFallback key="workspaceFallback" />}>
+      <AffineErrorBoundary height="100vh">
-        <AffineErrorBoundary height="100vh">
+        <WorkspaceLayout>
-          <WorkspaceLayout>
+          <WorkbenchRoot />
-            <WorkbenchRoot />
+          <RightSidebarContainer />
-            <RightSidebarContainer />
+        </WorkspaceLayout>
-          </WorkspaceLayout>
+      </AffineErrorBoundary>
-        </AffineErrorBoundary>
-      </Suspense>
     </FrameworkScope>
   );
 };

packages/frontend/electron/renderer/app.tsx

@@ -4,7 +4,7 @@ import '@affine/component/theme/theme.css';
 import { NotificationCenter } from '@affine/component';
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
-import { WorkspaceFallback } from '@affine/core/components/workspace';
+import { AppFallback } from '@affine/core/components/affine/app-container';
 import { configureCommonModules, configureImpls } from '@affine/core/modules';
 import {
   configureBrowserWorkspaceFlavours,
@@ -108,7 +108,7 @@ export function App() {
               <GlobalLoading />
               <NotificationCenter />
               <RouterProvider
-                fallbackElement={<WorkspaceFallback key="RouterFallback" />}
+                fallbackElement={<AppFallback key="RouterFallback" />}
                 router={router}
                 future={future}
               />

packages/frontend/web/src/app.tsx

@@ -4,7 +4,7 @@ import '@affine/component/theme/theme.css';
 import { NotificationCenter } from '@affine/component';
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
-import { WorkspaceFallback } from '@affine/core/components/workspace';
+import { AppFallback } from '@affine/core/components/affine/app-container';
 import { configureCommonModules, configureImpls } from '@affine/core/modules';
 import {
   configureBrowserWorkspaceFlavours,
@@ -97,7 +97,7 @@ export function App() {
               <GlobalLoading />
               <NotificationCenter />
               <RouterProvider
-                fallbackElement={<WorkspaceFallback key="RouterFallback" />}
+                fallbackElement={<AppFallback key="RouterFallback" />}
                 router={router}
                 future={future}
               />

tests/affine-local/e2e/local-first-avatar.spec.ts

@@ -26,19 +26,29 @@ test('should create a page with a local first avatar and remove it', async ({
   await page.getByTestId('current-workspace-label').click();
   await page
     .getByTestId('upload-avatar')
-    .setInputFiles(resolve(rootDir, 'tests', 'fixtures', 'smile.png'));
+    .setInputFiles(resolve(rootDir, 'tests', 'fixtures', 'blue.png'));
   await page.mouse.click(0, 0);
   await page.getByTestId('workspace-name').click();
   await page.getByTestId('workspace-card').nth(0).click();
   await page.waitForTimeout(1000);
   await page.getByTestId('workspace-name').click();
   await page.getByTestId('workspace-card').nth(1).click();
-  const blobUrl = await page
+  const avatarCanvas = await page
     .getByTestId('workspace-avatar')
-    .locator('img')
+    .locator('canvas')
-    .getAttribute('src');
+    .first()
-  // out user uploaded avatar
+    .elementHandle();
-  expect(blobUrl).toContain('blob:');
+  const avatarPixelData = await page.evaluate(
+    ({ avatarCanvas }) => {
+      return Array.from(
+        (avatarCanvas as HTMLCanvasElement)
+          .getContext('2d')!
+          .getImageData(1, 1, 1, 1).data // get pixel data of the avatar
+      );
+    },
+    { avatarCanvas }
+  );
+  expect(avatarPixelData).toEqual([0, 0, 255, 255]); // blue color
 
   // Click remove button to remove workspace avatar
   await page.getByTestId('settings-modal-trigger').click();
@@ -51,7 +61,7 @@ test('should create a page with a local first avatar and remove it', async ({
   await page.getByTestId('workspace-card').nth(1).click();
   const removedAvatarImage = await page
     .getByTestId('workspace-avatar')
-    .locator('img')
+    .locator('canvas')
     .count();
   expect(removedAvatarImage).toBe(0);