Description
Currently, when data is being fetched from Firebase for the Doctor and Patient dashboards (like appointments, vitals, or patient lists), the UI might show a blank space or a generic loading text/spinner. To improve the perceived performance and User Experience (UX), we should implement Skeleton Loaders.
Expected Behavior
Instead of a blank screen or a plain "Loading..." text, users should see a skeleton placeholder that mimics the layout of the content being loaded (e.g., skeleton cards for appointments, skeleton table rows for the patient list).
Tasks
Tech Stack
- Next.js
- React
- Tailwind CSS
Additional Context
Tailwind's animate-pulse utility class is perfect for this. E.g., <div className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded-md h-4 w-full"></div>.
Description
Currently, when data is being fetched from Firebase for the Doctor and Patient dashboards (like appointments, vitals, or patient lists), the UI might show a blank space or a generic loading text/spinner. To improve the perceived performance and User Experience (UX), we should implement Skeleton Loaders.
Expected Behavior
Instead of a blank screen or a plain "Loading..." text, users should see a skeleton placeholder that mimics the layout of the content being loaded (e.g., skeleton cards for appointments, skeleton table rows for the patient list).
Tasks
<Skeleton />component (using Tailwind CSS for pulsing animations).pages/doctor/...) while fetching patient data/alerts.pages/patient/...) while fetching prescriptions/appointments.Tech Stack
Additional Context
Tailwind's
animate-pulseutility class is perfect for this. E.g.,<div className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded-md h-4 w-full"></div>.