fix: add router defend

packages/app/src/components/loading/index.tsx

@@ -1,20 +1,3 @@
-import {
-  StyledLoadingWrapper,
-  StyledLoading,
-  StyledLoadingItem,
-} from './styled';
-
-export const Loading = ({ size = 40 }: { size?: number }) => {
-  return (
-    <StyledLoadingWrapper size={size}>
-      <StyledLoading>
-        <StyledLoadingItem size={size} />
-        <StyledLoadingItem size={size} />
-        <StyledLoadingItem size={size} />
-        <StyledLoadingItem size={size} />
-      </StyledLoading>
-    </StyledLoadingWrapper>
-  );
-};
-
+import Loading from './loading';
+export * from './page-loading';
 export default Loading;

packages/app/src/components/loading/loading.tsx

@@ -0,0 +1,20 @@
+import {
+  StyledLoadingWrapper,
+  StyledLoading,
+  StyledLoadingItem,
+} from './styled';
+
+export const Loading = ({ size = 40 }: { size?: number }) => {
+  return (
+    <StyledLoadingWrapper size={size}>
+      <StyledLoading>
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+      </StyledLoading>
+    </StyledLoadingWrapper>
+  );
+};
+
+export default Loading;

packages/app/src/components/loading/page-loading.tsx

@@ -0,0 +1,31 @@
+import { styled } from '@/styles';
+import Loading from './loading';
+
+// Used for the full page loading
+const StyledLoadingContainer = styled('div')(({ theme }) => {
+  return {
+    height: '100vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: '#6880FF',
+    h1: {
+      fontSize: '2em',
+      marginTop: '15px',
+      fontWeight: '600',
+    },
+  };
+});
+
+export const PageLoading = ({ text = 'Loading...' }: { text?: string }) => {
+  return (
+    <StyledLoadingContainer>
+      <div className="wrapper">
+        <Loading />
+        <h1>{text}</h1>
+      </div>
+    </StyledLoadingContainer>
+  );
+};
+
+export default PageLoading;

packages/app/src/components/workspace-layout/index.tsx

@@ -2,10 +2,43 @@ import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
 import { useRouter } from 'next/router';
 import { StyledPage, StyledWrapper } from './styles';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { useAppState } from '@/providers/app-state-provider';
+
+export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  const [workspaceLoaded, setWorkspaceLoaded] = useState(false);
+  const { synced, loadWorkspace, workspacesMeta } = useAppState();
+
+  useEffect(() => {
+    const initWorkspace = async () => {
+      const workspaceId =
+        (router.query.workspaceId as string) ||
+        workspacesMeta?.[0]?.id ||
+        new Date().getTime().toString();
+
+      await loadWorkspace(workspaceId);
+      setWorkspaceLoaded(true);
+    };
+    if (!synced) {
+      return;
+    }
+
+    initWorkspace();
+  }, [
+    loadWorkspace,
+    router.pathname,
+    router.query.workspaceId,
+    synced,
+    workspaceLoaded,
+    workspacesMeta,
+  ]);
+  return <>{workspaceLoaded ? children : null}</>;
+};
 
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
   const router = useRouter();
+
   return (
     <StyledPage>
       <WorkSpaceSliderBar />
@@ -17,4 +50,11 @@ export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
   );
 };
 
-export default WorkspaceLayout;
+export const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <WorkspaceDefender>
+      <WorkspaceLayout>{children}</WorkspaceLayout>
+    </WorkspaceDefender>
+  );
+};
+export default Layout;

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -140,7 +140,7 @@ export const WorkSpaceSliderBar = () => {
         </Link>
         <StyledNewPageButton
           onClick={async () => {
-            const pageId = await createPage?.current?.();
+            const pageId = await createPage?.();
             if (pageId) {
               openPage(pageId);
             }