From dc980b024edad3132e72cbb2f0087297a4b76469 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Tue, 14 Nov 2023 20:58:16 +0600 Subject: [PATCH] fix(genres): lag while scrolling --- lib/components/artist/artist_album_list.dart | 1 + lib/components/genre/category_card.dart | 1 + .../horizontal_playbutton_card_view.dart | 28 ++++++------- lib/pages/home/genres.dart | 25 ++++-------- lib/pages/home/personalized.dart | 3 ++ lib/pages/search/sections/albums.dart | 1 + lib/pages/search/sections/artists.dart | 1 + lib/pages/search/sections/playlists.dart | 1 + lib/pages/settings/settings.dart | 40 +++++++++---------- pubspec.lock | 8 ++++ pubspec.yaml | 1 + 11 files changed, 56 insertions(+), 54 deletions(-) diff --git a/lib/components/artist/artist_album_list.dart b/lib/components/artist/artist_album_list.dart index e075cd60..5114170c 100644 --- a/lib/components/artist/artist_album_list.dart +++ b/lib/components/artist/artist_album_list.dart @@ -29,6 +29,7 @@ class ArtistAlbumList extends HookConsumerWidget { final theme = Theme.of(context); return HorizontalPlaybuttonCardView( + isLoadingNextPage: albumsQuery.isLoadingNextPage, hasNextPage: albumsQuery.hasNextPage, items: albums, onFetchMore: albumsQuery.fetchNext, diff --git a/lib/components/genre/category_card.dart b/lib/components/genre/category_card.dart index d5809b5d..7f580157 100644 --- a/lib/components/genre/category_card.dart +++ b/lib/components/genre/category_card.dart @@ -42,6 +42,7 @@ class CategoryCard extends HookConsumerWidget { return HorizontalPlaybuttonCardView( title: Text(category.name!), + isLoadingNextPage: playlistQuery.isLoadingNextPage, hasNextPage: playlistQuery.hasNextPage, items: playlists, onFetchMore: playlistQuery.fetchNext, diff --git a/lib/components/shared/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart b/lib/components/shared/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart index f17a9714..dca77233 100644 --- a/lib/components/shared/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart +++ b/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 extends HookWidget { final Widget title; final List 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 || @@ -58,23 +61,18 @@ class HorizontalPlaybuttonCardView extends HookWidget { PointerDeviceKind.mouse, }, ), - child: ListView.builder( - controller: scrollController, + child: InfiniteList( + 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) { diff --git a/lib/pages/home/genres.dart b/lib/pages/home/genres.dart index 6861853d..84082811 100644 --- a/lib/pages/home/genres.dart +++ b/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( - controller: scrollController, + child: InfiniteList( + scrollController: scrollController, itemCount: categories.length, + onFetchData: categoriesQuery.fetchNext, + isLoading: categoriesQuery.isLoadingNextPage, + hasReachedMax: !categoriesQuery.hasNextPage, + loadingBuilder: (context) => const ShimmerCategories(), itemBuilder: (context, index) { - return AnimatedSwitcher( - 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]), - ); + return CategoryCard(categories[index]); }, ), ), diff --git a/lib/pages/home/personalized.dart b/lib/pages/home/personalized.dart index b596a820..16cfc3a8 100644 --- a/lib/pages/home/personalized.dart +++ b/lib/pages/home/personalized.dart @@ -56,6 +56,7 @@ class PersonalizedPage extends HookConsumerWidget { HorizontalPlaybuttonCardView( 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( 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: () {}, ); }) diff --git a/lib/pages/search/sections/albums.dart b/lib/pages/search/sections/albums.dart index 787a1924..8aa33feb 100644 --- a/lib/pages/search/sections/albums.dart +++ b/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, diff --git a/lib/pages/search/sections/artists.dart b/lib/pages/search/sections/artists.dart index 7abd5250..b736bf13 100644 --- a/lib/pages/search/sections/artists.dart +++ b/lib/pages/search/sections/artists.dart @@ -28,6 +28,7 @@ class SearchArtistsSection extends HookConsumerWidget { ); return HorizontalPlaybuttonCardView( + isLoadingNextPage: query.isLoadingNextPage, hasNextPage: query.hasNextPage, items: artists, onFetchMore: query.fetchNext, diff --git a/lib/pages/search/sections/playlists.dart b/lib/pages/search/sections/playlists.dart index 620e914b..47614a70 100644 --- a/lib/pages/search/sections/playlists.dart +++ b/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, diff --git a/lib/pages/settings/settings.dart b/lib/pages/settings/settings.dart index 84b51d4d..f14fb453 100644 --- a/lib/pages/settings/settings.dart +++ b/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( - controller: controller, - children: [ - const SettingsAccountSection(), - const SettingsLanguageRegionSection(), - const SettingsAppearanceSection(), - const SettingsPlaybackSection(), - const SettingsDownloadsSection(), - if (DesktopTools.platform.isDesktop) - const SettingsDesktopSection(), - if (!kIsWeb) const SettingsDevelopersSection(), - const SettingsAboutSection(), - Center( - child: FilledButton( - onPressed: preferencesNotifier.reset, - child: Text(context.l10n.restore_defaults), - ), + children: [ + const SettingsAccountSection(), + const SettingsLanguageRegionSection(), + const SettingsAppearanceSection(), + const SettingsPlaybackSection(), + const SettingsDownloadsSection(), + if (DesktopTools.platform.isDesktop) + const SettingsDesktopSection(), + if (!kIsWeb) const SettingsDevelopersSection(), + const SettingsAboutSection(), + Center( + child: FilledButton( + onPressed: preferencesNotifier.reset, + child: Text(context.l10n.restore_defaults), ), - const SizedBox(height: 10), - ], - ), + ), + const SizedBox(height: 10), + ], ), ), ), diff --git a/pubspec.lock b/pubspec.lock index 3d072e09..39e92028 100644 --- a/pubspec.lock +++ b/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: diff --git a/pubspec.yaml b/pubspec.yaml index f9c1155f..590aaae4 100644 --- a/pubspec.yaml +++ b/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