feat: add shimmer loading skeletons for various pages and components

- Implemented UiShimmer as a core shimmer wrapper for animated gradient effects.
- Created shimmer presets for list items, stats cards, section headers, and more.
- Developed specific skeletons for billing, invoices, coverage, hubs, reports, payments, shifts, and home pages.
- Enhanced user experience by providing visual placeholders during data loading.

apps/mobile/packages/features/client/client_coverage/lib/src/presentation/pages/coverage_page.dart

@@ -9,6 +9,7 @@ import '../blocs/coverage_bloc.dart';
 import '../blocs/coverage_event.dart';
 import '../blocs/coverage_state.dart';
 import '../widgets/coverage_calendar_selector.dart';
+import '../widgets/coverage_page_skeleton.dart';
 import '../widgets/coverage_quick_stats.dart';
 import '../widgets/coverage_shift_list.dart';
 import '../widgets/coverage_stats_header.dart';
@@ -180,9 +181,7 @@ class _CoveragePageState extends State<CoveragePage> {
   }) {
     if (state.shifts.isEmpty) {
       if (state.status == CoverageStatus.loading) {
-        return const Center(
-          child: CircularProgressIndicator(),
-        );
+        return const CoveragePageSkeleton();
       }
 
       if (state.status == CoverageStatus.failure) {

apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/coverage_page_skeleton.dart

@@ -0,0 +1,102 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// Shimmer loading skeleton that mimics the coverage page loaded layout.
+///
+/// Shows placeholder shapes for the quick stats row, shift section header,
+/// and a list of shift cards with worker rows.
+class CoveragePageSkeleton extends StatelessWidget {
+  /// Creates a [CoveragePageSkeleton].
+  const CoveragePageSkeleton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return UiShimmer(
+      child: Padding(
+        padding: const EdgeInsets.all(UiConstants.space5),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Quick stats row (2 stat cards)
+            const Row(
+              children: [
+                Expanded(child: UiShimmerStatsCard()),
+                SizedBox(width: UiConstants.space2),
+                Expanded(child: UiShimmerStatsCard()),
+              ],
+            ),
+            const SizedBox(height: UiConstants.space6),
+
+            // Shifts section header
+            const UiShimmerLine(width: 140, height: 18),
+            const SizedBox(height: UiConstants.space6),
+
+            // Shift cards with worker rows
+            const _ShiftCardSkeleton(),
+            const SizedBox(height: UiConstants.space3),
+            const _ShiftCardSkeleton(),
+            const SizedBox(height: UiConstants.space3),
+            const _ShiftCardSkeleton(),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Shimmer placeholder for a single shift card with header and worker rows.
+class _ShiftCardSkeleton extends StatelessWidget {
+  const _ShiftCardSkeleton();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        border: Border.all(color: UiColors.border),
+        borderRadius: UiConstants.radiusLg,
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: Column(
+        children: [
+          // Shift header
+          Padding(
+            padding: const EdgeInsets.all(UiConstants.space4),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const UiShimmerLine(width: 180, height: 16),
+                const SizedBox(height: UiConstants.space2),
+                const UiShimmerLine(width: 120, height: 12),
+                const SizedBox(height: UiConstants.space2),
+                Row(
+                  children: [
+                    const UiShimmerLine(width: 80, height: 12),
+                    const Spacer(),
+                    UiShimmerBox(
+                      width: 60,
+                      height: 24,
+                      borderRadius: UiConstants.radiusFull,
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+
+          // Worker rows
+          Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: UiConstants.space3,
+            ).copyWith(bottom: UiConstants.space3),
+            child: const Column(
+              children: [
+                UiShimmerListItem(),
+                UiShimmerListItem(),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}