From 38929fed6e7445f61d85835a60f5c8608ba6cabe Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Thu, 11 May 2023 22:43:21 +0600 Subject: [PATCH] fi(loading): layout exceptions and overflow of loading animations --- lib/components/library/user_albums.dart | 38 +++++++++++-------- lib/components/library/user_playlists.dart | 14 +++++-- .../shared/shimmers/shimmer_categories.dart | 20 +++++++--- .../shimmers/shimmer_playbutton_card.dart | 6 +-- lib/pages/home/genres.dart | 14 +++++-- 5 files changed, 60 insertions(+), 32 deletions(-) diff --git a/lib/components/library/user_albums.dart b/lib/components/library/user_albums.dart index fb722cc5..af36448f 100644 --- a/lib/components/library/user_albums.dart +++ b/lib/components/library/user_albums.dart @@ -50,13 +50,6 @@ class UserAlbums extends HookConsumerWidget { if (auth == null) { return const AnonymousFallback(); } - if (albumsQuery.isLoading || !albumsQuery.hasData) { - return Container( - alignment: Alignment.topLeft, - padding: const EdgeInsets.all(16.0), - child: const ShimmerPlaybuttonCard(count: 7), - ); - } return RefreshIndicator( onRefresh: () async { @@ -78,15 +71,28 @@ class UserAlbums extends HookConsumerWidget { ), ), const SizedBox(height: 20), - Wrap( - spacing: spacing, // gap between adjacent chips - runSpacing: 20, // gap between lines - alignment: WrapAlignment.center, - children: albums - .map((album) => AlbumCard( - TypeConversionUtils.simpleAlbum_X_Album(album), - )) - .toList(), + AnimatedCrossFade( + duration: const Duration(milliseconds: 300), + firstChild: Container( + alignment: Alignment.topLeft, + padding: const EdgeInsets.all(16.0), + child: const ShimmerPlaybuttonCard(count: 7), + ), + secondChild: Wrap( + spacing: spacing, // gap between adjacent chips + runSpacing: 20, // gap between lines + alignment: WrapAlignment.center, + children: albums + .map((album) => AlbumCard( + TypeConversionUtils.simpleAlbum_X_Album(album), + )) + .toList(), + ), + crossFadeState: albumsQuery.isLoading || + !albumsQuery.hasData || + searchText.value.isNotEmpty + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, ), ], ), diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart index 4e6e551c..3d23435d 100644 --- a/lib/components/library/user_playlists.dart +++ b/lib/components/library/user_playlists.dart @@ -94,10 +94,15 @@ class UserPlaylists extends HookConsumerWidget { ), ), ), - if (playlistsQuery.isLoading || !playlistsQuery.hasData) - const Center(child: ShimmerPlaybuttonCard(count: 7)) - else - Wrap( + AnimatedCrossFade( + duration: const Duration(milliseconds: 300), + crossFadeState: + playlistsQuery.isLoading || !playlistsQuery.hasData + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, + firstChild: + const Center(child: ShimmerPlaybuttonCard(count: 7)), + secondChild: Wrap( runSpacing: 10, alignment: WrapAlignment.center, children: [ @@ -111,6 +116,7 @@ class UserPlaylists extends HookConsumerWidget { ...playlists.map((playlist) => PlaylistCard(playlist)) ], ), + ), ], ), ), diff --git a/lib/components/shared/shimmers/shimmer_categories.dart b/lib/components/shared/shimmers/shimmer_categories.dart index 163292b4..d93b70a4 100644 --- a/lib/components/shared/shimmers/shimmer_categories.dart +++ b/lib/components/shared/shimmers/shimmer_categories.dart @@ -1,9 +1,11 @@ import 'package:flutter/material.dart'; +import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart'; import 'package:spotube/extensions/theme.dart'; +import 'package:spotube/hooks/use_breakpoint_value.dart'; -class ShimmerCategories extends StatelessWidget { +class ShimmerCategories extends HookWidget { const ShimmerCategories({Key? key}) : super(key: key); @override @@ -15,8 +17,16 @@ class ShimmerCategories extends StatelessWidget { final shimmerBackgroundColor = shimmerTheme.shimmerBackgroundColor ?? Colors.grey; + final shimmerCount = useBreakpointValue( + sm: 2, + md: 3, + lg: 3, + xl: 6, + xxl: 8, + ); + return Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, @@ -31,9 +41,9 @@ class ShimmerCategories extends StatelessWidget { ), ), const SizedBox(height: 10), - const Align( - alignment: Alignment.topCenter, - child: ShimmerPlaybuttonCard(count: 7), + Align( + alignment: Alignment.topLeft, + child: ShimmerPlaybuttonCard(count: shimmerCount), ), ], ), diff --git a/lib/components/shared/shimmers/shimmer_playbutton_card.dart b/lib/components/shared/shimmers/shimmer_playbutton_card.dart index 49703622..48671aa6 100644 --- a/lib/components/shared/shimmers/shimmer_playbutton_card.dart +++ b/lib/components/shared/shimmers/shimmer_playbutton_card.dart @@ -99,8 +99,9 @@ class ShimmerPlaybuttonCard extends HookWidget { .4, ); - return Row( - mainAxisSize: MainAxisSize.min, + return Wrap( + spacing: 20, + runSpacing: 20, children: [ for (var i = 0; i < count; i++) ...[ CustomPaint( @@ -110,7 +111,6 @@ class ShimmerPlaybuttonCard extends HookWidget { foreground: fgColor!, ), ), - const SizedBox(width: 10), ] ], ); diff --git a/lib/pages/home/genres.dart b/lib/pages/home/genres.dart index 248b1d6c..7ea67e8b 100644 --- a/lib/pages/home/genres.dart +++ b/lib/pages/home/genres.dart @@ -74,10 +74,16 @@ class GenrePage extends HookConsumerWidget { itemCount: categories.length, shrinkWrap: true, itemBuilder: (context, index) { - if (searchText.value.isEmpty && index == categories.length - 1) { - return const ShimmerCategories(); - } - return CategoryCard(categories[index]); + return AnimatedCrossFade( + crossFadeState: searchText.value.isEmpty && + index == categories.length - 1 && + categoriesQuery.hasNextPage + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, + duration: const Duration(milliseconds: 300), + firstChild: const ShimmerCategories(), + secondChild: CategoryCard(categories[index]), + ); }, ), ),