feat: improve loading animations

KRTirtho · Dec 4, 2023 · b92583d · b92583d
1 parent 2ceb6a8
commit b92583d
Show file tree

Hide file tree

Showing 23 changed files with 582 additions and 699 deletions.
diff --git a/lib/collections/fake.dart b/lib/collections/fake.dart
@@ -0,0 +1,161 @@
+import 'package:spotify/spotify.dart';
+import 'package:spotube/extensions/track.dart';
+
+abstract class FakeData {
+  static final Image image = Image()
+    ..height = 1
+    ..width = 1
+    ..url = "url";
+
+  static final Followers followers = Followers()
+    ..href = "text"
+    ..total = 1;
+
+  static final Artist artist = Artist()
+    ..id = "1"
+    ..name = "Wow artist Good!"
+    ..images = [image]
+    ..popularity = 1
+    ..type = "type"
+    ..uri = "uri"
+    ..externalUrls = externalUrls
+    ..genres = ["genre"]
+    ..href = "text"
+    ..followers = followers;
+
+  static final externalIds = ExternalIds()
+    ..isrc = "text"
+    ..ean = "text"
+    ..upc = "text";
+
+  static final externalUrls = ExternalUrls()..spotify = "text";
+
+  static final Album album = Album()
+    ..id = "1"
+    ..genres = ["genre"]
+    ..label = "label"
+    ..popularity = 1
+    ..albumType = AlbumType.album
+    ..artists = [artist]
+    ..availableMarkets = [Market.BD]
+    ..externalUrls = externalUrls
+    ..href = "text"
+    ..images = [image]
+    ..name = "Another good album"
+    ..releaseDate = "2021-01-01"
+    ..releaseDatePrecision = DatePrecision.day
+    ..tracks = [track]
+    ..type = "type"
+    ..uri = "uri"
+    ..externalIds = externalIds
+    ..copyrights = [
+      Copyright()
+        ..type = CopyrightType.C
+        ..text = "text",
+    ];
+
+  static final ArtistSimple artistSimple = ArtistSimple()
+    ..id = "1"
+    ..name = "What an artist"
+    ..type = "type"
+    ..uri = "uri"
+    ..externalUrls = externalUrls;
+
+  static final AlbumSimple albumSimple = AlbumSimple()
+    ..id = "1"
+    ..albumType = AlbumType.album
+    ..artists = [artistSimple]
+    ..availableMarkets = [Market.BD]
+    ..externalUrls = externalUrls
+    ..href = "text"
+    ..images = [image]
+    ..name = "A good album"
+    ..releaseDate = "2021-01-01"
+    ..releaseDatePrecision = DatePrecision.day
+    ..type = "type"
+    ..uri = "uri";
+
+  static final Track track = Track()
+    ..id = "1"
+    ..artists = [artist, artist, artist]
+    ..album = albumSimple
+    ..availableMarkets = [Market.BD]
+    ..discNumber = 1
+    ..durationMs = 50000
+    ..explicit = false
+    ..externalUrls = externalUrls
+    ..href = "text"
+    ..name = "A Track Name"
+    ..popularity = 1
+    ..previewUrl = "url"
+    ..trackNumber = 1
+    ..type = "type"
+    ..uri = "uri"
+    ..isPlayable = true
+    ..explicit = false
+    ..linkedFrom = trackLink;
+
+  static final TrackLink trackLink = TrackLink()
+    ..id = "1"
+    ..type = "type"
+    ..uri = "uri"
+    ..externalUrls = {"spotify": "text"}
+    ..href = "text";
+
+  static final Paging<Track> paging = Paging()
+    ..href = "text"
+    ..itemsNative = [track.toJson()]
+    ..limit = 1
+    ..next = "text"
+    ..offset = 1
+    ..previous = "text"
+    ..total = 1;
+
+  static final User user = User()
+    ..id = "1"
+    ..displayName = "Your Name"
+    ..birthdate = "2021-01-01"
+    ..country = Market.BD
+    ..email = "test@email.com"
+    ..followers = followers
+    ..href = "text"
+    ..images = [image]
+    ..type = "type"
+    ..uri = "uri";
+
+  static final TracksLink tracksLink = TracksLink()
+    ..href = "text"
+    ..total = 1;
+
+  static final Playlist playlist = Playlist()
+    ..id = "1"
+    ..collaborative = false
+    ..description = "A very good playlist description"
+    ..externalUrls = externalUrls
+    ..followers = followers
+    ..href = "text"
+    ..images = [image]
+    ..name = "A good playlist"
+    ..owner = user
+    ..public = true
+    ..snapshotId = "text"
+    ..tracks = paging
+    ..tracksLink = tracksLink
+    ..type = "type"
+    ..uri = "uri";
+
+  static final PlaylistSimple playlistSimple = PlaylistSimple()
+    ..id = "1"
+    ..collaborative = false
+    ..externalUrls = externalUrls
+    ..href = "text"
+    ..images = [image]
+    ..name = "A good playlist"
+    ..owner = user
+    ..public = true
+    ..snapshotId = "text"
+    ..tracksLink = tracksLink
+    ..type = "type"
+    ..description = "A very good playlist description"
+    ..uri = "uri";
+}
diff --git a/lib/components/artist/artist_card.dart b/lib/components/artist/artist_card.dart
@@ -1,6 +1,7 @@
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
@@ -91,12 +92,14 @@ class ArtistCard extends HookConsumerWidget {
                           decoration: BoxDecoration(
                               color: Colors.blue,
                               borderRadius: BorderRadius.circular(50)),
-                          child: Text(
-                            context.l10n.artist,
-                            style: const TextStyle(
-                              color: Colors.white,
-                              fontSize: 12,
-                              fontWeight: FontWeight.bold,
+                          child: Skeleton.ignore(
+                            child: Text(
+                              context.l10n.artist,
+                              style: const TextStyle(
+                                color: Colors.white,
+                                fontSize: 12,
+                                fontWeight: FontWeight.bold,
+                              ),
                             ),
                           ),
                         ),

diff --git a/lib/components/library/user_albums.dart b/lib/components/library/user_albums.dart
@@ -3,12 +3,13 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/fake.dart';
 
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/album/album_card.dart';
 import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
-import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/shared/waypoint.dart';
 import 'package:spotube/extensions/context.dart';
@@ -82,30 +83,32 @@ class UserAlbums extends HookConsumerWidget {
               child: SingleChildScrollView(
                 padding: const EdgeInsets.all(8.0),
                 controller: controller,
-                child: Wrap(
-                  runSpacing: 20,
-                  alignment: WrapAlignment.center,
-                  runAlignment: WrapAlignment.center,
-                  crossAxisAlignment: WrapCrossAlignment.center,
-                  children: [
-                    if (albums.isEmpty)
-                      Container(
-                        alignment: Alignment.topLeft,
-                        padding: const EdgeInsets.all(16.0),
-                        child: const ShimmerPlaybuttonCard(count: 4),
-                      ),
-                    for (final album in albums)
-                      AlbumCard(
-                        TypeConversionUtils.simpleAlbum_X_Album(album),
-                      ),
-                    if (albumsQuery.hasNextPage)
-                      Waypoint(
-                        controller: controller,
-                        isGrid: true,
-                        onTouchEdge: albumsQuery.fetchNext,
-                        child: const ShimmerPlaybuttonCard(count: 1),
-                      )
-                  ],
+                child: Skeletonizer(
+                  enabled: albums.isEmpty,
+                  child: Wrap(
+                    runSpacing: 20,
+                    alignment: WrapAlignment.center,
+                    runAlignment: WrapAlignment.center,
+                    crossAxisAlignment: WrapCrossAlignment.center,
+                    children: [
+                      if (albums.isEmpty)
+                        ...List.generate(
+                          10,
+                          (index) => AlbumCard(FakeData.album),
+                        ),
+                      for (final album in albums)
+                        AlbumCard(
+                          TypeConversionUtils.simpleAlbum_X_Album(album),
+                        ),
+                      if (albums.isNotEmpty && albumsQuery.hasNextPage)
+                        Waypoint(
+                          controller: controller,
+                          isGrid: true,
+                          onTouchEdge: albumsQuery.fetchNext,
+                          child: AlbumCard(FakeData.album),
+                        )
+                    ],
+                  ),
                 ),
               ),
             ),

diff --git a/lib/components/library/user_artists.dart b/lib/components/library/user_artists.dart
@@ -3,6 +3,8 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+import 'package:spotube/collections/fake.dart';
 
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
@@ -87,12 +89,19 @@ class UserArtists extends HookConsumerWidget {
                     width: double.infinity,
                     child: SafeArea(
                       child: Center(
-                        child: Wrap(
-                          spacing: 15,
-                          runSpacing: 5,
-                          children: filteredArtists
-                              .mapIndexed((index, artist) => ArtistCard(artist))
-                              .toList(),
+                        child: Skeletonizer(
+                          enabled: artistQuery.isLoading,
+                          child: Wrap(
+                            spacing: 15,
+                            runSpacing: 5,
+                            children: artistQuery.isLoading
+                                ? List.generate(
+                                    10, (index) => ArtistCard(FakeData.artist))
+                                : filteredArtists
+                                    .mapIndexed(
+                                        (index, artist) => ArtistCard(artist))
+                                    .toList(),
+                          ),
                         ),
                       ),
                     ),

diff --git a/lib/components/library/user_local_tracks.dart b/lib/components/library/user_local_tracks.dart
@@ -11,12 +11,13 @@ import 'package:metadata_god/metadata_god.dart';
 import 'package:mime/mime.dart';
 import 'package:path/path.dart';
 import 'package:path_provider/path_provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/fake.dart';
 import 'package:spotube/collections/spotube_icons.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_track_tile.dart';
 import 'package:spotube/components/shared/sort_tracks_dropdown.dart';
 import 'package:spotube/components/shared/track_tile/track_tile.dart';
 import 'package:spotube/extensions/context.dart';
@@ -261,32 +262,48 @@ class UserLocalTracks extends HookConsumerWidget {
                 },
                 child: InterScrollbar(
                   controller: controller,
-                  child: ListView.builder(
-                    controller: controller,
-                    physics: const AlwaysScrollableScrollPhysics(),
-                    itemCount: filteredTracks.length,
-                    itemBuilder: (context, index) {
-                      final track = filteredTracks[index];
-                      return TrackTile(
-                        index: index,
-                        track: track,
-                        userPlaylist: false,
-                        onTap: () async {
-                          await playLocalTracks(
-                            ref,
-                            sortedTracks,
-                            currentTrack: track,
-                          );
-                        },
-                      );
-                    },
+                  child: Skeletonizer(
+                    enabled: trackSnapshot.isLoading,
+                    child: ListView.builder(
+                      controller: controller,
+                      physics: const AlwaysScrollableScrollPhysics(),
+                      itemCount:
+                          trackSnapshot.isLoading ? 5 : filteredTracks.length,
+                      itemBuilder: (context, index) {
+                        if (trackSnapshot.isLoading) {
+                          return TrackTile(track: FakeData.track, index: index);
+                        }
+
+                        final track = filteredTracks[index];
+                        return TrackTile(
+                          index: index,
+                          track: track,
+                          userPlaylist: false,
+                          onTap: () async {
+                            await playLocalTracks(
+                              ref,
+                              sortedTracks,
+                              currentTrack: track,
+                            );
+                          },
+                        );
+                      },
+                    ),
                   ),
                 ),
               ),
             );
           },
-          loading: () =>
-              const Expanded(child: ShimmerTrackTileGroup(noSliver: true)),
+          loading: () => Expanded(
+            child: Skeletonizer(
+              enabled: true,
+              child: ListView.builder(
+                itemCount: 5,
+                itemBuilder: (context, index) =>
+                    TrackTile(track: FakeData.track, index: index),
+              ),
+            ),
+          ),
           error: (error, stackTrace) =>
               Text(error.toString() + stackTrace.toString()),
         )