QOL: Data display load minesweeper pt1

Frontend/lib/mih_packages/mine_sweeper/builders/build_minesweeper_leaderboard_list.dart

@@ -1,6 +1,8 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:mzansi_innovation_hub/main.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_circle_avatar.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart';
 import 'package:mzansi_innovation_hub/mih_providers/mih_mine_sweeper_provider.dart';
 import 'package:mzansi_innovation_hub/mih_providers/mzansi_profile_provider.dart';
 import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
@@ -48,6 +50,24 @@ class _BuildMinesweeperLeaderboardListState
           },
           itemCount: mineSweeperProvider.leaderboard!.length,
           itemBuilder: (context, index) {
+            return FutureBuilder(
+                future: mineSweeperProvider.leaderboardUserPicturesUrl[index],
+                builder: (context, asyncSnapshot) {
+                  ImageProvider<Object>? imageFile;
+                  bool loading = true;
+                  if (asyncSnapshot.connectionState == ConnectionState.done) {
+                    loading = false;
+                    if (asyncSnapshot.hasData) {
+                      imageFile = asyncSnapshot.requireData != ""
+                          ? CachedNetworkImageProvider(
+                              asyncSnapshot.requireData)
+                          : null;
+                    } else {
+                      imageFile = null;
+                    }
+                  } else {
+                    imageFile = null;
+                  }
                   return Padding(
                     padding: EdgeInsets.symmetric(horizontal: width / 20),
                     child: Row(
@@ -60,19 +80,39 @@ class _BuildMinesweeperLeaderboardListState
                           ),
                         ),
                         const SizedBox(width: 10),
-                  MihCircleAvatar(
+                        loading
+                            ? Icon(
+                                MihIcons.mihRing,
+                                size: 80,
+                                color: MihColors.getSecondaryColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                              )
+                            : imageFile == null
+                                ? Icon(
+                                    MihIcons.iDontKnow,
+                                    size: 80,
+                                    color: MihColors.getSecondaryColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
+                                  )
+                                : MihCircleAvatar(
                                     key: UniqueKey(),
-                    imageFile:
+                                    imageFile: imageFile,
-                        mineSweeperProvider.leaderboardUserPictures.isNotEmpty
-                            ? mineSweeperProvider.leaderboardUserPictures[index]
-                            : null,
                                     width: 80,
                                     editable: false,
                                     fileNameController: null,
                                     userSelectedfile: null,
                                     frameColor: getMedalColor(index),
                                     backgroundColor: MihColors.getPrimaryColor(
-                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
                                     onChange: () {},
                                   ),
                         const SizedBox(width: 10),
@@ -103,6 +143,7 @@ class _BuildMinesweeperLeaderboardListState
                       ],
                     ),
                   );
+                });
           },
         );
       },

Frontend/lib/mih_packages/mine_sweeper/package_tools/mih_mine_sweeper_leader_board.dart

@@ -1,4 +1,3 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:ken_logger/ken_logger.dart';
@@ -32,14 +31,14 @@ class _MihMineSweeperLeaderBoardState extends State<MihMineSweeperLeaderBoard> {
     filterController.text = mineSweeperProvider.difficulty;
     KenLogger.success("getting data");
     await MihMinesweeperServices().getTop20Leaderboard(mineSweeperProvider);
-    List<ImageProvider<Object>?> userPictures = [];
+    List<Future<String>> userPicturesUrl = [];
-    String userPicUrl = "";
+    Future<String> userPicUrl;
     for (final ranking in mineSweeperProvider.leaderboard!) {
-      userPicUrl = await MihFileApi.getMinioFileUrl(ranking.proPicUrl);
+      userPicUrl = MihFileApi.getMinioFileUrl(ranking.proPicUrl);
-      userPictures.add(CachedNetworkImageProvider(userPicUrl));
+      userPicturesUrl.add(userPicUrl);
     }
     mineSweeperProvider.setLeaderboardUserPictures(
-        leaderboardUserPictures: userPictures);
+        leaderboardUserPicturesUrl: userPicturesUrl);
     setState(() {
       isLoading = false;
     });
@@ -190,7 +189,9 @@ class _MihMineSweeperLeaderBoardState extends State<MihMineSweeperLeaderBoard> {
                         ],
                       ),
                     )
-                  : Expanded(child: BuildMinesweeperLeaderboardList()),
+                  : Expanded(
+                      child: BuildMinesweeperLeaderboardList(),
+                    ),
             ],
           );
         }

Frontend/lib/mih_providers/mih_mine_sweeper_provider.dart

@@ -9,7 +9,7 @@ class MihMineSweeperProvider extends ChangeNotifier {
   int totalMines;
   List<MinesweeperPlayerScore>? leaderboard;
   List<MinesweeperPlayerScore>? myScoreboard;
-  List<ImageProvider<Object>?> leaderboardUserPictures = [];
+  List<Future<String>> leaderboardUserPicturesUrl = [];
 
   MihMineSweeperProvider({
     this.difficulty = "Easy",
@@ -74,8 +74,8 @@ class MihMineSweeperProvider extends ChangeNotifier {
   }
 
   void setLeaderboardUserPictures(
-      {required List<ImageProvider<Object>?> leaderboardUserPictures}) {
+      {required List<Future<String>> leaderboardUserPicturesUrl}) {
-    this.leaderboardUserPictures = leaderboardUserPictures;
+    this.leaderboardUserPicturesUrl = leaderboardUserPicturesUrl;
     notifyListeners();
   }
 }