From 97c873167faae772911af6d9517de8d45e00bb7b Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Thu, 19 Jun 2025 16:22:48 +0530
Subject: [PATCH] feat: Add employee list skeleton loader for improved loading
 experience

---
 .../Attendence/attendance_screen.dart         | 95 ++++++++++++++++---
 1 file changed, 80 insertions(+), 15 deletions(-)

diff --git a/lib/view/dashboard/Attendence/attendance_screen.dart b/lib/view/dashboard/Attendence/attendance_screen.dart
index 0271cfa..a1c55b0 100644
--- a/lib/view/dashboard/Attendence/attendance_screen.dart
+++ b/lib/view/dashboard/Attendence/attendance_screen.dart
@@ -76,9 +76,9 @@ class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
           elevation: 0.5,
           foregroundColor: Colors.black,
           titleSpacing: 0,
-          centerTitle: false, 
+          centerTitle: false,
           leading: Padding(
-            padding: const EdgeInsets.only(top: 15.0), 
+            padding: const EdgeInsets.only(top: 15.0),
             child: IconButton(
               icon: const Icon(Icons.arrow_back_ios_new,
                   color: Colors.black, size: 20),
@@ -88,7 +88,7 @@ class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
             ),
           ),
           title: Padding(
-            padding: const EdgeInsets.only(top: 15.0), 
+            padding: const EdgeInsets.only(top: 15.0),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisAlignment: MainAxisAlignment.center,
@@ -304,10 +304,7 @@ class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
             ),
           ),
           if (isLoading)
-            const SizedBox(
-              height: 120,
-              child: Center(child: CircularProgressIndicator()),
-            )
+            employeeListSkeletonLoader()
           else if (employees.isEmpty)
             SizedBox(
               height: 120,
@@ -453,6 +450,80 @@ class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
     });
   }
 
+  Widget employeeListSkeletonLoader() {
+    return MyCard.bordered(
+      borderRadiusAll: 4,
+      paddingAll: 8,
+      child: Column(
+        children: List.generate(4, (index) {
+          return Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(bottom: 8),
+                child: Row(
+                  children: [
+                    // Avatar placeholder
+                    Container(
+                      width: 31,
+                      height: 31,
+                      decoration: BoxDecoration(
+                        color: Colors.grey.shade300,
+                        shape: BoxShape.circle,
+                      ),
+                    ),
+                    MySpacing.width(16),
+                    // Employee name/designation & buttons
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Container(
+                            height: 12,
+                            width: 100,
+                            color: Colors.grey.shade300,
+                          ),
+                          MySpacing.height(8),
+                          Container(
+                            height: 10,
+                            width: 80,
+                            color: Colors.grey.shade300,
+                          ),
+                          MySpacing.height(12),
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.end,
+                            children: [
+                              Container(
+                                height: 28,
+                                width: 60,
+                                color: Colors.grey.shade300,
+                              ),
+                              MySpacing.width(8),
+                              Container(
+                                height: 28,
+                                width: 60,
+                                color: Colors.grey.shade300,
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              if (index != 3)
+                Divider(
+                  color: Colors.grey.withOpacity(0.3),
+                  thickness: 1,
+                  height: 1,
+                ),
+            ],
+          );
+        }),
+      ),
+    );
+  }
+
   Widget employeeLog() {
     return Obx(() {
       final logs = List.of(attendanceController.attendanceLogs);
@@ -503,10 +574,7 @@ class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
             ),
           ),
           if (attendanceController.isLoadingAttendanceLogs.value)
-            const SizedBox(
-              height: 120,
-              child: Center(child: CircularProgressIndicator()),
-            )
+            employeeListSkeletonLoader()
           else if (logs.isEmpty)
             SizedBox(
               height: 120,
@@ -691,10 +759,7 @@ class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
         Obx(() {
           final employees = attendanceController.regularizationLogs;
           if (attendanceController.isLoadingRegularizationLogs.value) {
-            return SizedBox(
-              height: 120,
-              child: const Center(child: CircularProgressIndicator()),
-            );
+            return employeeListSkeletonLoader();
           }
 
           if (employees.isEmpty) {