Add refreshed state to ProjectsContext to show updated data of projects and branches

Author: mpabarca

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

@@ -1,33 +1,39 @@
 "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 { ProjectsContext } from "@/common"
 import SecondaryHeaderPlaceholder from "@/features/sidebar/view/SecondarySplitHeaderPlaceholder"
 import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
+import { useContext } from "react"
+import { ProjectsContext } from "@/common"
+import LoadingIndicator from "@/common/ui/LoadingIndicator"
 
 export default function Page({ children }: { children: React.ReactNode }) {
-  const { cached } = useContext(ProjectsContext)
   const { project } = useProjectSelection()
+  const { refreshed } = useContext(ProjectsContext)
+
   const theme = useTheme()
+  
   return (
     <Stack sx={{ height: "100%" }}>
-      <>
-        {project &&
-          <SecondarySplitHeader mobileToolbar={<MobileToolbar/>}>
-            <TrailingToolbarItem/>
-          </SecondarySplitHeader>
-        }
-        {!project && cached && <SecondaryHeaderPlaceholder/>}
-        <Box sx={{ height: "0.5px", background: theme.palette.divider }} />
-        <main style={{ flexGrow: "1", overflowY: "auto" }}>
-          {children}
-        </main>
-      </>
+      {refreshed ? 
+        <>
+          {project &&
+            <SecondarySplitHeader mobileToolbar={<MobileToolbar/>}>
+              <TrailingToolbarItem/>
+            </SecondarySplitHeader>
+          }
+          {!project && <SecondaryHeaderPlaceholder/>}
+          <Box sx={{ height: "0.5px", background: theme.palette.divider }} />
+          <main style={{ flexGrow: "1", overflowY: "auto" }}>
+            {children}
+          </main>
+        </>
+      : <LoadingIndicator />
+    }
     </Stack>
   )
 }

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

@@ -1,15 +1,13 @@
 "use client"
 
-import { useEffect, useContext } from "react"
+import { useEffect } 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(() => {
@@ -26,18 +24,19 @@ export default function Page() {
       specification
     })
   }, [project, version, specification])
+
   return (
     <>
       {project && version && specification &&
         <Documentation url={specification.url} />
       }
-      {project && !version && !cached &&
+      {project && !version &&
         <ErrorMessage text="The selected branch or tag was not found."/>
       }
-      {project && !specification && !cached &&
+      {project && !specification &&
         <ErrorMessage text="The selected specification was not found."/>
       }
-      {!project && !cached && <NotFound/>}
+      {!project && <NotFound/>}
     </>
   )
 }

src/common/context/ProjectsContext.ts

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

src/features/projects/view/ProjectsContextProvider.tsx

@@ -11,17 +11,19 @@ const ProjectsContextProvider = ({
   initialProjects?: Project[],
   children?: React.ReactNode
 }) => {
-  const [cached, setCached] = useState<boolean>(true)
+  const [refreshed, setRefreshed] = useState<boolean>(false)
   const [projects, setProjects] = useState<Project[]>(initialProjects || [])
-  const setProjectsAndCached = (projects: Project[]) => {
-    setProjects(projects)
-    setCached(false)
+
+  const setProjectsAndRefreshed = (value: Project[]) => {
+    setProjects(value)
+    // Only set refreshed to true after projects are updated
+    if (JSON.stringify(projects) !== JSON.stringify(value)) setRefreshed(true)
   }
   return (
     <ProjectsContext.Provider value={{
-      cached,
+      refreshed,
       projects,
-      setProjects: setProjectsAndCached
+      setProjects: setProjectsAndRefreshed
     }}>
       {children}
     </ProjectsContext.Provider>