Description
When the dashboard fetches the list of recent tasks, the UI either shows a blank screen or a sudden layout shift once the data populates. This feels unpolished on slower connections.
Steps to Reproduce
- Open browser DevTools and throttle your network speed to "Slow 3G".
- Navigate to the Dashboard.
- Observe the abrupt layout change once the API data loads.
Expected Behavior
The UI should display skeleton loader placeholders that match the shape of the task cards while data is being fetched, providing a smooth perceived loading experience.
Implementation Hints
- Frontend: Create a
TaskCardSkeleton component. Use Tailwind's animation utility (e.g., className="bg-gray-200 dark:bg-gray-700 animate-pulse h-24 rounded-lg"). Render 3 to 5 of these placeholders while the isLoading state from your data-fetching hook is true.
Description
When the dashboard fetches the list of recent tasks, the UI either shows a blank screen or a sudden layout shift once the data populates. This feels unpolished on slower connections.
Steps to Reproduce
Expected Behavior
The UI should display skeleton loader placeholders that match the shape of the task cards while data is being fetched, providing a smooth perceived loading experience.
Implementation Hints
TaskCardSkeletoncomponent. Use Tailwind's animation utility (e.g.,className="bg-gray-200 dark:bg-gray-700 animate-pulse h-24 rounded-lg"). Render 3 to 5 of these placeholders while theisLoadingstate from your data-fetching hook is true.