From d9504e4eb76ddb8361c5e0d9839dd6c665b230e5 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Tue, 9 Apr 2024 02:52:51 +0000
Subject: [PATCH] fix(core): avoid flicking when click sidebar user avatar
 (#6482)

---
 .../components/root-app-sidebar/user-info.tsx | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx
index 54c53eb45b..ec1b9b7765 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/user-info.tsx
@@ -5,6 +5,7 @@ import {
   Menu,
   MenuIcon,
   MenuItem,
+  Skeleton,
 } from '@affine/component';
 import {
   authAtom,
@@ -25,7 +26,7 @@ import {
 } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useSetAtom } from 'jotai';
-import { useCallback } from 'react';
+import { Suspense, useCallback } from 'react';
 
 import * as styles from './index.css';
 import { UnknownUserIcon } from './unknow-user';
@@ -155,12 +156,27 @@ const CloudUsage = () => {
   );
 };
 
-const OperationMenu = () => {
+const MenuFallback = () => {
   return (
     <>
-      <CloudUsage />
+      <div>
+        <Skeleton height={15} width={50} />
+        <Skeleton height={10} style={{ marginTop: 4 }} />
+      </div>
       <Divider />
-      <AccountMenu />
+      <Skeleton height={30} />
+      <Divider />
+      <Skeleton height={30} />
     </>
   );
 };
+
+const OperationMenu = () => {
+  return (
+    <Suspense fallback={<MenuFallback />}>
+      <CloudUsage />
+      <Divider />
+      <AccountMenu />
+    </Suspense>
+  );
+};