Merge pull request #393 from shapehq/bugfix/delays-error-messages-until-data-refreshed-mpabarca

Fix: Delays error messages until data is refreshed

Author: mpabarca

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

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

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

@@ -5,6 +5,7 @@ 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"
 
 export default function Page() {
   const { project, version, specification, navigateToSelectionIfNeeded } = useProjectSelection()
@@ -23,17 +24,16 @@ export default function Page() {
       specification
     })
   }, [project, version, specification])
+
   return (
     <>
       {project && version && specification &&
         <Documentation url={specification.url} />
       }
-      {project && !version &&
-        <ErrorMessage text="The selected branch or tag was not found."/>
-      }
-      {project && !specification &&
-        <ErrorMessage text="The selected specification was not found."/>
+      {project && (!version || !specification) &&
+        <ErrorMessage text={`The selected ${!version ? "branch or tag" : "specification"} was not found.`}/>
       }
+      {!project && <NotFound/>}
     </>
   )
 }

src/common/context/ProjectsContext.ts

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

src/features/projects/view/ProjectsContextProvider.tsx

@@ -11,9 +11,26 @@ const ProjectsContextProvider = ({
   initialProjects?: Project[],
   children?: React.ReactNode
 }) => {
+  const [refreshed, setRefreshed] = useState<boolean>(false)
   const [projects, setProjects] = useState<Project[]>(initialProjects || [])
+
+  const hasProjectChanged = (value: Project[]) => value.some((project, index) => {
+    // Compare by project id and version (or any other key fields)
+    return project.id !== projects[index]?.id || project.versions !== projects[index]?.versions
+  })
+
+  const setProjectsAndRefreshed = (value: Project[]) => {
+    setProjects(value)
+    // If any project has changed, update the state and mark as refreshed
+    if (hasProjectChanged(value)) setRefreshed(true)
+
+  }
   return (
-    <ProjectsContext.Provider value={{ projects, setProjects }}>
+    <ProjectsContext.Provider value={{
+      refreshed,
+      projects,
+      setProjects: setProjectsAndRefreshed
+    }}>
       {children}
     </ProjectsContext.Provider>
   )