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

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,7 +71,14 @@ class UserAlbums extends HookConsumerWidget {
                   ),
                 ),
                 const SizedBox(height: 20),
-                Wrap(
+                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,
@@ -88,6 +88,12 @@ class UserAlbums extends HookConsumerWidget {
                             ))
                         .toList(),
                   ),
+                  crossFadeState: albumsQuery.isLoading ||
+                          !albumsQuery.hasData ||
+                          searchText.value.isNotEmpty
+                      ? CrossFadeState.showFirst
+                      : CrossFadeState.showSecond,
+                ),
               ],
             ),
           ),

lib/components/library/user_playlists.dart

@@ -94,10 +94,15 @@ class UserPlaylists extends HookConsumerWidget {
                   ),
                 ),
               ),
-              if (playlistsQuery.isLoading || !playlistsQuery.hasData)
+              AnimatedCrossFade(
-                const Center(child: ShimmerPlaybuttonCard(count: 7))
+                duration: const Duration(milliseconds: 300),
-              else
+                crossFadeState:
-                Wrap(
+                    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))
                   ],
                 ),
+              ),
             ],
           ),
         ),

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(
+          Align(
-            alignment: Alignment.topCenter,
+            alignment: Alignment.topLeft,
-            child: ShimmerPlaybuttonCard(count: 7),
+            child: ShimmerPlaybuttonCard(count: shimmerCount),
           ),
         ],
       ),

lib/components/shared/shimmers/shimmer_playbutton_card.dart

@@ -99,8 +99,9 @@ class ShimmerPlaybuttonCard extends HookWidget {
       .4,
     );
 
-    return Row(
+    return Wrap(
-      mainAxisSize: MainAxisSize.min,
+      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),
         ]
       ],
     );

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 AnimatedCrossFade(
-              return const ShimmerCategories();
+              crossFadeState: searchText.value.isEmpty &&
-            }
+                      index == categories.length - 1 &&
-            return CategoryCard(categories[index]);
+                      categoriesQuery.hasNextPage
+                  ? CrossFadeState.showFirst
+                  : CrossFadeState.showSecond,
+              duration: const Duration(milliseconds: 300),
+              firstChild: const ShimmerCategories(),
+              secondChild: CategoryCard(categories[index]),
+            );
           },
         ),
       ),