fix(genres): lag while scrolling

lib/components/artist/artist_album_list.dart

@@ -29,6 +29,7 @@ class ArtistAlbumList extends HookConsumerWidget {
     final theme = Theme.of(context);
 
     return HorizontalPlaybuttonCardView<Album>(
+      isLoadingNextPage: albumsQuery.isLoadingNextPage,
       hasNextPage: albumsQuery.hasNextPage,
       items: albums,
       onFetchMore: albumsQuery.fetchNext,

lib/components/genre/category_card.dart

@@ -42,6 +42,7 @@ class CategoryCard extends HookConsumerWidget {
 
     return HorizontalPlaybuttonCardView<PlaylistSimple>(
       title: Text(category.name!),
+      isLoadingNextPage: playlistQuery.isLoadingNextPage,
       hasNextPage: playlistQuery.hasNextPage,
       items: playlists,
       onFetchMore: playlistQuery.fetchNext,

lib/components/shared/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart

@@ -7,19 +7,22 @@ import 'package:spotube/components/album/album_card.dart';
 import 'package:spotube/components/artist/artist_card.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
-import 'package:spotube/components/shared/waypoint.dart';
 import 'package:spotube/hooks/utils/use_breakpoint_value.dart';
+import 'package:very_good_infinite_list/very_good_infinite_list.dart';
 
 class HorizontalPlaybuttonCardView<T> extends HookWidget {
   final Widget title;
   final List<T> items;
   final VoidCallback onFetchMore;
+  final bool isLoadingNextPage;
   final bool hasNextPage;
+
   const HorizontalPlaybuttonCardView({
     required this.title,
     required this.items,
     required this.hasNextPage,
     required this.onFetchMore,
+    required this.isLoadingNextPage,
     Key? key,
   })  : assert(
           items is List<PlaylistSimple> ||
@@ -58,23 +61,18 @@ class HorizontalPlaybuttonCardView<T> extends HookWidget {
                   PointerDeviceKind.mouse,
                 },
               ),
-              child: ListView.builder(
+              child: InfiniteList(
-                  controller: scrollController,
+                  scrollController: scrollController,
                   scrollDirection: Axis.horizontal,
                   padding: const EdgeInsets.symmetric(vertical: 8.0),
-                  itemCount: items.length + 1,
+                  itemCount: items.length,
+                  onFetchData: onFetchMore,
+                  loadingBuilder: (context) => const ShimmerPlaybuttonCard(),
+                  emptyBuilder: (context) =>
+                      const ShimmerPlaybuttonCard(count: 5),
+                  isLoading: isLoadingNextPage,
+                  hasReachedMax: !hasNextPage,
                   itemBuilder: (context, index) {
-                    if (index == items.length) {
-                      if (!hasNextPage) {
-                        return const SizedBox.shrink();
-                      }
-                      return Waypoint(
-                        controller: scrollController,
-                        onTouchEdge: onFetchMore,
-                        isGrid: true,
-                        child: const ShimmerPlaybuttonCard(),
-                      );
-                    }
                     final item = items[index];
 
                     return switch (item.runtimeType) {

lib/pages/home/genres.dart

@@ -7,12 +7,12 @@ import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/genre/category_card.dart';
 import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
-import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
 import 'package:spotube/components/shared/waypoint.dart';
 
 import 'package:spotube/provider/user_preferences_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
+import 'package:very_good_infinite_list/very_good_infinite_list.dart';
 
 class GenrePage extends HookConsumerWidget {
   const GenrePage({Key? key}) : super(key: key);
@@ -79,24 +79,15 @@ class GenrePage extends HookConsumerWidget {
               const ShimmerCategories()
             else
               Expanded(
-                child: ListView.builder(
+                child: InfiniteList(
-                  controller: scrollController,
+                  scrollController: scrollController,
                   itemCount: categories.length,
+                  onFetchData: categoriesQuery.fetchNext,
+                  isLoading: categoriesQuery.isLoadingNextPage,
+                  hasReachedMax: !categoriesQuery.hasNextPage,
+                  loadingBuilder: (context) => const ShimmerCategories(),
                   itemBuilder: (context, index) {
-                    return AnimatedSwitcher(
+                    return CategoryCard(categories[index]);
-                      transitionBuilder: (child, animation) {
-                        return FadeTransition(
-                          opacity: animation,
-                          child: child,
-                        );
-                      },
-                      duration: const Duration(milliseconds: 300),
-                      child: searchController.text.isEmpty &&
-                              index == categories.length - 1 &&
-                              categoriesQuery.hasNextPage
-                          ? const ShimmerCategories()
-                          : CategoryCard(categories[index]),
-                    );
                   },
                 ),
               ),

lib/pages/home/personalized.dart

@@ -56,6 +56,7 @@ class PersonalizedPage extends HookConsumerWidget {
           HorizontalPlaybuttonCardView<PlaylistSimple>(
             items: playlists.toList(),
             title: Text(context.l10n.featured),
+            isLoadingNextPage: featuredPlaylistsQuery.isLoadingNextPage,
             hasNextPage: featuredPlaylistsQuery.hasNextPage,
             onFetchMore: featuredPlaylistsQuery.fetchNext,
           ),
@@ -66,6 +67,7 @@ class PersonalizedPage extends HookConsumerWidget {
           HorizontalPlaybuttonCardView<Album>(
             items: albums,
             title: Text(context.l10n.new_releases),
+            isLoadingNextPage: newReleases.isLoadingNextPage,
             hasNextPage: newReleases.hasNextPage,
             onFetchMore: newReleases.fetchNext,
           ),
@@ -81,6 +83,7 @@ class PersonalizedPage extends HookConsumerWidget {
             items: playlists,
             title: Text(item["name"] ?? ""),
             hasNextPage: false,
+            isLoadingNextPage: false,
             onFetchMore: () {},
           );
         })

lib/pages/search/sections/albums.dart

@@ -30,6 +30,7 @@ class SearchAlbumsSection extends HookConsumerWidget {
     );
 
     return HorizontalPlaybuttonCardView(
+      isLoadingNextPage: query.isLoadingNextPage,
       hasNextPage: query.hasNextPage,
       items: albums,
       onFetchMore: query.fetchNext,

lib/pages/search/sections/artists.dart

@@ -28,6 +28,7 @@ class SearchArtistsSection extends HookConsumerWidget {
     );
 
     return HorizontalPlaybuttonCardView<Artist>(
+      isLoadingNextPage: query.isLoadingNextPage,
       hasNextPage: query.hasNextPage,
       items: artists,
       onFetchMore: query.fetchNext,

lib/pages/search/sections/playlists.dart

@@ -26,6 +26,7 @@ class SearchPlaylistsSection extends HookConsumerWidget {
     );
 
     return HorizontalPlaybuttonCardView(
+      isLoadingNextPage: query.isLoadingNextPage,
       hasNextPage: query.hasNextPage,
       items: playlists,
       onFetchMore: query.fetchNext,

lib/pages/settings/settings.dart

@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/pages/settings/sections/about.dart';
@@ -37,29 +36,26 @@ class SettingsPage extends HookConsumerWidget {
             Flexible(
               child: Container(
                 constraints: const BoxConstraints(maxWidth: 1366),
-                child: InterScrollbar(
+                child: ListView(
                   controller: controller,
-                  child: ListView(
+                  children: [
-                    controller: controller,
+                    const SettingsAccountSection(),
-                    children: [
+                    const SettingsLanguageRegionSection(),
-                      const SettingsAccountSection(),
+                    const SettingsAppearanceSection(),
-                      const SettingsLanguageRegionSection(),
+                    const SettingsPlaybackSection(),
-                      const SettingsAppearanceSection(),
+                    const SettingsDownloadsSection(),
-                      const SettingsPlaybackSection(),
+                    if (DesktopTools.platform.isDesktop)
-                      const SettingsDownloadsSection(),
+                      const SettingsDesktopSection(),
-                      if (DesktopTools.platform.isDesktop)
+                    if (!kIsWeb) const SettingsDevelopersSection(),
-                        const SettingsDesktopSection(),
+                    const SettingsAboutSection(),
-                      if (!kIsWeb) const SettingsDevelopersSection(),
+                    Center(
-                      const SettingsAboutSection(),
+                      child: FilledButton(
-                      Center(
+                        onPressed: preferencesNotifier.reset,
-                        child: FilledButton(
+                        child: Text(context.l10n.restore_defaults),
-                          onPressed: preferencesNotifier.reset,
-                          child: Text(context.l10n.restore_defaults),
-                        ),
                       ),
-                      const SizedBox(height: 10),
+                    ),
-                    ],
+                    const SizedBox(height: 10),
-                  ),
+                  ],
                 ),
               ),
             ),

pubspec.lock

@@ -2180,6 +2180,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.2"
+  very_good_infinite_list:
+    dependency: "direct main"
+    description:
+      name: very_good_infinite_list
+      sha256: "6f5ad429edbce6084e1c600e56b26b1de8c6b138e8e8fc2de41b686166029aa5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.1"
   visibility_detector:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -110,6 +110,7 @@ dependencies:
     git:
       url: https://github.com/thielepaul/flutter-draggable-scrollbar.git
       ref: cfd570035bf393de541d32e9b28808b5d7e602df
+  very_good_infinite_list: ^0.7.1
 
 dev_dependencies:
   build_runner: ^2.3.2