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 (