feat(about-us): add shimmer effect on about us view (#224)

* feat: add shimmer effect on about us view * refactor: format file * refactor: refactor code by using another widgets * refactor(about-us): remove shimmer wrapper --------- Co-authored-by: Szymon Kowaliński <szymon@kowalinski.dev>
Solvro · Sep 24, 2024 · badd28a · badd28a
1 parent ac414e8
commit badd28a
Showing 1 changed file with 43 additions and 6 deletions.
diff --git a/lib/features/about_us_view/about_us_view.dart b/lib/features/about_us_view/about_us_view.dart
@@ -3,10 +3,11 @@ import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
 import "../../config/ui_config.dart";
-import "../../theme/app_theme.dart";
 import "../../utils/context_extensions.dart";
 import "../../widgets/detail_views/detail_view_app_bar.dart";
 import "../../widgets/detail_views/sliver_header_section.dart";
+import "../../widgets/loading_widgets/scrolable_loader_builder.dart";
+import "../../widgets/loading_widgets/simple_previews/preview_card_loading.dart";
 import "../../widgets/my_error_widget.dart";
 import "models/about_us_details.dart";
 import "repository/about_us_repository.dart";
@@ -35,7 +36,6 @@ class _AboutUsView extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final state = ref.watch(aboutUsRepositoryProvider);
-
     return switch (state) {
       AsyncError(:final error) => MyErrorWidget(error),
       AsyncValue(:final AboutUsDetails value) => CustomScrollView(
@@ -65,11 +65,48 @@ class _AboutUsView extends ConsumerWidget {
             ),
           ],
         ),
-      _ => Center(
-          child: CircularProgressIndicator(
-            color: context.colorTheme.orangePomegranade,
+      _ => const _AboustUsLoading(),
+    };
+  }
+}
+
+class _AboustUsLoading extends StatelessWidget {
+  const _AboustUsLoading();
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      physics: const NeverScrollableScrollPhysics(),
+      children: [
+        const PreviewCardLoading(
+          width: double.infinity,
+          height: 300,
+        ),
+        const Padding(
+          padding: EdgeInsets.all(AboutUsConfig.defaultPadding),
+          child: PreviewCardLoading(
+            width: double.infinity,
+            height: 150,
           ),
         ),
-    };
+        Padding(
+          padding: const EdgeInsets.all(AboutUsConfig.defaultPadding),
+          child: SizedBox(
+            height: MediaQuery.of(context).size.height / 4,
+            child: ScrollableLoaderBuilder(
+              itemsSpacing: 8,
+              scrollDirection: Axis.vertical,
+              mainAxisItemSize: 16,
+              itemBuilder: (BuildContext context, int index) {
+                return const PreviewCardLoading(
+                  width: double.infinity,
+                  height: AboutUsConfig.photoSize,
+                );
+              },
+            ),
+          ),
+        ),
+      ],
+    );
   }
 }