fix(frontend): make skeleton loading colors theme-responsive and align windows loading delay to 100ms

frontend/AGENTS.md

@@ -88,10 +88,9 @@ Files backup/restore - mirror mode or zip -->
 <!-- ## backend server backup/restore
 - do not use zip and unzip -->
 
-# LOGIN SCREEN
-- fix the login section that animates to full screen if the text fields is not empty make that section full screen
-- fix padding top in Login label, it has huge padding top
-
+# WINDOWS AND ANDROID LAYOUT
+- make the skeleton loading colors responsive from the theme colors
+- make the windows skeleton delay same from the android layout
 
 ---
 

frontend/lib/ui/layouts/android_bottom_nav_layout.dart

@@ -616,6 +616,10 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
 
   @override
   Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final baseColor = isDark ? Colors.grey.shade800 : Colors.grey.shade300;
+    final secondaryColor = isDark ? Colors.grey.shade900 : Colors.grey.shade200;
+
     return FadeTransition(
       opacity: Tween<double>(begin: 0.3, end: 1.0).animate(_controller),
       child: Padding(
@@ -627,7 +631,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
               height: 40,
               width: 180,
               decoration: BoxDecoration(
-                color: Colors.grey.shade300,
+                color: baseColor,
                 borderRadius: BorderRadius.circular(8),
               ),
             ),
@@ -638,7 +642,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
                   child: Container(
                     height: 80,
                     decoration: BoxDecoration(
-                      color: Colors.grey.shade200,
+                      color: secondaryColor,
                       borderRadius: BorderRadius.circular(12),
                     ),
                   ),
@@ -648,7 +652,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
                   child: Container(
                     height: 80,
                     decoration: BoxDecoration(
-                      color: Colors.grey.shade200,
+                      color: secondaryColor,
                       borderRadius: BorderRadius.circular(12),
                     ),
                   ),
@@ -664,7 +668,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
                 itemBuilder: (_, __) => Container(
                   height: 60,
                   decoration: BoxDecoration(
-                    color: Colors.grey.shade200,
+                    color: secondaryColor,
                     borderRadius: BorderRadius.circular(8),
                   ),
                 ),

frontend/lib/ui/layouts/windows_sidebar_layout.dart

@@ -159,7 +159,7 @@ class _WindowsSidebarLayoutState extends ConsumerState<WindowsSidebarLayout> {
 
                   _tabLoadingTimer?.cancel();
                   _tabLoadingTimer = Timer(
-                    const Duration(milliseconds: 500),
+                    const Duration(milliseconds: 100),
                     () {
                       if (mounted) {
                         setState(() {
@@ -751,6 +751,10 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
 
   @override
   Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final baseColor = isDark ? Colors.grey.shade800 : Colors.grey.shade300;
+    final secondaryColor = isDark ? Colors.grey.shade900 : Colors.grey.shade200;
+
     return FadeTransition(
       opacity: Tween<double>(begin: 0.3, end: 1.0).animate(_controller),
       child: Padding(
@@ -762,7 +766,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
               height: 40,
               width: 180,
               decoration: BoxDecoration(
-                color: Colors.grey.shade300,
+                color: baseColor,
                 borderRadius: BorderRadius.circular(8),
               ),
             ),
@@ -773,7 +777,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
                   child: Container(
                     height: 80,
                     decoration: BoxDecoration(
-                      color: Colors.grey.shade200,
+                      color: secondaryColor,
                       borderRadius: BorderRadius.circular(12),
                     ),
                   ),
@@ -783,7 +787,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
                   child: Container(
                     height: 80,
                     decoration: BoxDecoration(
-                      color: Colors.grey.shade200,
+                      color: secondaryColor,
                       borderRadius: BorderRadius.circular(12),
                     ),
                   ),
@@ -799,7 +803,7 @@ class _PageSkeletonLoaderState extends State<_PageSkeletonLoader>
                 itemBuilder: (_, __) => Container(
                   height: 60,
                   decoration: BoxDecoration(
-                    color: Colors.grey.shade200,
+                    color: secondaryColor,
                     borderRadius: BorderRadius.circular(8),
                   ),
                 ),

frontend/lib/ui/screens/login/login_screen.dart

@@ -243,7 +243,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProv
               child: WindowCaption(
                 brightness: Theme.of(context).brightness,
                 backgroundColor: isDark
-                    ? Theme.of(context).colorScheme.surface
+                    ? AppColors.primaryGreen
                     : AppColors.primaryGreen,
                 title: Text(
                   'Talisay Integrated School',