diff --git a/packages/app/src/components/workspace-layout/index.tsx b/packages/app/src/components/workspace-layout/index.tsx
index 3da85a5ad4..b77d86fada 100644
--- a/packages/app/src/components/workspace-layout/index.tsx
+++ b/packages/app/src/components/workspace-layout/index.tsx
@@ -4,10 +4,11 @@ import { useRouter } from 'next/router';
 import { StyledPage, StyledWrapper } from './styles';
 import { PropsWithChildren } from 'react';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { PageLoading } from '@/components/loading';
 
 export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
   const { workspaceLoaded } = useEnsureWorkspace();
-  return <>{workspaceLoaded ? children : null}</>;
+  return <>{workspaceLoaded ? children : <PageLoading />}</>;
 };
 
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
diff --git a/packages/app/src/pages/workspace/[workspaceId]/index.tsx b/packages/app/src/pages/workspace/[workspaceId]/index.tsx
index c7b158b2f9..b3bf95f8c5 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/index.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/index.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider/context';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { PageLoading } from '@/components/loading';
 
 const WorkspaceIndex = () => {
   const router = useRouter();
@@ -31,7 +32,7 @@ const WorkspaceIndex = () => {
     workspaceLoaded,
   ]);
 
-  return <></>;
+  return <PageLoading />;
 };
 
 export default WorkspaceIndex;
diff --git a/packages/app/src/pages/workspace/index.tsx b/packages/app/src/pages/workspace/index.tsx
index d81e348517..1fe3ba2c17 100644
--- a/packages/app/src/pages/workspace/index.tsx
+++ b/packages/app/src/pages/workspace/index.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { PageLoading } from '@/components/loading';
 
 export const WorkspaceIndex = () => {
   const router = useRouter();
@@ -14,7 +15,7 @@ export const WorkspaceIndex = () => {
     }
   }, [currentWorkspaceId, router, workspaceLoaded]);
 
-  return <></>;
+  return <PageLoading />;
 };
 
 export default WorkspaceIndex;