From a717ef2bafb31a6b345b3f24a6873a9a74576963 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Sun, 26 Jun 2022 14:46:51 +0600
Subject: [PATCH] Lyrics loading ShimmerLoader added

---
 .../LoaderShimmers/ShimmerLyrics.dart         | 67 +++++++++++++++++++
 lib/components/Lyrics/Lyrics.dart             |  3 +-
 lib/components/Lyrics/SyncedLyrics.dart       |  8 ++-
 3 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 lib/components/LoaderShimmers/ShimmerLyrics.dart

diff --git a/lib/components/LoaderShimmers/ShimmerLyrics.dart b/lib/components/LoaderShimmers/ShimmerLyrics.dart
new file mode 100644
index 00000000..6743e303
--- /dev/null
+++ b/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(),
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/lib/components/Lyrics/Lyrics.dart b/lib/components/Lyrics/Lyrics.dart
index 706dc36d..a42c6872 100644
--- a/lib/components/Lyrics/Lyrics.dart
+++ b/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(),
                   ),
                 ),
               ),
diff --git a/lib/components/Lyrics/SyncedLyrics.dart b/lib/components/Lyrics/SyncedLyrics.dart
index 7843fdce..62ece941 100644
--- a/lib/components/Lyrics/SyncedLyrics.dart
+++ b/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()),
         ],
       ),
     );