update loaing

2025-12-02 18:09:20 +07:00
parent fc9b5e967f
commit 19d9a3dc2d
75 changed files with 216 additions and 292 deletions
--- a/lib/features/account/presentation/pages/account_page.dart
+++ b/lib/features/account/presentation/pages/account_page.dart
@@ -16,6 +16,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/database/hive_initializer.dart';
 import 'package:worker/core/database/models/enums.dart';
@@ -360,12 +361,7 @@ class _ProfileCardSection extends ConsumerWidget {
              shape: BoxShape.circle,
              color: colorScheme.surfaceContainerHighest,
            ),
-            child: Center(
-              child: CircularProgressIndicator(
-                color: colorScheme.primary,
-                strokeWidth: 2,
-              ),
-            ),
+            child: const CustomLoadingIndicator(),
          ),
          const SizedBox(width: AppSpacing.md),
          Expanded(
@@ -492,11 +488,8 @@ class _ProfileCardSection extends ConsumerWidget {
                        shape: BoxShape.circle,
                        color: colorScheme.primaryContainer,
                      ),
-                      child: Center(
-                        child: CircularProgressIndicator(
-                          color: colorScheme.onPrimaryContainer,
-                          strokeWidth: 2,
-                        ),
+                      child: CustomLoadingIndicator(
+                        color: colorScheme.onPrimaryContainer,
                      ),
                    ),
                    errorWidget: (context, url, error) => Container(
@@ -676,7 +669,7 @@ class _LogoutButton extends ConsumerWidget {
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
-                CircularProgressIndicator(),
+                CustomLoadingIndicator(),
                SizedBox(height: 16),
                Text('Đang đăng xuất...'),
              ],
--- a/lib/features/account/presentation/pages/address_form_page.dart
+++ b/lib/features/account/presentation/pages/address_form_page.dart
@@ -10,6 +10,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -450,13 +451,9 @@ class AddressFormPage extends HookConsumerWidget {
                              isSaving,
                            ),
                    icon: isSaving.value
-                        ? SizedBox(
-                            width: 18,
-                            height: 18,
-                            child: CircularProgressIndicator(
-                              strokeWidth: 2,
-                              color: colorScheme.onPrimary,
-                            ),
+                        ? CustomLoadingIndicator(
+                            color: colorScheme.onPrimary,
+                            size: 18,
                          )
                        : const FaIcon(FontAwesomeIcons.floppyDisk, size: 18),
                    label: Text(
@@ -800,13 +797,9 @@ class AddressFormPage extends HookConsumerWidget {
              ),
            if (isLoading) ...[
              const SizedBox(width: 8),
-              SizedBox(
-                width: 12,
-                height: 12,
-                child: CircularProgressIndicator(
-                  strokeWidth: 2,
-                  color: colorScheme.primary,
-                ),
+              CustomLoadingIndicator(
+                color: colorScheme.primary,
+                size: 12,
              ),
            ],
          ],
@@ -856,13 +849,9 @@ class AddressFormPage extends HookConsumerWidget {
            suffixIcon: isLoading
                ? Padding(
                    padding: const EdgeInsets.only(right: 12),
-                    child: SizedBox(
-                      width: 20,
-                      height: 20,
-                      child: CircularProgressIndicator(
-                        strokeWidth: 2,
-                        color: colorScheme.primary,
-                      ),
+                    child: CustomLoadingIndicator(
+                      color: colorScheme.primary,
+                      size: 20,
                    ),
                  )
                : null,
--- a/lib/features/account/presentation/pages/addresses_page.dart
+++ b/lib/features/account/presentation/pages/addresses_page.dart
@@ -10,6 +10,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -253,7 +254,7 @@ class AddressesPage extends HookConsumerWidget {
            ),
          ],
        ),
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const CustomLoadingIndicator(),
        error: (error, stack) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
--- a/lib/features/account/presentation/pages/profile_edit_page.dart
+++ b/lib/features/account/presentation/pages/profile_edit_page.dart
@@ -9,6 +9,7 @@
 library;

 import 'dart:convert';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'dart:io';

 import 'package:flutter/material.dart';
@@ -61,21 +62,8 @@ class ProfileEditPage extends HookConsumerWidget {
          ),
          centerTitle: false,
        ),
-        body: Center(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              CircularProgressIndicator(color: colorScheme.primary),
-              const SizedBox(height: AppSpacing.md),
-              Text(
-                'Đang tải thông tin...',
-                style: TextStyle(
-                  fontSize: 14,
-                  color: colorScheme.onSurfaceVariant,
-                ),
-              ),
-            ],
-          ),
+        body: const CustomLoadingIndicator(
+          message: 'Đang tải thông tin...',
        ),
      ),
      error: (error, stack) => Scaffold(
--- a/lib/features/account/presentation/providers/user_info_provider.dart
+++ b/lib/features/account/presentation/providers/user_info_provider.dart
@@ -67,7 +67,7 @@ Future<GetUserInfo> getUserInfoUseCase(Ref ref) async {
 ///
 /// userInfoAsync.when(
 ///   data: (userInfo) => Text(userInfo.fullName),
-///   loading: () => CircularProgressIndicator(),
+///   loading: () => const CustomLoadingIndicator(),
 ///   error: (error, stack) => ErrorWidget(error),
 /// );
 ///
--- a/lib/features/auth/presentation/pages/forgot_password_page.dart
+++ b/lib/features/auth/presentation/pages/forgot_password_page.dart
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/core/utils/validators.dart';
@@ -294,15 +295,9 @@ class _ForgotPasswordPageState extends ConsumerState<ForgotPasswordPage> {
                ),
              ),
              child: _isLoading
-                  ? SizedBox(
-                      height: 20.0,
-                      width: 20.0,
-                      child: CircularProgressIndicator(
-                        strokeWidth: 2.0,
-                        valueColor: AlwaysStoppedAnimation<Color>(
-                          colorScheme.onPrimary,
-                        ),
-                      ),
+                  ? CustomLoadingIndicator(
+                      color: colorScheme.onPrimary,
+                      size: 20,
                    )
                  : const Text(
                      'Gửi mã OTP',
--- a/lib/features/auth/presentation/pages/login_page.dart
+++ b/lib/features/auth/presentation/pages/login_page.dart
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/router/app_router.dart';
 import 'package:worker/core/theme/colors.dart';
@@ -483,15 +484,9 @@ class _LoginPageState extends ConsumerState<LoginPage> {
                ),
              ),
              child: isLoading
-                  ? SizedBox(
-                      height: 20.0,
-                      width: 20.0,
-                      child: CircularProgressIndicator(
-                        strokeWidth: 2.0,
-                        valueColor: AlwaysStoppedAnimation<Color>(
-                          colorScheme.onPrimary,
-                        ),
-                      ),
+                  ? CustomLoadingIndicator(
+                      color: colorScheme.onPrimary,
+                      size: 20,
                    )
                  : const Text(
                      'Đăng nhập',
--- a/lib/features/auth/presentation/pages/otp_verification_page.dart
+++ b/lib/features/auth/presentation/pages/otp_verification_page.dart
@@ -11,6 +11,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';

 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/router/app_router.dart';
@@ -377,15 +378,9 @@ class _OtpVerificationPageState extends ConsumerState<OtpVerificationPage> {
                          ),
                        ),
                        child: _isLoading
-                            ? SizedBox(
-                                height: 20,
-                                width: 20,
-                                child: CircularProgressIndicator(
-                                  strokeWidth: 2,
-                                  valueColor: AlwaysStoppedAnimation<Color>(
-                                    colorScheme.onPrimary,
-                                  ),
-                                ),
+                            ? CustomLoadingIndicator(
+                                color: colorScheme.onPrimary,
+                                size: 20,
                              )
                            : const Text(
                                'Xác nhận',
--- a/lib/features/auth/presentation/pages/register_page.dart
+++ b/lib/features/auth/presentation/pages/register_page.dart
@@ -12,6 +12,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:image_picker/image_picker.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';

 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/router/app_router.dart';
@@ -410,18 +411,8 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
        centerTitle: false,
      ),
      body: _isLoadingData
-          ? Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  const CircularProgressIndicator(),
-                  const SizedBox(height: AppSpacing.md),
-                  Text(
-                    'Đang tải dữ liệu...',
-                    style: TextStyle(color: colorScheme.onSurfaceVariant),
-                  ),
-                ],
-              ),
+          ? const CustomLoadingIndicator(
+              message: 'Đang tải dữ liệu...',
            )
          : SafeArea(
              child: Form(
@@ -646,15 +637,9 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
                            ),
                          ),
                          child: _isLoading
-                              ? SizedBox(
-                                  height: 20,
-                                  width: 20,
-                                  child: CircularProgressIndicator(
-                                    strokeWidth: 2,
-                                    valueColor: AlwaysStoppedAnimation<Color>(
-                                      colorScheme.onPrimary,
-                                    ),
-                                  ),
+                              ? CustomLoadingIndicator(
+                                  color: colorScheme.onPrimary,
+                                  size: 20,
                                )
                              : const Text(
                                  'Đăng ký',
@@ -801,9 +786,12 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
          },
        );
      },
-      loading: () => const SizedBox(
+      loading: () => SizedBox(
        height: 48,
-        child: Center(child: CircularProgressIndicator()),
+        child: CustomLoadingIndicator(
+          color: colorScheme.primary,
+          size: 20,
+        ),
      ),
      error: (error, stack) => Container(
        height: 48,
@@ -867,9 +855,12 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
          },
        );
      },
-      loading: () => const SizedBox(
+      loading: () => SizedBox(
        height: 48,
-        child: Center(child: CircularProgressIndicator()),
+        child: CustomLoadingIndicator(
+          color: colorScheme.primary,
+          size: 20,
+        ),
      ),
      error: (error, stack) => Container(
        height: 48,
--- a/lib/features/auth/presentation/pages/splash_page.dart
+++ b/lib/features/auth/presentation/pages/splash_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/theme/colors.dart';

 /// Splash Page
@@ -61,10 +62,7 @@ class SplashPage extends StatelessWidget {
            const SizedBox(height: 48.0),

            // Loading Indicator
-            CircularProgressIndicator(
-              valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
-              strokeWidth: 3.0,
-            ),
+            const CustomLoadingIndicator(),

            const SizedBox(height: 16.0),

--- a/lib/features/cart/presentation/pages/cart_page.dart
+++ b/lib/features/cart/presentation/pages/cart_page.dart
@@ -9,6 +9,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:intl/intl.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/router/app_router.dart';
 import 'package:worker/core/theme/colors.dart';
@@ -102,7 +103,7 @@ class _CartPageState extends ConsumerState<CartPage> {
        ],
      ),
      body: cartState.isLoading && cartState.isEmpty
-          ? const Center(child: CircularProgressIndicator())
+          ? const CustomLoadingIndicator()
          : cartState.errorMessage != null && cartState.isEmpty
              ? _buildErrorState(context, cartState.errorMessage!)
              : cartState.isEmpty
@@ -132,9 +133,7 @@ class _CartPageState extends ConsumerState<CartPage> {
                              if (cartState.isLoading)
                                Container(
                                  color: colorScheme.onSurface.withValues(alpha: 0.1),
-                                  child: const Center(
-                                    child: CircularProgressIndicator(),
-                                  ),
+                                  child: const CustomLoadingIndicator(),
                                ),
                            ],
                          ),
@@ -315,14 +314,9 @@ class _CartPageState extends ConsumerState<CartPage> {
                    elevation: 0,
                  ),
                  child: _isSyncing
-                      ? SizedBox(
-                          width: 20,
-                          height: 20,
-                          child: CircularProgressIndicator(
-                            strokeWidth: 2,
-                            valueColor:
-                                AlwaysStoppedAnimation<Color>(colorScheme.surface),
-                          ),
+                      ? CustomLoadingIndicator(
+                          color: colorScheme.surface,
+                          size: 20,
                        )
                      : Text(
                          'Tiến hành đặt hàng',
--- a/lib/features/cart/presentation/pages/checkout_page.dart
+++ b/lib/features/cart/presentation/pages/checkout_page.dart
@@ -15,6 +15,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';

 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
@@ -177,9 +178,7 @@ class CheckoutPage extends HookConsumerWidget {
                        ),
                      ],
                    ),
-                    child: const Center(
-                      child: CircularProgressIndicator(),
-                    ),
+                    child: const CustomLoadingIndicator(),
                  ),
                  error: (error, stack) => Container(
                    margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
--- a/lib/features/cart/presentation/widgets/cart_item_widget.dart
+++ b/lib/features/cart/presentation/widgets/cart_item_widget.dart
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:intl/intl.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/theme/typography.dart';
 import 'package:worker/features/cart/presentation/providers/cart_provider.dart';
 import 'package:worker/features/cart/presentation/providers/cart_state.dart';
@@ -128,8 +129,8 @@ class _CartItemWidgetState extends ConsumerState<CartItemWidget> {
                width: 100,
                height: 100,
                color: colorScheme.surfaceContainerHighest,
-                child: const Center(
-                  child: CircularProgressIndicator(strokeWidth: 2),
+                child: Center(
+                  child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                ),
              ),
              errorWidget: (context, url, error) => Container(
--- a/lib/features/cart/presentation/widgets/checkout_submit_button.dart
+++ b/lib/features/cart/presentation/widgets/checkout_submit_button.dart
@@ -6,6 +6,7 @@ library;
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';

 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/router/app_router.dart';
@@ -93,8 +94,8 @@ class CheckoutSubmitButton extends HookConsumerWidget {
    showDialog<void>(
      context: context,
      barrierDismissible: false,
-      builder: (context) => const Center(
-        child: CircularProgressIndicator(),
+      builder: (context) => Center(
+        child: CustomLoadingIndicator(color: Theme.of(context).colorScheme.primary, size: 40),
      ),
    );

--- a/lib/features/favorites/INTEGRATION_SUMMARY.md
+++ b/lib/features/favorites/INTEGRATION_SUMMARY.md
@@ -201,7 +201,7 @@ class FavoritesPage extends ConsumerWidget {
          return ProductCard(productId: productId);
        },
      ),
-      loading: () => CircularProgressIndicator(),
+      loading: () => const CustomLoadingIndicator(),
      error: (error, stack) => Text('Error: $error'),
    );
  }
--- a/lib/features/favorites/README.md
+++ b/lib/features/favorites/README.md
@@ -119,7 +119,7 @@ class FavoritesPage extends ConsumerWidget {
          return ProductTile(productId: productId);
        },
      ),
-      loading: () => CircularProgressIndicator(),
+      loading: () => const CustomLoadingIndicator(),
      error: (error, stack) => ErrorWidget(error),
    );
  }
--- a/lib/features/favorites/USAGE_EXAMPLES.md
+++ b/lib/features/favorites/USAGE_EXAMPLES.md
@@ -204,11 +204,11 @@ class FavoritesPage extends ConsumerWidget {
                },
              );
            },
-            loading: () => const Center(child: CircularProgressIndicator()),
+            loading: () => const Center(child: const CustomLoadingIndicator()),
            error: (error, stack) => Center(child: Text('Error: $error')),
          );
        },
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const Center(child: const CustomLoadingIndicator()),
        error: (error, stack) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
@@ -368,7 +368,7 @@ class FavoriteProductsList extends ConsumerWidget {
          );
        },
      ),
-      loading: () => const CircularProgressIndicator(),
+      loading: () => const const CustomLoadingIndicator(),
      error: (error, stack) => Text('Error: $error'),
    );
  }
@@ -417,7 +417,7 @@ class FavoritesPageWithRefresh extends ConsumerWidget {
              return ListTile(title: Text('Product: $productId'));
            },
          ),
-          loading: () => const Center(child: CircularProgressIndicator()),
+          loading: () => const Center(child: const CustomLoadingIndicator()),
          error: (error, stack) => Center(child: Text('Error: $error')),
        ),
      ),
@@ -466,7 +466,7 @@ class FavoriteButtonWithLoadingState extends ConsumerWidget {
      loading: () => const SizedBox(
        width: 24,
        height: 24,
-        child: CircularProgressIndicator(strokeWidth: 2),
+        child: CustomLoadingIndicator(strokeWidth: 2),
      ),
      error: (error, stack) => IconButton(
        icon: const Icon(Icons.error, color: Colors.grey),
--- a/lib/features/favorites/presentation/pages/favorites_page.dart
+++ b/lib/features/favorites/presentation/pages/favorites_page.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -319,9 +320,7 @@ class FavoritesPage extends HookConsumerWidget {
                              SizedBox(
                                width: 16,
                                height: 16,
-                                child: CircularProgressIndicator(
-                                  strokeWidth: 2,
-                                ),
+                                child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                              ),
                              SizedBox(width: 8),
                              Text('Đang tải...'),
--- a/lib/features/home/presentation/pages/home_page.dart
+++ b/lib/features/home/presentation/pages/home_page.dart
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:worker/core/router/app_router.dart';
 import 'package:worker/core/utils/extensions.dart';
@@ -82,7 +83,7 @@ class _HomePageState extends ConsumerState<HomePage> {
                  color: colorScheme.surfaceContainerHighest,
                  borderRadius: BorderRadius.circular(16),
                ),
-                child: const Center(child: CircularProgressIndicator()),
+                child: const CustomLoadingIndicator(),
              ),
              error: (error, stack) => Container(
                margin: const EdgeInsets.all(16),
--- a/lib/features/home/presentation/providers/member_card_provider.dart
+++ b/lib/features/home/presentation/providers/member_card_provider.dart
@@ -26,7 +26,7 @@ part 'member_card_provider.g.dart';
 ///
 /// memberCardAsync.when(
 ///   data: (memberCard) => MemberCardWidget(memberCard: memberCard),
-///   loading: () => CircularProgressIndicator(),
+///   loading: () => const CustomLoadingIndicator(),
 ///   error: (error, stack) => ErrorWidget(error),
 /// );
 /// ```
--- a/lib/features/home/presentation/providers/promotions_provider.dart
+++ b/lib/features/home/presentation/providers/promotions_provider.dart
@@ -28,7 +28,7 @@ const int _maxPromotions = 5;
 ///
 /// promotionsAsync.when(
 ///   data: (promotions) => PromotionSlider(promotions: promotions),
-///   loading: () => CircularProgressIndicator(),
+///   loading: () => const CustomLoadingIndicator(),
 ///   error: (error, stack) => ErrorWidget(error),
 /// );
 /// ```
--- a/lib/features/home/presentation/widgets/promotion_slider.dart
+++ b/lib/features/home/presentation/widgets/promotion_slider.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -126,7 +127,7 @@ class _PromotionCard extends StatelessWidget {
                placeholder: (context, url) => Container(
                  height: 140,
                  color: colorScheme.surfaceContainerHighest,
-                  child: const Center(child: CircularProgressIndicator()),
+                  child: const const CustomLoadingIndicator(),
                ),
                errorWidget: (context, url, error) => Container(
                  height: 140,
--- a/lib/features/invoices/presentation/pages/invoice_detail_page.dart
+++ b/lib/features/invoices/presentation/pages/invoice_detail_page.dart
@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:share_plus/share_plus.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/utils/extensions.dart';
@@ -66,7 +67,7 @@ class InvoiceDetailPage extends ConsumerWidget {
      ),
      body: invoiceAsync.when(
        data: (invoice) => _buildContent(context, invoice),
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const CustomLoadingIndicator(),
        error: (error, stack) => _buildErrorState(context, ref, error),
      ),
    );
--- a/lib/features/invoices/presentation/pages/invoices_page.dart
+++ b/lib/features/invoices/presentation/pages/invoices_page.dart
@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/router/app_router.dart';
 import 'package:worker/core/utils/extensions.dart';
@@ -74,7 +75,7 @@ class InvoicesPage extends ConsumerWidget {
            ),
          );
        },
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const CustomLoadingIndicator(),
        error: (error, stack) => _buildErrorState(context, ref, error),
      ),
    );
--- a/lib/features/loyalty/presentation/pages/points_history_page.dart
+++ b/lib/features/loyalty/presentation/pages/points_history_page.dart
@@ -8,6 +8,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:intl/intl.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/database/models/enums.dart';
 import 'package:worker/core/theme/colors.dart';
@@ -74,7 +75,7 @@ class PointsHistoryPage extends ConsumerWidget {
              ),
            );
          },
-          loading: () => const Center(child: CircularProgressIndicator()),
+          loading: () => const CustomLoadingIndicator(),
          error: (error, stack) => _buildErrorState(error, colorScheme),
        ),
      ),
--- a/lib/features/loyalty/presentation/pages/points_records_page.dart
+++ b/lib/features/loyalty/presentation/pages/points_records_page.dart
@@ -8,6 +8,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:intl/intl.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/features/loyalty/domain/entities/points_record.dart';
@@ -183,9 +184,7 @@ class PointsRecordsPage extends ConsumerWidget {
                  ),
                );
              },
-              loading: () => const Center(
-                child: CircularProgressIndicator(),
-              ),
+              loading: () => const CustomLoadingIndicator(),
              error: (error, stack) => RefreshIndicator(
                onRefresh: () async {
                  await ref.read(allPointsRecordsProvider.notifier).refresh();
--- a/lib/features/loyalty/presentation/widgets/reward_card.dart
+++ b/lib/features/loyalty/presentation/widgets/reward_card.dart
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:intl/intl.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/features/loyalty/domain/entities/gift_catalog.dart';
 import 'package:worker/features/loyalty/presentation/providers/loyalty_points_provider.dart';

@@ -150,8 +151,8 @@ class RewardCard extends ConsumerWidget {
              fit: BoxFit.cover,
              placeholder: (context, url) => Container(
                color: colorScheme.surfaceContainerHighest,
-                child: const Center(
-                  child: CircularProgressIndicator(strokeWidth: 2),
+                child: Center(
+                  child: CustomLoadingIndicator(color: Theme.of(context).colorScheme.primary, size: 40),
                ),
              ),
              errorWidget: (context, url, error) => Container(
--- a/lib/features/news/presentation/pages/news_detail_page.dart
+++ b/lib/features/news/presentation/pages/news_detail_page.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -60,7 +61,7 @@ class _NewsDetailPageState extends ConsumerState<NewsDetailPage> {
          }
          return _buildContent(context, article);
        },
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const const CustomLoadingIndicator(),
        error: (error, stack) => _buildErrorState(context, error.toString()),
      ),
    );
@@ -126,7 +127,7 @@ class _NewsDetailPageState extends ConsumerState<NewsDetailPage> {
            placeholder: (context, url) => Container(
              height: 250,
              color: colorScheme.surfaceContainerHighest,
-              child: const Center(child: CircularProgressIndicator()),
+              child: const const CustomLoadingIndicator(),
            ),
            errorWidget: (context, url, error) => Container(
              height: 250,
--- a/lib/features/news/presentation/pages/news_list_page.dart
+++ b/lib/features/news/presentation/pages/news_list_page.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -98,7 +99,7 @@ class _NewsListPageState extends ConsumerState<NewsListPage> {
              loading: () => const SliverToBoxAdapter(
                child: Padding(
                  padding: EdgeInsets.all(AppSpacing.md),
-                  child: Center(child: CircularProgressIndicator()),
+                  child: const CustomLoadingIndicator(),
                ),
              ),
              error: (error, stack) =>
@@ -158,7 +159,7 @@ class _NewsListPageState extends ConsumerState<NewsListPage> {
                );
              },
              loading: () => const SliverFillRemaining(
-                child: Center(child: CircularProgressIndicator()),
+                child: const CustomLoadingIndicator(),
              ),
              error: (error, stack) => SliverFillRemaining(
                child: _buildErrorState(error.toString()),
--- a/lib/features/news/presentation/widgets/featured_news_card.dart
+++ b/lib/features/news/presentation/widgets/featured_news_card.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:worker/core/constants/ui_constants.dart';
@@ -65,7 +66,7 @@ class FeaturedNewsCard extends StatelessWidget {
                placeholder: (context, url) => Container(
                  height: 200,
                  color: colorScheme.surfaceContainerHighest,
-                  child: const Center(child: CircularProgressIndicator()),
+                  child: const const CustomLoadingIndicator(),
                ),
                errorWidget: (context, url, error) => Container(
                  height: 200,
--- a/lib/features/news/presentation/widgets/news_card.dart
+++ b/lib/features/news/presentation/widgets/news_card.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:worker/core/constants/ui_constants.dart';
@@ -61,7 +62,7 @@ class NewsCard extends StatelessWidget {
                    child: SizedBox(
                      width: 20,
                      height: 20,
-                      child: CircularProgressIndicator(strokeWidth: 2),
+                      child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                    ),
                  ),
                ),
--- a/lib/features/news/presentation/widgets/related_article_card.dart
+++ b/lib/features/news/presentation/widgets/related_article_card.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:worker/core/constants/ui_constants.dart';
@@ -60,7 +61,7 @@ class RelatedArticleCard extends StatelessWidget {
                    child: SizedBox(
                      width: 16,
                      height: 16,
-                      child: CircularProgressIndicator(strokeWidth: 2),
+                      child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                    ),
                  ),
                ),
--- a/lib/features/notifications/presentation/pages/notifications_page.dart
+++ b/lib/features/notifications/presentation/pages/notifications_page.dart
@@ -9,6 +9,7 @@
 library;

 import 'package:flutter/material.dart' hide Notification;
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -52,7 +53,7 @@ class NotificationsPage extends HookConsumerWidget {
                  notifications,
                  selectedCategory,
                ),
-                loading: () => const Center(child: CircularProgressIndicator()),
+                loading: () => const const CustomLoadingIndicator(),
                error: (error, stack) =>
                    _buildErrorState(ref, selectedCategory),
              ),
--- a/lib/features/orders/presentation/pages/order_detail_page.dart
+++ b/lib/features/orders/presentation/pages/order_detail_page.dart
@@ -14,6 +14,7 @@ import 'package:worker/core/enums/status_color.dart';
 import 'package:worker/core/router/app_router.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/core/utils/extensions.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/features/account/domain/entities/address.dart';
 import 'package:worker/features/orders/domain/entities/order_detail.dart';
 import 'package:worker/features/orders/presentation/providers/orders_provider.dart';
@@ -135,7 +136,7 @@ class OrderDetailPage extends ConsumerWidget {
            ],
          );
        },
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const CustomLoadingIndicator(),
        error: (error, stack) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
@@ -1001,7 +1002,7 @@ class OrderDetailPage extends ConsumerWidget {
                            height: 60,
                            color: colorScheme.surfaceContainerHighest,
                            child: const Center(
-                              child: CircularProgressIndicator(strokeWidth: 2),
+                              child: CustomLoadingIndicator(size: 20),
                            ),
                          ),
                          errorWidget: (context, url, error) => Container(
@@ -1524,13 +1525,9 @@ class OrderDetailPage extends ConsumerWidget {
              SnackBar(
                content: Row(
                  children: [
-                    SizedBox(
-                      width: 20,
-                      height: 20,
-                      child: CircularProgressIndicator(
-                        strokeWidth: 2,
-                        valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).colorScheme.onPrimary),
-                      ),
+                    CustomLoadingIndicator(
+                      size: 20,
+                      color: Theme.of(context).colorScheme.onPrimary,
                    ),
                    const SizedBox(width: 12),
                    const Text('Đang hủy đơn hàng...'),
--- a/lib/features/orders/presentation/pages/orders_page.dart
+++ b/lib/features/orders/presentation/pages/orders_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -351,7 +352,7 @@ class _OrdersPageState extends ConsumerState<OrdersPage> {
  /// Build loading state
  Widget _buildLoadingState() {
    return const SliverFillRemaining(
-      child: Center(child: CircularProgressIndicator()),
+      child: const CustomLoadingIndicator(),
    );
  }

--- a/lib/features/orders/presentation/pages/payment_detail_page.dart
+++ b/lib/features/orders/presentation/pages/payment_detail_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
@@ -192,7 +193,7 @@ class PaymentDetailPage extends ConsumerWidget {
            ),
          );
        },
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const const CustomLoadingIndicator(),
        error: (error, stack) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
--- a/lib/features/orders/presentation/pages/payment_qr_page.dart
+++ b/lib/features/orders/presentation/pages/payment_qr_page.dart
@@ -10,6 +10,7 @@
 library;

 import 'dart:async';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -225,9 +226,7 @@ class PaymentQrPage extends HookConsumerWidget {
              border: Border.all(color: colorScheme.outlineVariant),
            ),
            child: isLoading
-                ? const Center(
-                    child: CircularProgressIndicator(),
-                  )
+                ? const const CustomLoadingIndicator()
                : qrCodeData != null && qrCodeData.isNotEmpty
                    ? QrImageView(
                        data: qrCodeData,
@@ -580,10 +579,7 @@ class PaymentQrPage extends HookConsumerWidget {
                  ? SizedBox(
                      width: 18,
                      height: 18,
-                      child: CircularProgressIndicator(
-                        strokeWidth: 2,
-                        valueColor: AlwaysStoppedAnimation<Color>(colorScheme.surface),
-                      ),
+                      child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                    )
                  : const FaIcon(FontAwesomeIcons.camera, size: 18),
              label: Text(
--- a/lib/features/orders/presentation/pages/payments_page.dart
+++ b/lib/features/orders/presentation/pages/payments_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -71,7 +72,7 @@ class PaymentsPage extends ConsumerWidget {
            ),
          );
        },
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const const CustomLoadingIndicator(),
        error: (error, stack) => _buildErrorState(context, ref, error),
      ),
    );
--- a/lib/features/price_policy/presentation/pages/price_policy_page.dart
+++ b/lib/features/price_policy/presentation/pages/price_policy_page.dart
@@ -1,4 +1,5 @@
 import 'dart:io';
+import 'package:worker/core/widgets/loading_indicator.dart';

 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -164,7 +165,7 @@ class _PricePolicyPageState extends ConsumerState<PricePolicyPage>
          ),
        );
      },
-      loading: () => const Center(child: CircularProgressIndicator()),
+      loading: () => const const CustomLoadingIndicator(),
      error: (error, stack) => Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
--- a/lib/features/products/README.md
+++ b/lib/features/products/README.md
@@ -81,7 +81,7 @@ UI components and state management.

 ### UI/UX Features
 - Pull-to-refresh support
- Loading states with CircularProgressIndicator
+- Loading states with CustomLoadingIndicator
 - Error states with retry button
 - Empty states with helpful messages
 - Vietnamese localization
--- a/lib/features/products/presentation/pages/product_detail_page.dart
+++ b/lib/features/products/presentation/pages/product_detail_page.dart
@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/features/favorites/presentation/providers/favorites_provider.dart';
@@ -262,9 +263,7 @@ class _ProductDetailPageState extends ConsumerState<ProductDetailPage> {
            ],
          );
        },
-        loading: () => Center(
-          child: CircularProgressIndicator(color: colorScheme.primary),
-        ),
+        loading: () => const CustomLoadingIndicator(),
        error: (error, stack) => Center(
          child: Padding(
            padding: const EdgeInsets.all(AppSpacing.xl),
--- a/lib/features/products/presentation/pages/products_page.dart
+++ b/lib/features/products/presentation/pages/products_page.dart
@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/router/app_router.dart';
 import 'package:worker/core/theme/colors.dart';
@@ -192,7 +193,7 @@ class ProductsPage extends ConsumerWidget {

  /// Build loading state
  Widget _buildLoadingState(ColorScheme colorScheme) {
-    return Center(child: CircularProgressIndicator(color: colorScheme.primary));
+    return const CustomLoadingIndicator();
  }

  /// Build error state
--- a/lib/features/products/presentation/pages/write_review_page.dart
+++ b/lib/features/products/presentation/pages/write_review_page.dart
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/features/products/domain/entities/product.dart';
@@ -186,7 +187,7 @@ class _WriteReviewPageState extends ConsumerState<WriteReviewPage> {

      body: productAsync.when(
        data: (product) => _buildForm(product),
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const CustomLoadingIndicator(),
        error: (error, stack) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
@@ -249,8 +250,8 @@ class _WriteReviewPageState extends ConsumerState<WriteReviewPage> {
                        width: 80,
                        height: 80,
                        color: colorScheme.surfaceContainerLowest,
-                        child: const Center(
-                          child: CircularProgressIndicator(strokeWidth: 2),
+                        child: Center(
+                          child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                        ),
                      ),
                      errorWidget: (context, url, error) => Container(
@@ -510,15 +511,7 @@ class _WriteReviewPageState extends ConsumerState<WriteReviewPage> {
                  elevation: 0,
                ),
                child: _isSubmitting
-                    ? SizedBox(
-                        width: 20,
-                        height: 20,
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                          valueColor:
-                              AlwaysStoppedAnimation<Color>(colorScheme.onPrimary),
-                        ),
-                      )
+                    ? CustomLoadingIndicator(color: colorScheme.onPrimary, size: 20)
                    : Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
--- a/lib/features/products/presentation/providers/product_filter_options_provider.dart
+++ b/lib/features/products/presentation/providers/product_filter_options_provider.dart
@@ -99,7 +99,7 @@ class FilterOption {
 ///
 /// filterOptionsAsync.when(
 ///   data: (options) => ProductFilterDrawer(options: options),
-///   loading: () => CircularProgressIndicator(),
+///   loading: () => const CustomLoadingIndicator(),
 ///   error: (error, stack) => ErrorWidget(error),
 /// );
 /// ```
--- a/lib/features/products/presentation/providers/products_provider.dart
+++ b/lib/features/products/presentation/providers/products_provider.dart
@@ -59,7 +59,7 @@ Future<ProductsRepository> productsRepository(Ref ref) async {
 ///
 /// productsAsync.when(
 ///   data: (products) => ProductGrid(products: products),
-///   loading: () => CircularProgressIndicator(),
+///   loading: () => const CustomLoadingIndicator(),
 ///   error: (error, stack) => ErrorWidget(error),
 /// );
 /// ```
@@ -251,7 +251,7 @@ Future<List<Product>> allProducts(Ref ref) async {
 ///
 /// productAsync.when(
 ///   data: (product) => ProductDetailView(product: product),
-///   loading: () => CircularProgressIndicator(),
+///   loading: () => const CustomLoadingIndicator(),
 ///   error: (error, stack) => ErrorWidget(error),
 /// );
 /// ```
--- a/lib/features/products/presentation/widgets/brand_filter_chips.dart
+++ b/lib/features/products/presentation/widgets/brand_filter_chips.dart
@@ -5,6 +5,7 @@ library;

 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/features/products/presentation/providers/product_filter_options_provider.dart';
 import 'package:worker/features/products/presentation/providers/product_filters_provider.dart';
@@ -105,10 +106,10 @@ class BrandFilterChips extends ConsumerWidget {
          ),
        );
      },
-      loading: () => const SizedBox(
+      loading: () => SizedBox(
        height: 48.0,
        child: Center(
-          child: CircularProgressIndicator(strokeWidth: 2.0),
+          child: CustomLoadingIndicator(color: Theme.of(context).colorScheme.primary, size: 40),
        ),
      ),
      error: (error, stack) => const SizedBox.shrink(),
--- a/lib/features/products/presentation/widgets/product_detail/product_tabs_section.dart
+++ b/lib/features/products/presentation/widgets/product_detail/product_tabs_section.dart
@@ -6,6 +6,7 @@ library;
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/features/products/domain/entities/product.dart';
@@ -469,9 +470,7 @@ class _ReviewsTab extends ConsumerWidget {
            loading: () => Center(
              child: Padding(
                padding: const EdgeInsets.all(40),
-                child: CircularProgressIndicator(
-                  color: colorScheme.primary,
-                ),
+                child: const CustomLoadingIndicator(),
              ),
            ),
            error: (error, stack) => _buildErrorState(colorScheme, error.toString()),
--- a/lib/features/products/presentation/widgets/product_filter_drawer.dart
+++ b/lib/features/products/presentation/widgets/product_filter_drawer.dart
@@ -6,6 +6,7 @@ library;
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/features/products/presentation/providers/product_filters_provider.dart';
@@ -209,11 +210,7 @@ class ProductFilterDrawer extends ConsumerWidget {
              ),
            ],
          ),
-          loading: () => Center(
-            child: CircularProgressIndicator(
-              valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
-            ),
-          ),
+          loading: () => const CustomLoadingIndicator(),
          error: (error, stack) => Center(
            child: Padding(
              padding: const EdgeInsets.all(AppSpacing.lg),
--- a/lib/features/products/presentation/widgets/product_grid.dart
+++ b/lib/features/products/presentation/widgets/product_grid.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/features/products/domain/entities/product.dart';
 import 'package:worker/features/products/presentation/widgets/product_card.dart';
@@ -80,9 +81,7 @@ class _ProductGridState extends State<ProductGrid> {
          return Center(
            child: Padding(
              padding: const EdgeInsets.all(AppSpacing.md),
-              child: CircularProgressIndicator(
-                color: colorScheme.primary,
-              ),
+              child: const CustomLoadingIndicator(),
            ),
          );
        }
--- a/lib/features/projects/presentation/pages/submission_create_page.dart
+++ b/lib/features/projects/presentation/pages/submission_create_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'dart:io';
+import 'package:worker/core/widgets/loading_indicator.dart';

 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
@@ -168,7 +169,7 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
-                  const CircularProgressIndicator(),
+                  const CustomLoadingIndicator(),
                  const SizedBox(height: 16),
                  Text(
                    'Đang tải thông tin dự án...',
@@ -641,7 +642,7 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
                const SizedBox(
                  width: 16,
                  height: 16,
-                  child: CircularProgressIndicator(strokeWidth: 2),
+                  child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                ),
                const SizedBox(width: 12),
                Text('Đang tải...', style: TextStyle(color: colorScheme.onSurfaceVariant)),
@@ -787,10 +788,7 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
                      child: SizedBox(
                        width: 24,
                        height: 24,
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                          valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
-                        ),
+                        child: CustomLoadingIndicator(color: Colors.white, size: 20),
                      ),
                    ),
                  ),
@@ -901,7 +899,7 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
                      child: SizedBox(
                        width: 16,
                        height: 16,
-                        child: CircularProgressIndicator(strokeWidth: 2),
+                        child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                      ),
                    ),
                  ),
@@ -931,10 +929,7 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
                      child: SizedBox(
                        width: 24,
                        height: 24,
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                          valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
-                        ),
+                        child: CustomLoadingIndicator(color: Colors.white, size: 20),
                      ),
                    ),
                  ),
@@ -1150,10 +1145,7 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
            ? const SizedBox(
                width: 24,
                height: 24,
-                child: CircularProgressIndicator(
-                  strokeWidth: 2,
-                  valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
-                ),
+                child: CustomLoadingIndicator(color: Colors.white, size: 20),
              )
            : const Row(
                mainAxisAlignment: MainAxisAlignment.center,
--- a/lib/features/projects/presentation/pages/submissions_page.dart
+++ b/lib/features/projects/presentation/pages/submissions_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -179,9 +180,7 @@ class SubmissionsPage extends ConsumerWidget {
                  ),
                );
              },
-              loading: () => const Center(
-                child: CircularProgressIndicator(),
-              ),
+              loading: () => const const CustomLoadingIndicator(),
              error: (error, stack) => RefreshIndicator(
                onRefresh: () async {
                  await ref.read(allSubmissionsProvider.notifier).refresh();
--- a/lib/features/promotions/presentation/pages/promotion_detail_page.dart
+++ b/lib/features/promotions/presentation/pages/promotion_detail_page.dart
@@ -9,6 +9,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
@@ -69,7 +70,7 @@ class _PromotionDetailPageState extends ConsumerState<PromotionDetailPage> {
          foregroundColor: AppColors.grey900,
          centerTitle: false,
        ),
-        body: const Center(child: CircularProgressIndicator()),
+        body: const const CustomLoadingIndicator(),
      ),
      error: (error, stack) => Scaffold(
        appBar: AppBar(
@@ -201,7 +202,7 @@ class _PromotionDetailPageState extends ConsumerState<PromotionDetailPage> {
      placeholder: (context, url) => Container(
        height: 200,
        color: AppColors.grey100,
-        child: const Center(child: CircularProgressIndicator()),
+        child: const const CustomLoadingIndicator(),
      ),
      errorWidget: (context, url, error) => Container(
        height: 200,
--- a/lib/features/promotions/presentation/pages/promotions_page.dart
+++ b/lib/features/promotions/presentation/pages/promotions_page.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -43,7 +44,7 @@ class PromotionsPage extends ConsumerWidget {
              child: promotionsAsync.when(
                data: (promotions) =>
                    _buildPromotionsContent(context, promotions),
-                loading: () => const Center(child: CircularProgressIndicator()),
+                loading: () => const const CustomLoadingIndicator(),
                error: (error, stack) => Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
--- a/lib/features/promotions/presentation/widgets/promotion_card.dart
+++ b/lib/features/promotions/presentation/widgets/promotion_card.dart
@@ -5,6 +5,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
@@ -57,7 +58,7 @@ class PromotionCard extends StatelessWidget {
              placeholder: (context, url) => Container(
                height: 150,
                color: AppColors.grey100,
-                child: const Center(child: CircularProgressIndicator()),
+                child: const const CustomLoadingIndicator(),
              ),
              errorWidget: (context, url, error) => Container(
                height: 150,
--- a/lib/features/quotes/presentation/pages/quotes_page.dart
+++ b/lib/features/quotes/presentation/pages/quotes_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:flutter/material.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:intl/intl.dart';
@@ -450,7 +451,7 @@ class _QuotesPageState extends ConsumerState<QuotesPage> {
  /// Build loading state
  Widget _buildLoadingState() {
    return const SliverFillRemaining(
-      child: Center(child: CircularProgressIndicator()),
+      child: const CustomLoadingIndicator(),
    );
  }

--- a/lib/features/showrooms/presentation/pages/design_request_create_page.dart
+++ b/lib/features/showrooms/presentation/pages/design_request_create_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'dart:async';
+import 'package:worker/core/widgets/loading_indicator.dart';

 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
@@ -810,10 +811,7 @@ class DesignRequestCreatePage extends HookConsumerWidget {
                            SizedBox(
                              height: 20,
                              width: 20,
-                              child: CircularProgressIndicator(
-                                strokeWidth: 2,
-                                color: colorScheme.surface,
-                              ),
+                              child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                            ),
                            const SizedBox(width: 12),
                            Text(
--- a/lib/features/showrooms/presentation/pages/design_request_detail_page.dart
+++ b/lib/features/showrooms/presentation/pages/design_request_detail_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
@@ -491,9 +492,7 @@ class DesignRequestDetailPage extends ConsumerWidget {
            ],
          ),
        ),
-        loading: () => const Center(
-          child: CircularProgressIndicator(),
-        ),
+        loading: () => const const CustomLoadingIndicator(),
        error: (error, stack) => Center(
          child: Padding(
            padding: const EdgeInsets.all(40),
@@ -560,7 +559,7 @@ class DesignRequestDetailPage extends ConsumerWidget {
                          placeholder: (context, url) => Container(
                            color: colorScheme.surfaceContainerHighest,
                            child: const Center(
-                              child: CircularProgressIndicator(strokeWidth: 2),
+                              child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                            ),
                          ),
                          errorWidget: (context, url, error) => Container(
--- a/lib/features/showrooms/presentation/pages/model_house_detail_page.dart
+++ b/lib/features/showrooms/presentation/pages/model_house_detail_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
@@ -85,9 +86,7 @@ class ModelHouseDetailPage extends ConsumerWidget {
            ],
          ),
        ),
-        loading: () => const Center(
-          child: CircularProgressIndicator(),
-        ),
+        loading: () => const const CustomLoadingIndicator(),
        error: (error, stack) => Center(
          child: Padding(
            padding: const EdgeInsets.all(40),
@@ -410,7 +409,7 @@ class ModelHouseDetailPage extends ConsumerWidget {
                          placeholder: (context, url) => Container(
                            color: colorScheme.surfaceContainerHighest,
                            child: const Center(
-                              child: CircularProgressIndicator(strokeWidth: 2),
+                              child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                            ),
                          ),
                          errorWidget: (context, url, error) => Container(
@@ -522,7 +521,7 @@ class _ImageViewerDialogState extends State<_ImageViewerDialog> {
                      imageUrl: widget.images[index].fileUrl,
                      fit: BoxFit.contain,
                      placeholder: (context, url) => const Center(
-                        child: CircularProgressIndicator(color: Colors.white),
+                        child: CustomLoadingIndicator(color: Colors.white, size: 40),
                      ),
                      errorWidget: (context, url, error) => const Icon(
                        Icons.error,
--- a/lib/features/showrooms/presentation/pages/model_houses_page.dart
+++ b/lib/features/showrooms/presentation/pages/model_houses_page.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
@@ -214,9 +215,7 @@ class _LibraryTab extends ConsumerWidget {
          ),
        );
      },
-      loading: () => const Center(
-        child: CircularProgressIndicator(),
-      ),
+      loading: () => const const CustomLoadingIndicator(),
      error: (error, stack) => Center(
        child: Padding(
          padding: const EdgeInsets.all(40),
@@ -288,7 +287,7 @@ class _LibraryCard extends StatelessWidget {
                          placeholder: (context, url) => Container(
                            height: 200,
                            color: colorScheme.surfaceContainerHighest,
-                            child: const Center(child: CircularProgressIndicator()),
+                            child: const const CustomLoadingIndicator(),
                          ),
                          errorWidget: (context, url, error) => Container(
                            height: 200,
@@ -425,9 +424,7 @@ class _DesignRequestsTab extends ConsumerWidget {
          ),
        );
      },
-      loading: () => const Center(
-        child: CircularProgressIndicator(),
-      ),
+      loading: () => const const CustomLoadingIndicator(),
      error: (error, stack) => Center(
        child: Padding(
          padding: const EdgeInsets.all(40),
--- a/lib/features/showrooms/presentation/widgets/image_viewer_dialog.dart
+++ b/lib/features/showrooms/presentation/widgets/image_viewer_dialog.dart
@@ -4,6 +4,7 @@
 library;

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:worker/features/showrooms/domain/entities/sample_project.dart';

@@ -70,7 +71,7 @@ class _ImageViewerDialogState extends State<ImageViewerDialog> {
                      imageUrl: widget.images[index].fileUrl,
                      fit: BoxFit.contain,
                      placeholder: (context, url) => const Center(
-                        child: CircularProgressIndicator(color: Colors.white),
+                        child: CustomLoadingIndicator(color: Colors.white, size: 40),
                      ),
                      errorWidget: (context, url, error) => const Icon(
                        Icons.error,