kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55: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) {
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,
),
],
),

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

@ -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))
],
),
),
],
),
),

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

@ -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),
),
],
),

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

@ -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),
]
],
);

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

@ -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]),
);
},
),
),