diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx
index 33d1fffc89..cd5fcf492b 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/PrivateWorkspaceItem.tsx
@@ -8,14 +8,15 @@ import {
 
 export const PrivateWorkspaceItem = () => {
   const { user } = useAppState();
-
+  // @ts-ignore
+  const Username = user.name;
   return !user ? null : (
     <PrivateWorkspaceWrapper>
-      <WorkspaceItemAvatar alt={user.name} src={user.avatar_url}>
-        {user.name.charAt(0)}
+      <WorkspaceItemAvatar alt={Username} src={user.avatar_url}>
+        {Username}
       </WorkspaceItemAvatar>
       <WorkspaceItemContent>
-        <Name title={user.name}>{user.name}</Name>
+        <Name title={Username}>{Username}</Name>
         <Email title={user.email}>{user.email}</Email>
       </WorkspaceItemContent>
     </PrivateWorkspaceWrapper>
diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts
index 050524a8e0..a1eb2a7208 100644
--- a/packages/app/src/providers/app-state-provider/context.ts
+++ b/packages/app/src/providers/app-state-provider/context.ts
@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, MutableRefObject, RefObject, useContext } from 'react';
 import type { Workspace } from '@pathfinder/data-services';
 import { AccessTokenMessage } from '@pathfinder/data-services';
 import type {
@@ -25,10 +25,12 @@ export interface AppStateContext extends AppStateValue {
   setState: (state: AppStateValue) => void;
   createEditor: (page: StorePage) => EditorContainer | null;
   setEditor: (editor: EditorContainer) => void;
-  loadWorkspace?: (
-    workspaceId: string
-  ) => Promise<StoreWorkspace | null> | null;
-  loadPage: (pageId: string) => Promise<StorePage | null> | null;
+  loadWorkspace?: MutableRefObject<
+    ((workspaceId: string) => Promise<StoreWorkspace | null> | null) | undefined
+  >;
+  loadPage?: MutableRefObject<
+    ((pageId: string) => Promise<StorePage | null> | null) | undefined
+  >;
   createPage: (pageId?: string) => Promise<string | null> | null;
   getPageMeta: (pageId: string) => PageMeta | null;
   toggleFavoritePage: (pageId: string) => void;
@@ -51,7 +53,7 @@ export const AppState = createContext<AppStateContext>({
   createEditor: () => null,
   setEditor: () => {},
   loadWorkspace: undefined,
-  loadPage: () => null,
+  loadPage: undefined,
   createPage: () => null,
   getPageMeta: () => null,
   toggleFavoritePage: () => {},
diff --git a/packages/app/src/providers/app-state-provider/hooks.ts b/packages/app/src/providers/app-state-provider/hooks.ts
index a2811228fc..6df6738636 100644
--- a/packages/app/src/providers/app-state-provider/hooks.ts
+++ b/packages/app/src/providers/app-state-provider/hooks.ts
@@ -9,8 +9,8 @@ export const useLoadWorkspace = () => {
   const workspaceId = router.query.workspaceId as string;
 
   useEffect(() => {
-    loadWorkspace?.(workspaceId);
-  }, [loadWorkspace, workspaceId]);
+    loadWorkspace?.current?.(workspaceId);
+  }, [workspaceId, loadWorkspace]);
 
   return currentWorkspaceId === workspaceId ? currentWorkspace : null;
 };
@@ -23,7 +23,7 @@ export const useLoadPage = () => {
   const pageId = router.query.pageId as string;
 
   useEffect(() => {
-    loadPage(pageId);
+    loadPage?.current?.(pageId);
   }, [workspace, pageId, loadPage]);
 
   return currentPage?.pageId === pageId ? currentPage : null;
diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx
index 1d62f753f6..875e150ae3 100644
--- a/packages/app/src/providers/app-state-provider/provider.tsx
+++ b/packages/app/src/providers/app-state-provider/provider.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, useCallback } from 'react';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import type { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 import {
@@ -9,6 +9,11 @@ import {
 import { AppState } from './context';
 import type { AppStateValue, AppStateContext } from './context';
 import { QueryContent } from '@blocksuite/store/dist/workspace/search';
+import type { Page, Workspace } from '@blocksuite/store';
+
+type LoadWorkspaceHandler = (
+  workspaceId: string
+) => Promise<Workspace | null> | null;
 
 const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), {
   ssr: false,
@@ -28,9 +33,9 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
   });
 
   const [loadWorkspaceHandler, _setLoadWorkspaceHandler] =
-    useState<AppStateContext['loadWorkspace']>();
+    useState<LoadWorkspaceHandler>();
   const setLoadWorkspaceHandler = useCallback(
-    (handler: AppStateContext['loadWorkspace']) => {
+    (handler: LoadWorkspaceHandler) => {
       _setLoadWorkspaceHandler(() => handler);
     },
     [_setLoadWorkspaceHandler]
@@ -45,6 +50,27 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     [_setCreateEditorHandler]
   );
 
+  const loadWorkspace =
+    useRef<(workspaceId: string) => Promise<Workspace | null> | null>();
+  loadWorkspace.current = async (workspaceId: string) => {
+    const workspace = (await loadWorkspaceHandler?.(workspaceId)) || null;
+    setState(state => ({
+      ...state,
+      currentWorkspace: workspace,
+      currentWorkspaceId: workspaceId,
+    }));
+    return workspace;
+  };
+  const loadPage = useRef<(pageId: string) => Promise<Page | null> | null>();
+  loadPage.current = async (pageId: string) => {
+    const { currentWorkspace, currentPage } = state;
+    if (pageId === currentPage?.pageId) {
+      return currentPage;
+    }
+    const page = currentWorkspace?.getPage(pageId) || null;
+    setState(state => ({ ...state, currentPage: page }));
+    return page;
+  };
   useEffect(() => {
     const callback = async (user: AccessTokenMessage | null) => {
       const workspacesMeta = user ? await getWorkspaces() : [];
@@ -85,24 +111,8 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
       setEditor: (editor: AppStateValue['editor']) => {
         setState(state => ({ ...state, editor }));
       },
-      loadWorkspace: async (workspaceId: string) => {
-        const workspace = (await loadWorkspaceHandler?.(workspaceId)) || null;
-        setState(state => ({
-          ...state,
-          currentWorkspace: workspace,
-          currentWorkspaceId: workspaceId,
-        }));
-        return workspace;
-      },
-      loadPage: async (pageId: string) => {
-        const { currentWorkspace, currentPage } = state;
-        if (pageId === currentPage?.pageId) {
-          return currentPage;
-        }
-        const page = currentWorkspace?.getPage(pageId) || null;
-        setState(state => ({ ...state, currentPage: page }));
-        return page;
-      },
+      loadWorkspace,
+      loadPage,
       createPage: (pageId: string = Date.now().toString()) =>
         new Promise<string | null>(resolve => {
           const { currentWorkspace } = state;
@@ -156,7 +166,14 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
         return currentWorkspace!.search(query);
       },
     }),
-    [state, setState, loadWorkspaceHandler, createEditorHandler]
+    [
+      state,
+      setState,
+      loadWorkspaceHandler,
+      createEditorHandler,
+      loadPage,
+      loadWorkspace,
+    ]
   );
 
   return (