UI/UX: Add Skeleton Loaders for Data Fetching (Apertre3.0) #96
Description
Description:
When the user visits the Dashboard or Track page, there is a delay while fetching data from the Blockchain/API. Currently, it might show a blank screen or a tiny spinner. Skeleton screens (gray pulsating boxes) provide a better perceived performance.
Task:
Create a reusable Skeleton.tsx component (a div with a gray background and animate-pulse class).
Replace the loading text/spinner in AdminDashboard.tsx and TrackBatch.tsx with these skeletons.
Scenario:
If isLoading === true: Show 3-4 skeleton rows looking like the real data cards.
If isLoading === false: Show the real data.
Technical Scope:
Libraries: Pure Tailwind CSS (animate-pulse, bg-gray-200, dark:bg-gray-700).
Files: src/components/ui/Skeleton.tsx.