Lyrics loading ShimmerLoader added

lib/components/LoaderShimmers/ShimmerLyrics.dart

@@ -0,0 +1,67 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:skeleton_text/skeleton_text.dart';
+import 'package:spotube/extensions/ShimmerColorTheme.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
+
+const widths = [20, 56, 89, 60, 25, 69];
+
+class ShimmerLyrics extends HookWidget {
+  const ShimmerLyrics({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final shimmerColor =
+        Theme.of(context).extension<ShimmerColorTheme>()!.shimmerColor!;
+    final shimmerBackgroundColor = Theme.of(context)
+        .extension<ShimmerColorTheme>()!
+        .shimmerBackgroundColor!;
+
+    final breakpoint = useBreakpoints();
+
+    return ListView.builder(
+      itemCount: 20,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemBuilder: (context, index) {
+        final widthsCp = [...widths];
+        if (breakpoint.isMd) {
+          widthsCp.removeLast();
+        }
+        if (breakpoint.isSm) {
+          widthsCp.removeLast();
+          widthsCp.removeLast();
+        }
+        widthsCp.shuffle();
+        return Container(
+          margin: const EdgeInsets.symmetric(vertical: 5),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: widthsCp.map(
+              (width) {
+                return Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                  child: SkeletonAnimation(
+                    shimmerColor: shimmerColor,
+                    shimmerDuration: 1000,
+                    child: Container(
+                      height: 10,
+                      width: width.toDouble(),
+                      decoration: BoxDecoration(
+                        color: shimmerBackgroundColor,
+                        borderRadius: BorderRadius.circular(10),
+                      ),
+                      margin: const EdgeInsets.only(top: 10),
+                    ),
+                  ),
+                );
+              },
+            ).toList(),
+          ),
+        );
+      },
+    );
+  }
+}

lib/components/Lyrics/Lyrics.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
 import 'package:spotube/helpers/artist-to-string.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/provider/Playback.dart';
@@ -53,7 +54,7 @@ class Lyrics extends HookConsumerWidget {
                     },
                     error: (error, __) => Text(
                         "Sorry, no Lyrics were found for `${playback.currentTrack?.name}` :'("),
-                    loading: () => const CircularProgressIndicator(),
+                    loading: () => const ShimmerLyrics(),
                   ),
                 ),
               ),

lib/components/Lyrics/SyncedLyrics.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
 import 'package:spotube/components/Lyrics/Lyrics.dart';
 import 'package:spotube/components/Shared/SpotubeMarqueeText.dart';
 import 'package:spotube/helpers/artist-to-string.dart';
@@ -117,10 +118,11 @@ class SyncedLyrics extends HookConsumerWidget {
                   : textTheme.headline6,
             ),
           ),
-          if (lyricValue != null)
+          if (lyricValue != null && lyricValue.lyrics.isNotEmpty)
             Expanded(
               child: ListView.builder(
                 controller: controller,
+                itemCount: lyricValue.lyrics.length,
                 itemBuilder: (context, index) {
                   final lyricSlice = lyricValue.lyrics[index];
                   final isActive = lyricSlice.time.inSeconds == currentTime;
@@ -153,9 +155,11 @@ class SyncedLyrics extends HookConsumerWidget {
                     ),
                   );
                 },
-                itemCount: lyricValue.lyrics.length,
               ),
             ),
+          if (playback.currentTrack != null &&
+              (lyricValue == null || lyricValue.lyrics.isEmpty == true))
+            const Expanded(child: ShimmerLyrics()),
         ],
       ),
     );