kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 16:05:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: loading indicator for genre and personalized pages

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-09-16 13:08:32 +06:00
parent 5c5dbf69ec
commit ffe8d9ca6d
3 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/main.dart
View File

@ -1,7 +1,6 @@
import 'package:catcher/catcher.dart'; import 'package:catcher/catcher.dart';
import 'package:device_preview/device_preview.dart'; import 'package:device_preview/device_preview.dart';
import 'package:fl_query/fl_query.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/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';

37
lib/pages/home/genres.dart
View File

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

27
lib/pages/home/personalized.dart
View File

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