From 7fcdb7a153877be62b7dd629d66503e618c011fe Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Mon, 25 Dec 2023 07:09:49 +0000
Subject: [PATCH] fix(core): fix flickering workspace list (#5391)

---
 packages/frontend/core/src/pages/index.tsx | 25 +++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/core/src/pages/index.tsx b/packages/frontend/core/src/pages/index.tsx
index 110903a03f..6e2d118260 100644
--- a/packages/frontend/core/src/pages/index.tsx
+++ b/packages/frontend/core/src/pages/index.tsx
@@ -1,7 +1,8 @@
 import { Menu } from '@affine/component/ui/menu';
+import { WorkspaceFallback } from '@affine/component/workspace';
 import { workspaceListAtom } from '@affine/workspace/atom';
 import { useAtomValue } from 'jotai';
-import { lazy, useEffect } from 'react';
+import { lazy, useEffect, useLayoutEffect, useState } from 'react';
 import { type LoaderFunction, redirect } from 'react-router-dom';
 
 import { createFirstAppData } from '../bootstrap/first-app-data';
@@ -24,10 +25,14 @@ export const loader: LoaderFunction = async () => {
 };
 
 export const Component = () => {
+  // navigating and creating may be slow, to avoid flickering, we show workspace fallback
+  const [navigating, setNavigating] = useState(false);
+  const [creating, setCreating] = useState(false);
+
   const list = useAtomValue(workspaceListAtom);
   const { openPage } = useNavigateHelper();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (list.length === 0) {
       return;
     }
@@ -36,14 +41,24 @@ export const Component = () => {
     const lastId = localStorage.getItem('last_workspace_id');
     const openWorkspace = list.find(w => w.id === lastId) ?? list[0];
     openPage(openWorkspace.id, WorkspaceSubPath.ALL);
+    setNavigating(true);
   }, [list, openPage]);
 
   useEffect(() => {
-    createFirstAppData().catch(err => {
-      console.error('Failed to create first app data', err);
-    });
+    setCreating(true);
+    createFirstAppData()
+      .catch(err => {
+        console.error('Failed to create first app data', err);
+      })
+      .finally(() => {
+        setCreating(false);
+      });
   }, []);
 
+  if (navigating || creating) {
+    return <WorkspaceFallback></WorkspaceFallback>;
+  }
+
   // TODO: We need a no workspace page
   return (
     <>