Skip to content

Commit

Permalink
fix(genres): lag while scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@KRTirtho
KRTirtho committed Nov 14, 2023
1 parent 0e07506 commit dc980b0
Show file tree
Hide file tree
Showing 11 changed files with 56 additions and 54 deletions.
1 change: 1 addition & 0 deletions lib/components/artist/artist_album_list.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions lib/components/genre/category_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
28 changes: 13 additions & 15 deletions lib/components/shared/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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> ||
Expand Down Expand Up @@ -58,23 +61,18 @@ class HorizontalPlaybuttonCardView<T> 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) {
Expand Down
25 changes: 8 additions & 17 deletions lib/pages/home/genres.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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]);
},
),
),
Expand Down
3 changes: 3 additions & 0 deletions lib/pages/home/personalized.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
Expand All @@ -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,
),
Expand All @@ -81,6 +83,7 @@ class PersonalizedPage extends HookConsumerWidget {
items: playlists,
title: Text(item["name"] ?? ""),
hasNextPage: false,
isLoadingNextPage: false,
onFetchMore: () {},
);
})
Expand Down
1 change: 1 addition & 0 deletions lib/pages/search/sections/albums.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ class SearchAlbumsSection extends HookConsumerWidget {
);

return HorizontalPlaybuttonCardView(
isLoadingNextPage: query.isLoadingNextPage,
hasNextPage: query.hasNextPage,
items: albums,
onFetchMore: query.fetchNext,
Expand Down
1 change: 1 addition & 0 deletions lib/pages/search/sections/artists.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class SearchArtistsSection extends HookConsumerWidget {
);

return HorizontalPlaybuttonCardView<Artist>(
isLoadingNextPage: query.isLoadingNextPage,
hasNextPage: query.hasNextPage,
items: artists,
onFetchMore: query.fetchNext,
Expand Down
1 change: 1 addition & 0 deletions lib/pages/search/sections/playlists.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ class SearchPlaylistsSection extends HookConsumerWidget {
);

return HorizontalPlaybuttonCardView(
isLoadingNextPage: query.isLoadingNextPage,
hasNextPage: query.hasNextPage,
items: playlists,
onFetchMore: query.fetchNext,
Expand Down
40 changes: 18 additions & 22 deletions lib/pages/settings/settings.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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),
],
),
),
),
Expand Down
8 changes: 8 additions & 0 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
1 change: 1 addition & 0 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit dc980b0

Please sign in to comment.