feat: loading indicator for genre and personalized pages

KRTirtho · Sep 16, 2023 · ffe8d9c · ffe8d9c
1 parent 5c5dbf6
commit ffe8d9c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 31 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,7 +1,6 @@
 import 'package:catcher/catcher.dart';
 import 'package:device_preview/device_preview.dart';
 import 'package:fl_query/fl_query.dart';
-import 'package:fl_query_devtools/fl_query_devtools.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';

diff --git a/lib/pages/home/genres.dart b/lib/pages/home/genres.dart
@@ -73,24 +73,27 @@ class GenrePage extends HookConsumerWidget {
               searchController: searchController,
               searchFocus: searchFocus,
             ),
-            Expanded(
-              child: ListView.builder(
-                controller: scrollController,
-                itemCount: categories.length,
-                itemBuilder: (context, index) {
-                  return AnimatedCrossFade(
-                    crossFadeState: searchController.text.isEmpty &&
-                            index == categories.length - 1 &&
-                            categoriesQuery.hasNextPage
-                        ? CrossFadeState.showFirst
-                        : CrossFadeState.showSecond,
-                    duration: const Duration(milliseconds: 300),
-                    firstChild: const ShimmerCategories(),
-                    secondChild: CategoryCard(categories[index]),
-                  );
-                },
+            if (!categoriesQuery.hasPageData)
+              const ShimmerCategories()
+            else
+              Expanded(
+                child: ListView.builder(
+                  controller: scrollController,
+                  itemCount: categories.length,
+                  itemBuilder: (context, index) {
+                    return AnimatedCrossFade(
+                      crossFadeState: searchController.text.isEmpty &&
+                              index == categories.length - 1 &&
+                              categoriesQuery.hasNextPage
+                          ? CrossFadeState.showFirst
+                          : CrossFadeState.showSecond,
+                      duration: const Duration(milliseconds: 300),
+                      firstChild: const ShimmerCategories(),
+                      secondChild: CategoryCard(categories[index]),
+                    );
+                  },
+                ),
               ),
-            ),
           ],
         ),
       ),

diff --git a/lib/pages/home/personalized.dart b/lib/pages/home/personalized.dart
@@ -6,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/album/album_card.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
+import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/waypoint.dart';
 import 'package:spotube/extensions/context.dart';
@@ -107,12 +108,9 @@ class PersonalizedPage extends HookConsumerWidget {
     final madeForUser = useQueries.views.get(ref, "made-for-x-hub");
 
     final newReleases = useQueries.album.newReleases(ref);
-    final userArtists = useQueries.artist
-            .followedByMeAll(ref)
-            .data
-            ?.map((s) => s.id!)
-            .toList() ??
-        const [];
+    final userArtistsQuery = useQueries.artist.followedByMeAll(ref);
+    final userArtists =
+        userArtistsQuery.data?.map((s) => s.id!).toList() ?? const [];
 
     final albums = useMemoized(
       () => newReleases.pages
@@ -128,13 +126,16 @@ class PersonalizedPage extends HookConsumerWidget {
 
     return ListView(
       children: [
-        PersonalizedItemCard(
-          playlists: playlists,
-          title: context.l10n.featured,
-          hasNextPage: featuredPlaylistsQuery.hasNextPage,
-          onFetchMore: featuredPlaylistsQuery.fetchNext,
-        ),
-        if (auth != null)
+        if (!featuredPlaylistsQuery.hasPageData)
+          const ShimmerCategories()
+        else
+          PersonalizedItemCard(
+            playlists: playlists,
+            title: context.l10n.featured,
+            hasNextPage: featuredPlaylistsQuery.hasNextPage,
+            onFetchMore: featuredPlaylistsQuery.fetchNext,
+          ),
+        if (auth != null && newReleases.hasPageData && userArtistsQuery.hasData)
           PersonalizedItemCard(
             albums: albums,
             title: context.l10n.new_releases,