fi(loading): layout exceptions and overflow of loading animations

KRTirtho · May 11, 2023 · 38929fe · 38929fe
1 parent c232fcc
commit 38929fe
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 32 deletions.
diff --git a/lib/components/library/user_albums.dart b/lib/components/library/user_albums.dart
@@ -50,13 +50,6 @@ class UserAlbums extends HookConsumerWidget {
     if (auth == null) {
       return const AnonymousFallback();
     }
-    if (albumsQuery.isLoading || !albumsQuery.hasData) {
-      return Container(
-        alignment: Alignment.topLeft,
-        padding: const EdgeInsets.all(16.0),
-        child: const ShimmerPlaybuttonCard(count: 7),
-      );
-    }
 
     return RefreshIndicator(
       onRefresh: () async {
@@ -78,15 +71,28 @@ class UserAlbums extends HookConsumerWidget {
                   ),
                 ),
                 const SizedBox(height: 20),
-                Wrap(
-                  spacing: spacing, // gap between adjacent chips
-                  runSpacing: 20, // gap between lines
-                  alignment: WrapAlignment.center,
-                  children: albums
-                      .map((album) => AlbumCard(
-                            TypeConversionUtils.simpleAlbum_X_Album(album),
-                          ))
-                      .toList(),
+                AnimatedCrossFade(
+                  duration: const Duration(milliseconds: 300),
+                  firstChild: Container(
+                    alignment: Alignment.topLeft,
+                    padding: const EdgeInsets.all(16.0),
+                    child: const ShimmerPlaybuttonCard(count: 7),
+                  ),
+                  secondChild: Wrap(
+                    spacing: spacing, // gap between adjacent chips
+                    runSpacing: 20, // gap between lines
+                    alignment: WrapAlignment.center,
+                    children: albums
+                        .map((album) => AlbumCard(
+                              TypeConversionUtils.simpleAlbum_X_Album(album),
+                            ))
+                        .toList(),
+                  ),
+                  crossFadeState: albumsQuery.isLoading ||
+                          !albumsQuery.hasData ||
+                          searchText.value.isNotEmpty
+                      ? CrossFadeState.showFirst
+                      : CrossFadeState.showSecond,
                 ),
               ],
             ),

diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart
@@ -94,10 +94,15 @@ class UserPlaylists extends HookConsumerWidget {
                   ),
                 ),
               ),
-              if (playlistsQuery.isLoading || !playlistsQuery.hasData)
-                const Center(child: ShimmerPlaybuttonCard(count: 7))
-              else
-                Wrap(
+              AnimatedCrossFade(
+                duration: const Duration(milliseconds: 300),
+                crossFadeState:
+                    playlistsQuery.isLoading || !playlistsQuery.hasData
+                        ? CrossFadeState.showFirst
+                        : CrossFadeState.showSecond,
+                firstChild:
+                    const Center(child: ShimmerPlaybuttonCard(count: 7)),
+                secondChild: Wrap(
                   runSpacing: 10,
                   alignment: WrapAlignment.center,
                   children: [
@@ -111,6 +116,7 @@ class UserPlaylists extends HookConsumerWidget {
                     ...playlists.map((playlist) => PlaylistCard(playlist))
                   ],
                 ),
+              ),
             ],
           ),
         ),

diff --git a/lib/components/shared/shimmers/shimmer_categories.dart b/lib/components/shared/shimmers/shimmer_categories.dart
@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/extensions/theme.dart';
+import 'package:spotube/hooks/use_breakpoint_value.dart';
 
-class ShimmerCategories extends StatelessWidget {
+class ShimmerCategories extends HookWidget {
   const ShimmerCategories({Key? key}) : super(key: key);
 
   @override
@@ -15,8 +17,16 @@ class ShimmerCategories extends StatelessWidget {
     final shimmerBackgroundColor =
         shimmerTheme.shimmerBackgroundColor ?? Colors.grey;
 
+    final shimmerCount = useBreakpointValue(
+      sm: 2,
+      md: 3,
+      lg: 3,
+      xl: 6,
+      xxl: 8,
+    );
+
     return Padding(
-      padding: const EdgeInsets.all(8.0),
+      padding: const EdgeInsets.all(16),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.start,
@@ -31,9 +41,9 @@ class ShimmerCategories extends StatelessWidget {
             ),
           ),
           const SizedBox(height: 10),
-          const Align(
-            alignment: Alignment.topCenter,
-            child: ShimmerPlaybuttonCard(count: 7),
+          Align(
+            alignment: Alignment.topLeft,
+            child: ShimmerPlaybuttonCard(count: shimmerCount),
           ),
         ],
       ),

diff --git a/lib/components/shared/shimmers/shimmer_playbutton_card.dart b/lib/components/shared/shimmers/shimmer_playbutton_card.dart
@@ -99,8 +99,9 @@ class ShimmerPlaybuttonCard extends HookWidget {
       .4,
     );
 
-    return Row(
-      mainAxisSize: MainAxisSize.min,
+    return Wrap(
+      spacing: 20,
+      runSpacing: 20,
       children: [
         for (var i = 0; i < count; i++) ...[
           CustomPaint(
@@ -110,7 +111,6 @@ class ShimmerPlaybuttonCard extends HookWidget {
               foreground: fgColor!,
             ),
           ),
-          const SizedBox(width: 10),
         ]
       ],
     );

diff --git a/lib/pages/home/genres.dart b/lib/pages/home/genres.dart
@@ -74,10 +74,16 @@ class GenrePage extends HookConsumerWidget {
           itemCount: categories.length,
           shrinkWrap: true,
           itemBuilder: (context, index) {
-            if (searchText.value.isEmpty && index == categories.length - 1) {
-              return const ShimmerCategories();
-            }
-            return CategoryCard(categories[index]);
+            return AnimatedCrossFade(
+              crossFadeState: searchText.value.isEmpty &&
+                      index == categories.length - 1 &&
+                      categoriesQuery.hasNextPage
+                  ? CrossFadeState.showFirst
+                  : CrossFadeState.showSecond,
+              duration: const Duration(milliseconds: 300),
+              firstChild: const ShimmerCategories(),
+              secondChild: CategoryCard(categories[index]),
+            );
           },
         ),
       ),