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

fi(loading): layout exceptions and overflow of loading animations

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-05-11 22:43:21 +06:00
parent c232fcc6dd
commit 38929fed6e
5 changed files with 60 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
lib/components/library/user_albums.dart
View File

@ -50,13 +50,6 @@ class UserAlbums extends HookConsumerWidget {
if (auth == null) { if (auth == null) {
return const AnonymousFallback(); 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( return RefreshIndicator(
onRefresh: () async { onRefresh: () async {
@ -78,15 +71,28 @@ class UserAlbums extends HookConsumerWidget {
), ),
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
Wrap( AnimatedCrossFade(
spacing: spacing, // gap between adjacent chips duration: const Duration(milliseconds: 300),
runSpacing: 20, // gap between lines firstChild: Container(
alignment: WrapAlignment.center, alignment: Alignment.topLeft,
children: albums padding: const EdgeInsets.all(16.0),
.map((album) => AlbumCard( child: const ShimmerPlaybuttonCard(count: 7),
TypeConversionUtils.simpleAlbum_X_Album(album), ),
)) secondChild: Wrap(
.toList(), 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,
), ),
], ],
), ),

14
lib/components/library/user_playlists.dart
View File

@ -94,10 +94,15 @@ class UserPlaylists extends HookConsumerWidget {
), ),
), ),
), ),
if (playlistsQuery.isLoading || !playlistsQuery.hasData) AnimatedCrossFade(
const Center(child: ShimmerPlaybuttonCard(count: 7)) duration: const Duration(milliseconds: 300),
else crossFadeState:
Wrap( playlistsQuery.isLoading || !playlistsQuery.hasData
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild:
const Center(child: ShimmerPlaybuttonCard(count: 7)),
secondChild: Wrap(
runSpacing: 10, runSpacing: 10,
alignment: WrapAlignment.center, alignment: WrapAlignment.center,
children: [ children: [
@ -111,6 +116,7 @@ class UserPlaylists extends HookConsumerWidget {
...playlists.map((playlist) => PlaylistCard(playlist)) ...playlists.map((playlist) => PlaylistCard(playlist))
], ],
), ),
),
], ],
), ),
), ),

20
lib/components/shared/shimmers/shimmer_categories.dart
View File

@ -1,9 +1,11 @@
import 'package:flutter/material.dart'; 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/components/shared/shimmers/shimmer_playbutton_card.dart';
import 'package:spotube/extensions/theme.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); const ShimmerCategories({Key? key}) : super(key: key);
@override @override
@ -15,8 +17,16 @@ class ShimmerCategories extends StatelessWidget {
final shimmerBackgroundColor = final shimmerBackgroundColor =
shimmerTheme.shimmerBackgroundColor ?? Colors.grey; shimmerTheme.shimmerBackgroundColor ?? Colors.grey;
final shimmerCount = useBreakpointValue(
sm: 2,
md: 3,
lg: 3,
xl: 6,
xxl: 8,
);
return Padding( return Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
@ -31,9 +41,9 @@ class ShimmerCategories extends StatelessWidget {
), ),
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
const Align( Align(
alignment: Alignment.topCenter, alignment: Alignment.topLeft,
child: ShimmerPlaybuttonCard(count: 7), child: ShimmerPlaybuttonCard(count: shimmerCount),
), ),
], ],
), ),

6
lib/components/shared/shimmers/shimmer_playbutton_card.dart
View File

@ -99,8 +99,9 @@ class ShimmerPlaybuttonCard extends HookWidget {
.4, .4,
); );
return Row( return Wrap(
mainAxisSize: MainAxisSize.min, spacing: 20,
runSpacing: 20,
children: [ children: [
for (var i = 0; i < count; i++) ...[ for (var i = 0; i < count; i++) ...[
CustomPaint( CustomPaint(
@ -110,7 +111,6 @@ class ShimmerPlaybuttonCard extends HookWidget {
foreground: fgColor!, foreground: fgColor!,
), ),
), ),
const SizedBox(width: 10),
] ]
], ],
); );

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

@ -74,10 +74,16 @@ class GenrePage extends HookConsumerWidget {
itemCount: categories.length, itemCount: categories.length,
shrinkWrap: true, shrinkWrap: true,
itemBuilder: (context, index) { itemBuilder: (context, index) {
if (searchText.value.isEmpty && index == categories.length - 1) { return AnimatedCrossFade(
return const ShimmerCategories(); crossFadeState: searchText.value.isEmpty &&
} index == categories.length - 1 &&
return CategoryCard(categories[index]); categoriesQuery.hasNextPage
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: const Duration(milliseconds: 300),
firstChild: const ShimmerCategories(),
secondChild: CategoryCard(categories[index]),
);
}, },
), ),
), ),