Delays error messages until data is refreshed

Author: simonbs

src/app/(authed)/(project-doc)/[...slug]/layout.tsx

@@ -1,47 +1,33 @@
 "use client"
 
+import { useContext } from "react"
 import { Box, Stack } from "@mui/material"
 import { useTheme } from "@mui/material/styles"
 import TrailingToolbarItem from "@/features/projects/view/toolbar/TrailingToolbarItem"
 import MobileToolbar from "@/features/projects/view/toolbar/MobileToolbar"
 import { useProjectSelection } from "@/features/projects/data"
-import NotFound from "@/features/projects/view/NotFound"
-import dynamic from "next/dynamic"
+import { ProjectsContext } from "@/common"
 import SecondaryHeaderPlaceholder from "@/features/sidebar/view/SecondarySplitHeaderPlaceholder"
-
-const SecondarySplitHeader = dynamic(() => import("@/features/sidebar/view/SecondarySplitHeader"),
-  {
-    loading: () => <SecondaryHeaderPlaceholder />,
-    ssr: false,
-  }
-)
+import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
 
 export default function Page({ children }: { children: React.ReactNode }) {
+  const { cached } = useContext(ProjectsContext)
   const { project } = useProjectSelection()
   const theme = useTheme()
   return (
     <Stack sx={{ height: "100%" }}>
-      {!project &&
-        <>
-          <SecondarySplitHeader>
-            <TrailingToolbarItem/>
-          </SecondarySplitHeader>
-          <main style={{ flexGrow: "1", overflowY: "auto" }}>
-            <NotFound />
-          </main>
-        </>
-      }
-      {project &&
-        <>
+      <>
+        {project &&
           <SecondarySplitHeader mobileToolbar={<MobileToolbar/>}>
             <TrailingToolbarItem/>
           </SecondarySplitHeader>
-          <Box sx={{ height: "0.5px", background: theme.palette.divider }} />
-          <main style={{ flexGrow: "1", overflowY: "auto" }}>
-            {children}
-          </main>
-        </>
-      }
+        }
+        {!project && cached && <SecondaryHeaderPlaceholder/>}
+        <Box sx={{ height: "0.5px", background: theme.palette.divider }} />
+        <main style={{ flexGrow: "1", overflowY: "auto" }}>
+          {children}
+        </main>
+      </>
     </Stack>
   )
 }

src/app/(authed)/(project-doc)/[...slug]/page.tsx

@@ -1,12 +1,15 @@
 "use client"
 
-import { useEffect } from "react"
+import { useEffect, useContext } from "react"
 import ErrorMessage from "@/common/ui/ErrorMessage"
 import { updateWindowTitle } from "@/features/projects/domain"
 import { useProjectSelection } from "@/features/projects/data"
 import Documentation from "@/features/projects/view/Documentation"
+import NotFound from "@/features/projects/view/NotFound"
+import { ProjectsContext } from "@/common"
 
 export default function Page() {
+  const { cached } = useContext(ProjectsContext)
   const { project, version, specification, navigateToSelectionIfNeeded } = useProjectSelection()
   // Ensure the URL reflects the current selection of project, version, and specification.
   useEffect(() => {
@@ -28,12 +31,13 @@ export default function Page() {
       {project && version && specification &&
         <Documentation url={specification.url} />
       }
-      {project && !version &&
+      {project && !version && !cached &&
         <ErrorMessage text="The selected branch or tag was not found."/>
       }
-      {project && !specification &&
+      {project && !specification && !cached &&
         <ErrorMessage text="The selected specification was not found."/>
       }
+      {!project && !cached && <NotFound/>}
     </>
   )
 }

src/common/context/ProjectsContext.ts

@@ -6,11 +6,13 @@ import { Project } from "@/features/projects/domain"
 export const SidebarTogglableContext = createContext<boolean>(true)
 
 type ProjectsContextValue = {
+  cached: boolean,
   projects: Project[],
   setProjects: (projects: Project[]) => void
 }
 
 export const ProjectsContext = createContext<ProjectsContextValue>({
+  cached: true,
   projects: [],
   setProjects: () => {}
 })

src/features/projects/view/ProjectsContextProvider.tsx

@@ -11,9 +11,18 @@ const ProjectsContextProvider = ({
   initialProjects?: Project[],
   children?: React.ReactNode
 }) => {
+  const [cached, setCached] = useState<boolean>(true)
   const [projects, setProjects] = useState<Project[]>(initialProjects || [])
+  const setProjectsAndCached = (projects: Project[]) => {
+    setProjects(projects)
+    setCached(false)
+  }
   return (
-    <ProjectsContext.Provider value={{ projects, setProjects }}>
+    <ProjectsContext.Provider value={{
+      cached,
+      projects,
+      setProjects: setProjectsAndCached
+    }}>
       {children}
     </ProjectsContext.Provider>
   )