Task Description
The UI currently stays static or shows old data while a new table is loading. We need a loading spinner or a skeleton screen to show that data is being fetched.
Goal
Improve perceived performance and UI responsiveness during database fetches.
Files to Look At
frontend/src/App.tsx
frontend/src/components/views/
Step-by-Step Guidance
- Create a
isLoading state in the main App or relevant view component.
- Set it to
true before calling the API and false after the response.
- While
isLoading is true, render a placeholder (spinner or grey skeleton rows) instead of the data table.
Acceptance Criteria
Difficulty
Easy
Task Description
The UI currently stays static or shows old data while a new table is loading. We need a loading spinner or a skeleton screen to show that data is being fetched.
Goal
Improve perceived performance and UI responsiveness during database fetches.
Files to Look At
frontend/src/App.tsxfrontend/src/components/views/Step-by-Step Guidance
isLoadingstate in the main App or relevant view component.truebefore calling the API andfalseafter the response.isLoadingis true, render a placeholder (spinner or grey skeleton rows) instead of the data table.Acceptance Criteria
Difficulty
Easy