diff --git a/src/app/(authed)/(project-doc)/[...slug]/layout.tsx b/src/app/(authed)/(project-doc)/[...slug]/layout.tsx index 98306516..114f49c2 100644 --- a/src/app/(authed)/(project-doc)/[...slug]/layout.tsx +++ b/src/app/(authed)/(project-doc)/[...slug]/layout.tsx @@ -4,32 +4,21 @@ 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 SecondaryHeaderPlaceholder from "@/features/sidebar/view/SecondarySplitHeaderPlaceholder" -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 { refreshed } = useContext(ProjectsContext) - const theme = useTheme() return ( <> - {!refreshed ? : - }> - - - } - - {refreshed ? -
- {children} -
: - - } + }> + + + +
+ {children} +
) diff --git a/src/app/(authed)/(project-doc)/[...slug]/page.tsx b/src/app/(authed)/(project-doc)/[...slug]/page.tsx index 9cb06eb9..66bb1423 100644 --- a/src/app/(authed)/(project-doc)/[...slug]/page.tsx +++ b/src/app/(authed)/(project-doc)/[...slug]/page.tsx @@ -1,14 +1,17 @@ "use client" -import { useEffect } from "react" +import { useContext, 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/context/ProjectsContext" +import LoadingIndicator from "@/common/ui/LoadingIndicator" export default function Page() { const { project, version, specification, navigateToSelectionIfNeeded } = useProjectSelection() + const { refreshing } = useContext(ProjectsContext) // Ensure the URL reflects the current selection of project, version, and specification. useEffect(() => { navigateToSelectionIfNeeded() @@ -30,10 +33,13 @@ export default function Page() { {project && version && specification && } - {project && (!version || !specification) && + {project && (!version || !specification) && !refreshing && } - {!project && } + {refreshing && // project data is currently being fetched - show loading indicator + + } + {!project && !refreshing && } ) } diff --git a/src/common/context/ProjectsContext.ts b/src/common/context/ProjectsContext.ts index cc0fe966..8a2cf66f 100644 --- a/src/common/context/ProjectsContext.ts +++ b/src/common/context/ProjectsContext.ts @@ -6,13 +6,13 @@ import { Project } from "@/features/projects/domain" export const SidebarTogglableContext = createContext(true) type ProjectsContextValue = { - refreshed: boolean, + refreshing: boolean, projects: Project[], setProjects: (projects: Project[]) => void } export const ProjectsContext = createContext({ - refreshed: false, + refreshing: false, projects: [], setProjects: () => {} }) diff --git a/src/features/projects/view/ProjectsContextProvider.tsx b/src/features/projects/view/ProjectsContextProvider.tsx index f8bf2f38..e9371ac2 100644 --- a/src/features/projects/view/ProjectsContextProvider.tsx +++ b/src/features/projects/view/ProjectsContextProvider.tsx @@ -11,9 +11,9 @@ const ProjectsContextProvider = ({ initialProjects?: Project[]; children?: React.ReactNode; }) => { - const [refreshed, setRefreshed] = useState(true); const [projects, setProjects] = useState(initialProjects || []); const isLoadingRef = useRef(false); + const [refreshing, setRefreshing] = useState(false); const hasProjectChanged = (value: Project[]) => value.some((project, index) => { @@ -26,8 +26,6 @@ const ProjectsContextProvider = ({ const setProjectsAndRefreshed = (value: Project[]) => { setProjects(value); - // If any project has changed, update the state and mark as refreshed - if (hasProjectChanged(value)) setRefreshed(true); }; // Trigger background refresh after initial mount @@ -35,7 +33,8 @@ const ProjectsContextProvider = ({ const refreshProjects = () => { if (isLoadingRef.current) return; isLoadingRef.current = true; - + setRefreshing(true); + fetch("/api/projects", { method: "POST" }) .then((res) => res.json()) .then( @@ -47,6 +46,7 @@ const ProjectsContextProvider = ({ .catch((error) => console.error("Failed to refresh projects", error)) .finally(() => { isLoadingRef.current = false; + setRefreshing(false); }); }; // Initial refresh @@ -65,8 +65,8 @@ const ProjectsContextProvider = ({ return (