feat: smoother list using fl_query and waypoint

fix(theme): remove splash effect
feat(artists-albums): horizontal paginated list instead of grid view page

lib/components/Artist/ArtistAlbumList.dart

@@ -0,0 +1,73 @@
+import 'package:fl_query_hooks/fl_query_hooks.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart' hide Page;
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Album/AlbumCard.dart';
+import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
+import 'package:spotube/components/Shared/Waypoint.dart';
+import 'package:spotube/models/Logger.dart';
+import 'package:spotube/provider/SpotifyDI.dart';
+import 'package:spotube/provider/SpotifyRequests.dart';
+
+class ArtistAlbumList extends HookConsumerWidget {
+  final String artistId;
+  ArtistAlbumList(
+    this.artistId, {
+    Key? key,
+  }) : super(key: key);
+
+  final logger = getLogger(ArtistAlbumList);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final scrollController = useScrollController();
+    final albumsQuery = useInfiniteQuery(
+      job: artistAlbumsQueryJob(artistId),
+      externalData: ref.watch(spotifyProvider),
+    );
+
+    final albums = useMemoized(() {
+      return albumsQuery.pages
+          .expand<Album>((page) => page?.items ?? const Iterable.empty())
+          .toList();
+    }, [albumsQuery.pages]);
+
+    final hasNextPage = albumsQuery.pages.isEmpty
+        ? false
+        : (albumsQuery.pages.last?.items?.length ?? 0) == 5;
+
+    return SizedBox(
+      height: 300,
+      child: ScrollConfiguration(
+        behavior: ScrollConfiguration.of(context).copyWith(
+          dragDevices: {
+            PointerDeviceKind.touch,
+            PointerDeviceKind.mouse,
+          },
+        ),
+        child: Scrollbar(
+          interactive: false,
+          controller: scrollController,
+          child: ListView.builder(
+            itemCount: albums.length,
+            controller: scrollController,
+            scrollDirection: Axis.horizontal,
+            itemBuilder: (context, index) {
+              if (index == albums.length - 1 && hasNextPage) {
+                return Waypoint(
+                  onEnter: () {
+                    albumsQuery.fetchNextPage();
+                  },
+                  child: const ShimmerPlaybuttonCard(count: 1),
+                );
+              }
+              return AlbumCard(albums[index]);
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/components/Artist/ArtistProfile.dart

@@ -1,10 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
-import 'package:spotube/components/Album/AlbumCard.dart';
+import 'package:spotube/components/Artist/ArtistAlbumList.dart';
 import 'package:spotube/components/Artist/ArtistCard.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerArtistProfile.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
@@ -28,7 +27,6 @@ class ArtistProfile extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     SpotifyApi spotify = ref.watch(spotifyProvider);
-    final scrollController = useScrollController();
     final parentScrollController = useScrollController();
     final textTheme = Theme.of(context).textTheme;
     final chipTextVariant = useBreakpointValue(
@@ -55,7 +53,7 @@ class ArtistProfile extends HookConsumerWidget {
     final isFollowingSnapshot =
         ref.watch(currentUserFollowsArtistQuery(artistId));
     final topTracksSnapshot = ref.watch(artistTopTracksQuery(artistId));
-    final albums = ref.watch(artistAlbumsQuery(artistId));
+
     final relatedArtists = ref.watch(artistRelatedArtistsQuery(artistId));
 
     return SafeArea(
@@ -263,46 +261,12 @@ class ArtistProfile extends HookConsumerWidget {
                         child: CircularProgressIndicator.adaptive()),
                   ),
                   const SizedBox(height: 50),
-                  Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Text(
-                        "Albums",
-                        style: Theme.of(context).textTheme.headline4,
-                      ),
-                      TextButton(
-                        child: const Text("See All"),
-                        onPressed: () {
-                          GoRouter.of(context).push(
-                            "/artist-album/$artistId",
-                            extra: data.name ?? "KRTX",
-                          );
-                        },
-                      )
-                    ],
+                  Text(
+                    "Albums",
+                    style: Theme.of(context).textTheme.headline4,
                   ),
                   const SizedBox(height: 10),
-                  albums.when(
-                    data: (albums) {
-                      return Scrollbar(
-                        controller: scrollController,
-                        child: SingleChildScrollView(
-                          controller: scrollController,
-                          scrollDirection: Axis.horizontal,
-                          child: Row(
-                            mainAxisAlignment: MainAxisAlignment.spaceAround,
-                            children: albums.items
-                                    ?.map((album) => AlbumCard(album))
-                                    .toList() ??
-                                [],
-                          ),
-                        ),
-                      );
-                    },
-                    error: (error, stackTrack) =>
-                        Text("Failed to get Artist albums $error"),
-                    loading: () => const CircularProgressIndicator.adaptive(),
-                  ),
+                  ArtistAlbumList(artistId),
                   const SizedBox(height: 20),
                   Text(
                     "Fans also likes",

lib/components/Category/CategoryCard.dart

@@ -1,14 +1,14 @@
+import 'package:fl_query_hooks/fl_query_hooks.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart' hide Page;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
-import 'package:spotube/components/Shared/NotFound.dart';
-import 'package:spotube/hooks/usePaginatedFutureProvider.dart';
+import 'package:spotube/components/Shared/Waypoint.dart';
 import 'package:spotube/models/Logger.dart';
+import 'package:spotube/provider/SpotifyDI.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
 
 class CategoryCard extends HookConsumerWidget {
@@ -25,29 +25,20 @@ class CategoryCard extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final scrollController = useScrollController();
-    final mounted = useIsMounted();
-
-    final pagingController =
-        usePaginatedFutureProvider<Page<PlaylistSimple>, int, PlaylistSimple>(
-      (pageKey) => categoryPlaylistsQuery(
-        [
-          category.id,
-          pageKey,
-        ].join("/"),
-      ),
-      ref: ref,
-      firstPageKey: 0,
-      onData: (page, pagingController, pageKey) {
-        if (playlists != null && playlists?.isNotEmpty == true && mounted()) {
-          return pagingController.appendLastPage(playlists!.toList());
-        }
-        if (page.isLast && page.items != null) {
-          pagingController.appendLastPage(page.items!.toList());
-        } else if (page.items != null) {
-          pagingController.appendPage(page.items!.toList(), page.nextOffset);
-        }
-      },
+    final spotify = ref.watch(spotifyProvider);
+    final playlistQuery = useInfiniteQuery(
+      job: categoryPlaylistsQueryJob(category.id!),
+      externalData: spotify,
     );
+    final hasNextPage = playlistQuery.pages.isEmpty
+        ? false
+        : (playlistQuery.pages.last?.items?.length ?? 0) == 5;
+
+    final playlists = playlistQuery.pages
+        .expand(
+          (page) => page?.items ?? const Iterable.empty(),
+        )
+        .toList();
 
     return Column(
       children: [
@@ -62,8 +53,8 @@ class CategoryCard extends HookConsumerWidget {
             ],
           ),
         ),
-        pagingController.error != null
-            ? const Text("Something Went Wrong")
+        playlistQuery.hasError
+            ? Text("Something Went Wrong\n${playlistQuery.errors.first}")
             : SizedBox(
                 height: 245,
                 child: ScrollConfiguration(
@@ -76,26 +67,21 @@ class CategoryCard extends HookConsumerWidget {
                   child: Scrollbar(
                     controller: scrollController,
                     interactive: false,
-                    child: PagedListView<int, PlaylistSimple>(
-                      shrinkWrap: true,
-                      pagingController: pagingController,
-                      scrollController: scrollController,
+                    child: ListView.builder(
                       scrollDirection: Axis.horizontal,
-                      builderDelegate:
-                          PagedChildBuilderDelegate<PlaylistSimple>(
-                        noItemsFoundIndicatorBuilder: (context) {
-                          return const NotFound();
-                        },
-                        firstPageProgressIndicatorBuilder: (context) {
-                          return const ShimmerPlaybuttonCard();
-                        },
-                        newPageProgressIndicatorBuilder: (context) {
-                          return const ShimmerPlaybuttonCard();
-                        },
-                        itemBuilder: (context, playlist, index) {
-                          return PlaylistCard(playlist);
-                        },
-                      ),
+                      shrinkWrap: true,
+                      itemCount: playlists.length,
+                      itemBuilder: (context, index) {
+                        if (index == playlists.length - 1 && hasNextPage) {
+                          return Waypoint(
+                            onEnter: () {
+                              playlistQuery.fetchNextPage();
+                            },
+                            child: const ShimmerPlaybuttonCard(count: 1),
+                          );
+                        }
+                        return PlaylistCard(playlists[index]);
+                      },
                     ),
                   ),
                 ),