diff --git a/apps/web/src/components/workspace-modal/index.tsx b/apps/web/src/components/workspace-modal/index.tsx
index 424f8c4ada..62723e8f10 100644
--- a/apps/web/src/components/workspace-modal/index.tsx
+++ b/apps/web/src/components/workspace-modal/index.tsx
@@ -86,7 +86,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                 <WorkspaceCard
                   workspaceData={item}
                   onClick={workspaceData => {
-                    router.replace(`/workspace/${workspaceData.id}/all`);
+                    router.push(`/workspace/${workspaceData.id}/all`);
                     onClose();
                   }}
                   key={index}
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
index dec67e6cb8..4165770602 100644
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@@ -23,7 +23,7 @@ import '@affine/i18n';
 import { useTranslation } from '@affine/i18n';
 import React from 'react';
 import { GlobalAppProvider } from '@/store/app';
-import { DataCenterLoader } from '@/store/app/datacenter';
+import { DataCenterPreloader } from '@/store/app/datacenter';
 
 const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {
   ssr: false,
@@ -81,11 +81,11 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
             getLayout(<Component {...pageProps} />)
           ) : (
             <Suspense fallback={<PageLoading />}>
-              {/* we should put this before every component in case of they read a null value */}
-              <DataCenterLoader />
-              <AppDefender>
-                {getLayout(<Component {...pageProps} />)}
-              </AppDefender>
+              <DataCenterPreloader>
+                <AppDefender>
+                  {getLayout(<Component {...pageProps} />)}
+                </AppDefender>
+              </DataCenterPreloader>
             </Suspense>
           )}
         </ProviderComposer>
diff --git a/apps/web/src/store/app/datacenter/index.ts b/apps/web/src/store/app/datacenter/index.tsx
similarity index 96%
rename from apps/web/src/store/app/datacenter/index.ts
rename to apps/web/src/store/app/datacenter/index.tsx
index 5027256a89..3edd6d4bd5 100644
--- a/apps/web/src/store/app/datacenter/index.ts
+++ b/apps/web/src/store/app/datacenter/index.tsx
@@ -7,7 +7,7 @@ import type { DataCenter } from '@affine/datacenter';
 import { PageMeta } from '@/providers/app-state-provider';
 import { getDataCenter, WorkspaceUnit } from '@affine/datacenter';
 import { createDefaultWorkspace } from '@/providers/app-state-provider/utils';
-import { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { DisposableGroup } from '@blocksuite/global/utils';
 
 export type DataCenterState = {
@@ -80,7 +80,7 @@ export const createDataCenterActions: GlobalActionsCreator<
   },
 });
 
-export function DataCenterLoader() {
+export function DataCenterPreloader({ children }: React.PropsWithChildren) {
   const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
   const dataCenterPromise = useGlobalState(
     useCallback(store => store.dataCenterPromise, [])
@@ -135,5 +135,5 @@ export function DataCenterLoader() {
   if (!dataCenter) {
     throw dataCenterPromise;
   }
-  return null;
+  return <>{children}</>;
 }