Merge pull request #2307 from Agenta-AI/fix/wait-until-project-gets-l…

…oeaded

fix(frontend): wait until project-id gets loaded

agenta-web/src/components/Layout/Layout.tsx

@@ -17,6 +17,7 @@ import {ThemeProvider} from "react-jss"
 import {JSSTheme, StyleProps as MainStyleProps} from "@/lib/Types"
 import {Lightning} from "@phosphor-icons/react"
 import packageJsonData from "../../../package.json"
+import {useProjectData} from "@/contexts/project.context"
 
 const {Content, Footer} = Layout
 const {Text} = Typography
@@ -85,6 +86,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
     const {appTheme} = useAppTheme()
     const {currentApp} = useAppsData()
     const [footerRef, {height: footerHeight}] = useElementSize()
+    const {isProjectId} = useProjectData()
     const classes = useStyles({themeMode: appTheme, footerHeight} as StyleProps)
     const router = useRouter()
     const appId = router.query.app_id as string
@@ -161,19 +163,22 @@ const App: React.FC<LayoutProps> = ({children}) => {
     // wait unitl we have the app id, if its an app route
     if (isAppRoute && (!appId || !currentApp)) return null
 
+    const isAuthRoute =
+        router.pathname.includes("/auth") || router.pathname.includes("/post-signup")
+
     return (
         <NoSSRWrapper>
             {typeof window === "undefined" ? null : (
                 <ThemeProvider theme={{...token, isDark: isDarkTheme}}>
-                    {router.pathname.includes("/auth") ||
-                    router.pathname.includes("/post-signup") ? (
+                    {isAuthRoute || !isProjectId ? (
                         <Layout className={classes.layout}>
                             <ErrorBoundary FallbackComponent={ErrorFallback}>
                                 {children}
                                 {contextHolder}
                             </ErrorBoundary>
                         </Layout>
                     ) : (
+                        // !isAuthRoute && isProjectId
                         <Layout hasSider className={classes.layout}>
                             <Sidebar />
                             <Layout className={classes.layout}>

agenta-web/src/contexts/project.context.tsx

@@ -44,7 +44,7 @@ export const getCurrentProject = () => projectContextValues
 const ProjectContextProvider: React.FC<PropsWithChildren> = ({children}) => {
     const [project, setProject] = useStateCallback<Project | null>(null)
     const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
-    const [isLoading, setIsLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(true)
     const {doesSessionExist} = useSession()
 
     useEffect(() => {
@@ -57,7 +57,7 @@ const ProjectContextProvider: React.FC<PropsWithChildren> = ({children}) => {
 
     const workspaceId: string = selectedOrg?.default_workspace.id || DEFAULT_UUID
 
-    const isProjectId = !isLoading && Boolean(project?.project_id)
+    const isProjectId = !isLoading && !!project?.project_id
     const projectId = (project?.project_id as string) || DEFAULT_UUID
 
     const fetcher = async (onSuccess?: () => void) => {
@@ -103,7 +103,7 @@ const ProjectContextProvider: React.FC<PropsWithChildren> = ({children}) => {
                 refetch: fetcher,
             }}
         >
-            {children}
+            {isProjectId ? children : null}
         </ProjectContext.Provider>
     )
 }