feat: add loading in middle page

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) => {

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;

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;