Display cover images in musics list

lib/ui/cover_image.dart

@@ -1,16 +1,19 @@
+import 'dart:async';
+
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:cached_network_image_platform_interface/cached_network_image_platform_interface.dart';
 import 'package:flutter/material.dart';
 import 'package:music_web_player/api.dart';
 import 'package:music_web_player/config.dart';
 
-class CoverImage extends StatelessWidget {
+class CoverImage extends StatefulWidget {
   final MusicEntry music;
   final double? width;
   final double? height;
   final BoxFit? fit;
   final Icon? icon;
   final Color? backgroundColor;
+  final Duration? delayLoading;
 
   const CoverImage({
     Key? key,
@@ -20,31 +23,61 @@ class CoverImage extends StatelessWidget {
     this.icon,
     this.fit,
     this.backgroundColor,
+    this.delayLoading,
   }) : super(key: key);
 
+  @override
+  State<StatefulWidget> createState() => _CoverImageState();
+}
+
+class _CoverImageState extends State<CoverImage> {
+  var _canShowImage = true;
+  Timer? _timer;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (widget.delayLoading != null) {
+      _canShowImage = false;
+      Timer(widget.delayLoading!, () {
+        if (mounted) {
+          setState(() => _canShowImage = true);
+        }
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _timer?.cancel();
+  }
+
   @override
   Widget build(BuildContext context) {
+    if (!_canShowImage) return _loadingWidget(null);
     return CachedNetworkImage(
-      width: width,
-      height: height,
+      width: widget.width,
+      height: widget.height,
       imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet,
-      imageUrl: music.coverURL,
-      cacheKey: music.coverCacheKey,
+      imageUrl: widget.music.coverURL,
+      cacheKey: widget.music.coverCacheKey,
       httpHeaders: {"Token": config.apiToken},
       useOldImageOnUrlChange: false,
       progressIndicatorBuilder: (c, s, p) => _loadingWidget(p.progress),
-      fit: fit,
+      fit: widget.fit,
       errorWidget: (c, s, e) => _loadingWidget(null),
     );
   }
 
   Widget _loadingWidget(double? progress) => Container(
-        color: backgroundColor ?? Colors.black,
-        width: width,
-        height: height,
+        color: widget.backgroundColor ?? Colors.black,
+        width: widget.width,
+        height: widget.height,
         child: Center(
           child: progress == null
-              ? icon
+              ? widget.icon
               : CircularProgressIndicator(value: progress),
         ),
       );

lib/ui/music_player.dart

@@ -235,11 +235,7 @@ class _MusicPlayerState extends State<MusicPlayer> {
             mainAxisAlignment: fluent.MainAxisAlignment.center,
             crossAxisAlignment: fluent.CrossAxisAlignment.center,
             children: [
-              Material(
-                borderRadius: const BorderRadius.all(
-                  Radius.circular(18.0),
-                ),
-                clipBehavior: Clip.hardEdge,
+              RoundedImage(
                 child: CoverImage(
                   width: 250,
                   height: 250,
@@ -343,6 +339,17 @@ class _MusicPlayerState extends State<MusicPlayer> {
             itemBuilder: (c, i) {
               final music = (_filteredList ?? widget.musicsList)[i];
               return ListTile(
+                leading: RoundedImage(
+                  child: CoverImage(
+                    delayLoading: const Duration(seconds: 3),
+                    music: music,
+                    width: 50,
+                    height: 50,
+                    fit: BoxFit.cover,
+                    backgroundColor: Colors.transparent,
+                    icon: const Icon(Icons.music_note),
+                  ),
+                ),
                 title: Text(music.title),
                 subtitle: Text(music.artist),
                 selected: currMusic == music,
@@ -379,3 +386,20 @@ class DurationText extends StatelessWidget {
     );
   }
 }
+
+class RoundedImage extends StatelessWidget {
+  final Widget child;
+
+  const RoundedImage({Key? key, required this.child}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      borderRadius: const BorderRadius.all(
+        Radius.circular(18.0),
+      ),
+      clipBehavior: Clip.hardEdge,
+      child: child,
+    );
+  }
+}