Models view dont wait for backend data to show the page.#525
Models view dont wait for backend data to show the page.#525Felipedino wants to merge 1 commit intodevelopfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR improves perceived responsiveness in the Models section by introducing a task-level loading state and showing skeleton placeholders while tasks are fetched, instead of blocking the entire page behind a fullscreen spinner.
Changes:
- Added a
loadingTasksstate to the modelsuseSessionshook and propagated it throughModelsContext. - Updated
SelectOptionMenuto accept aloadingprop and render skeleton cards when loading. - Removed the initial fullscreen loading spinner from
ModelsContentand switched to non-blocking initial fetch calls.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| DashAI/front/src/pages/models/ModelsContent.jsx | Removes initial fullscreen spinner and triggers initial fetches on mount. |
| DashAI/front/src/hooks/models/useSessions.js | Introduces loadingTasks state toggled during fetchTasks(). |
| DashAI/front/src/components/threeSectionLayout/SelectOptionMenu.jsx | Adds loading prop and skeleton-card rendering for loading state. |
| DashAI/front/src/components/models/ModelsContext.jsx | Exposes loadingTasks via Models context provider. |
| DashAI/front/src/components/models/ModelCenterContent.jsx | Passes loadingTasks to SelectOptionMenu for task selection. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| useEffect(() => { | ||
| const loadInitialData = async () => { | ||
| await Promise.all([fetchDatasets(), fetchSessions(), fetchTasks()]); | ||
| setIsInitialLoading(false); | ||
| }; | ||
| loadInitialData(); | ||
| fetchDatasets(); | ||
| fetchSessions(); | ||
| fetchTasks(); | ||
| }, []); |
There was a problem hiding this comment.
ModelsProvider already triggers initial fetchDatasets(), fetchSessions(), and fetchTasks() via its own useEffects (see components/models/ModelsContext.jsx). Calling them again here causes duplicate network requests and, with the new loadingTasks boolean, can create a race where loadingTasks becomes false while another fetchTasks() call is still in-flight. Consider removing this effect entirely (or at least fetchTasks) and letting the provider own the initial fetch logic so it runs exactly once.
| @@ -56,6 +58,8 @@ export function useSessions({ t }) { | |||
| variant: "error", | |||
| }); | |||
| console.error("Failed to fetch tasks:", error); | |||
| } finally { | |||
| setLoadingTasks(false); | |||
| } | |||
There was a problem hiding this comment.
loadingTasks is a single boolean toggled in fetchTasks(). If fetchTasks() is invoked concurrently (which currently happens on Models page mount because both ModelsProvider and ModelsContent call it), the first request to finish will set loadingTasks to false even if a later request is still pending. To avoid incorrect UI state, either ensure fetchTasks() is only triggered from one place, or make loadingTasks concurrency-safe (e.g., track an in-flight counter or store a requestId in a ref and only clear loading for the latest request).
This pull request improves the user experience when loading tasks in the models section by introducing a loading state and skeleton placeholders. Instead of blocking the entire page with a spinner, the UI now displays skeleton cards while tasks are being fetched, making the interface feel more responsive and polished. The loading state is managed via a new
loadingTasksvariable, which is propagated through context and component props.Loading state management and UI improvements:
loadingTasksstate to theuseSessionshook, set totruewhile tasks are being fetched andfalseonce loading completes. This state is now included in the context and passed down to relevant components. [1] [2] [3] [4] [5] [6] [7]SelectOptionMenuto accept aloadingprop and render six skeleton cards in place of options when loading istrue, providing a smoother and more modern loading experience. [1] [2] [3] [4]Simplification of initial loading logic:
ModelsContent.jsx. The initial data fetching is now handled without blocking the entire page, relying on the new skeleton-based loading indicators for tasks. [1] [2] [3] [4]