Add loading gif for app

Frontend/patient_manager/lib/components/addOrViewPatient.dart

@@ -1,6 +1,7 @@
 import 'dart:convert';
 
 import 'package:flutter/material.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/env/env.dart';
 import 'package:patient_manager/objects/arguments.dart';
 import 'package:patient_manager/objects/patients.dart';
@@ -49,7 +50,7 @@ class _AddOrViewPatientState extends State<AddOrViewPatient> {
       future: fetchPatient(),
       builder: (ctx, snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return const Center(child: CircularProgressIndicator());
+          return const Mihloadingcircle();
         }
         // Checking if future is resolved
         else if (snapshot.connectionState == ConnectionState.done) {

Frontend/patient_manager/lib/components/homeTileGrid.dart

@@ -4,6 +4,7 @@ import 'package:patient_manager/components/homeTile.dart';
 import 'package:patient_manager/components/mihAppBar.dart';
 import 'package:patient_manager/components/mihAppDrawer.dart';
 import 'package:patient_manager/components/mihDeleteMessage.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/mySuccessMessage.dart';
 import 'package:patient_manager/env/env.dart';
@@ -154,6 +155,20 @@ class _HomeTileGridState extends State<HomeTileGrid> {
 
   void setAppsDev(List<List<dynamic>> tileList) {
     if (AppEnviroment.getEnv() == "Dev") {
+      tileList.add(
+        [
+          Icons.change_circle,
+          "Loading - Dev",
+          () {
+            showDialog(
+              context: context,
+              builder: (context) {
+                return const Mihloadingcircle();
+              },
+            );
+          }
+        ],
+      );
       tileList.add(
         [
           Icons.add_business_outlined,
@@ -312,7 +327,7 @@ class _HomeTileGridState extends State<HomeTileGrid> {
       appBar: const MIHAppBar(barTitle: "Mzansi Innovation Hub"),
       drawer: MIHAppDrawer(
         signedInUser: widget.signedInUser,
-        logo: MzanziInnovationHub.of(context)!.theme.logoImage(), //logo,
+        //logo: MzanziInnovationHub.of(context)!.theme.logoImage(), //logo,
       ),
       body: FutureBuilder(
         future: pbswitch,
@@ -337,9 +352,7 @@ class _HomeTileGridState extends State<HomeTileGrid> {
               ),
             );
           }
-          return const Center(
+          return const Mihloadingcircle();
-            child: CircularProgressIndicator(),
-          );
         },
       ),
       bottomNavigationBar: Visibility(
@@ -380,11 +393,5 @@ class _HomeTileGridState extends State<HomeTileGrid> {
         ),
       ),
     );
-    //     }
-    //     return const Center(
-    //       child: CircularProgressIndicator(),
-    //     );
-    //   },
-    // );
   }
 }

Frontend/patient_manager/lib/components/medicineSearch.dart

@@ -2,6 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/buildMedList.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/env/env.dart';
 import 'package:patient_manager/main.dart';
@@ -96,9 +97,7 @@ class _MedicineSearchState extends State<MedicineSearch> {
                     if (snapshot.connectionState == ConnectionState.waiting) {
                       return const SizedBox(
                         height: 400,
-                        child: const Center(
+                        child: Mihloadingcircle(),
-                          child: CircularProgressIndicator(),
-                        ),
                       );
                     } else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
                       final medsList = snapshot.data!;

Frontend/patient_manager/lib/components/mihAppDrawer.dart

@@ -5,11 +5,11 @@ import 'package:supertokens_flutter/supertokens.dart';
 
 class MIHAppDrawer extends StatefulWidget {
   final AppUser signedInUser;
-  final AssetImage logo;
+  //final AssetImage logo;
   const MIHAppDrawer({
     super.key,
     required this.signedInUser,
-    required this.logo,
+    //required this.logo,
   });
 
   @override
@@ -56,6 +56,7 @@ class _MIHAppDrawerState extends State<MIHAppDrawer> {
   Widget build(BuildContext context) {
     // precacheImage(
     //     MzanziInnovationHub.of(context)!.theme.logoImage().image, context);
+    ImageProvider logo = MzanziInnovationHub.of(context)!.theme.logoImage();
     return Drawer(
       //backgroundColor:  MzanziInnovationHub.of(context)!.theme.primaryColor(),
       child: Stack(children: [
@@ -74,7 +75,7 @@ class _MIHAppDrawerState extends State<MIHAppDrawer> {
                   children: [
                     SizedBox(
                       height: 60,
-                      child: Image(image: widget.logo),
+                      child: Image(image: logo),
                     ),
                     Text(
                       "${widget.signedInUser.fname} ${widget.signedInUser.lname}",

Frontend/patient_manager/lib/components/mihLoadingCircle.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:patient_manager/main.dart';
+import 'package:gif/gif.dart';
+
+class Mihloadingcircle extends StatefulWidget {
+  const Mihloadingcircle({super.key});
+
+  @override
+  State<Mihloadingcircle> createState() => _MihloadingcircleState();
+}
+
+class _MihloadingcircleState extends State<Mihloadingcircle>
+    with TickerProviderStateMixin {
+  late final GifController _controller;
+
+  @override
+  void initState() {
+    _controller = GifController(vsync: this);
+    //_controller.animateTo(26);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    ImageProvider loading =
+        MzanziInnovationHub.of(context)!.theme.loadingImage();
+    return Dialog(
+      child: Container(
+        padding: const EdgeInsets.all(10.0),
+        width: 250,
+        height: 250,
+        decoration: BoxDecoration(
+          color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+          borderRadius: BorderRadius.circular(25.0),
+          border: Border.all(
+              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              width: 5.0),
+        ),
+        child: Gif(
+          image: loading,
+          controller:
+              _controller, // if duration and fps is null, original gif fps will be used.
+          fps: 15,
+          //duration: const Duration(seconds: 3),
+          autostart: Autostart.loop,
+          placeholder: (context) => const Center(
+            child: CircularProgressIndicator(),
+          ),
+          onFetchCompleted: () {
+            _controller.reset();
+            _controller.forward();
+          },
+        ),
+      ),
+
+      //   Center(
+      //       child: MzanziInnovationHub.of(context)!.theme.loadingImage()),
+      // ),
+    );
+  }
+}

Frontend/patient_manager/lib/components/patientFiles.dart

@@ -5,6 +5,7 @@ import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/buildFilesList.dart';
 import 'package:patient_manager/components/medCertInput.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/mySuccessMessage.dart';
 import 'package:patient_manager/components/myTextInput.dart';
@@ -68,9 +69,7 @@ class _PatientFilesState extends State<PatientFiles> {
     showDialog(
       context: context,
       builder: (context) {
-        return const Center(
+        return const Mihloadingcircle();
-          child: CircularProgressIndicator(),
-        );
       },
     );
 
@@ -130,9 +129,7 @@ class _PatientFilesState extends State<PatientFiles> {
     showDialog(
       context: context,
       builder: (context) {
-        return const Center(
+        return const Mihloadingcircle();
-          child: CircularProgressIndicator(),
-        );
       },
     );
 
@@ -640,9 +637,7 @@ class _PatientFilesState extends State<PatientFiles> {
       future: futueFiles,
       builder: (context, snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return const Center(
+          return const Mihloadingcircle();
-            child: CircularProgressIndicator(),
-          );
         } else if (snapshot.hasData) {
           final filesList = snapshot.data!;
           return Container(

Frontend/patient_manager/lib/components/patientNotes.dart

@@ -2,6 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:patient_manager/components/buildNotesList.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/myMLTextInput.dart';
 import 'package:patient_manager/components/mySuccessMessage.dart';
@@ -266,9 +267,7 @@ class _PatientNotesState extends State<PatientNotes> {
       future: futueNotes,
       builder: (context, snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return const Center(
+          return const Mihloadingcircle();
-            child: CircularProgressIndicator(),
-          );
         } else if (snapshot.hasData) {
           final notesList = snapshot.data!;
           return Container(

Frontend/patient_manager/lib/main.dart

@@ -57,7 +57,8 @@ class _MzanziInnovationHubState extends State<MzanziInnovationHub> {
 
   @override
   Widget build(BuildContext context) {
-    //precacheImage(theme.logoImage(), context);
+    precacheImage(theme.loadingImage(), context);
+    precacheImage(theme.logoImage(), context);
     return MaterialApp(
       title: getTitle(),
       themeMode: _themeMode,

Frontend/patient_manager/lib/pages/home.dart

@@ -1,6 +1,7 @@
 import 'dart:convert';
 
 import 'package:flutter/material.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/env/env.dart';
 import 'package:patient_manager/components/homeTileGrid.dart';
 import 'package:patient_manager/objects/appUser.dart';
@@ -97,9 +98,7 @@ class _HomeState extends State<Home> {
             );
           }
         }
-        return const Center(
+        return const Mihloadingcircle();
-          child: CircularProgressIndicator(),
-        );
       },
     );
   }

Frontend/patient_manager/lib/pages/patientManager.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:patient_manager/components/buildPatientList.dart';
 import 'package:patient_manager/components/mihAppBar.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/objects/appUser.dart';
 import 'package:supertokens_flutter/http.dart' as http;
 import 'package:patient_manager/components/mySearchInput.dart';
@@ -171,9 +172,7 @@ class _PatientManagerState extends State<PatientManager> {
                               .secondaryColor(),
                           width: 3.0),
                     ),
-                    child: const Center(
+                    child: const Mihloadingcircle(),
-                      child: CircularProgressIndicator(),
-                    ),
                   );
                 } else if (snapshot.connectionState == ConnectionState.done &&
                     snapshot.hasData) {

Frontend/patient_manager/lib/pages/patientView.dart

@@ -1,6 +1,7 @@
 import 'dart:convert';
 
 import 'package:flutter/material.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/patientDetails.dart';
 import 'package:patient_manager/components/mihAppBar.dart';
 import 'package:patient_manager/components/patientFiles.dart';
@@ -64,7 +65,7 @@ class _PatientViewState extends State<PatientView> {
       future: fetchPatient(),
       builder: (ctx, snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return const Center(child: CircularProgressIndicator());
+          return const Mihloadingcircle();
         }
         // Checking if future is resolved
         else if (snapshot.connectionState == ConnectionState.done) {

Frontend/patient_manager/lib/pages/profileBusinessAdd.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:patient_manager/components/mihAppBar.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myDropdownInput.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/myFileInput.dart';
@@ -96,11 +97,10 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
     showDialog(
       context: context,
       builder: (context) {
-        return const Center(
+        return const Mihloadingcircle();
-          child: CircularProgressIndicator(),
-        );
       },
     );
+
     var response = await http.post(
       Uri.parse("$baseAPI/business/insert/"),
       headers: <String, String>{

Frontend/patient_manager/lib/pages/profileBusinessUpdate.dart

@@ -4,6 +4,7 @@ import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:patient_manager/components/mihAppBar.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myDropdownInput.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/myFileInput.dart';
@@ -159,11 +160,10 @@ class _ProfileBusinessUpdateState extends State<ProfileBusinessUpdate> {
     showDialog(
       context: context,
       builder: (context) {
-        return const Center(
+        return const Mihloadingcircle();
-          child: CircularProgressIndicator(),
-        );
       },
     );
+
     var response = await http.put(
       Uri.parse("$baseAPI/business/update/"),
       headers: <String, String>{

Frontend/patient_manager/lib/pages/register.dart

@@ -2,6 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/myPassInput.dart';
 import 'package:patient_manager/components/mySuccessMessage.dart';
@@ -65,19 +66,15 @@ class _RegisterState extends State<Register> {
     } else if (passwordController.text != confirmPasswordController.text) {
       passwordError();
     } else {
-      var _backgroundColor = Colors.transparent;
+      //var _backgroundColor = Colors.transparent;
 
       showDialog(
         context: context,
-        barrierColor: _backgroundColor,
+        builder: (context) {
-        builder: (BuildContext dialogContext) {
+          return const Mihloadingcircle();
-          return AlertDialog(
-              backgroundColor: _backgroundColor,
-              content: const Center(
-                child: CircularProgressIndicator(),
-              ));
         },
       );
+
       try {
         Uri uri = Uri.parse(
             "$baseAPI/auth/emailpassword/email/exists?email=${emailController.text}");

Frontend/patient_manager/lib/pages/signin.dart

@@ -2,6 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:patient_manager/components/mihLoadingCircle.dart';
 import 'package:patient_manager/components/myErrorMessage.dart';
 import 'package:patient_manager/components/myPassInput.dart';
 import 'package:patient_manager/components/myTextInput.dart';
@@ -31,23 +32,15 @@ class _SignInState extends State<SignIn> {
 
   //sign user in
   Future<void> signUserIn() async {
-    var _backgroundColor = Colors.transparent;
+    //var _backgroundColor = Colors.transparent;
 
     showDialog(
       context: context,
-      barrierColor: _backgroundColor,
+      builder: (context) {
-      builder: (BuildContext dialogContext) {
+        return const Mihloadingcircle();
-        return AlertDialog(
-          backgroundColor: _backgroundColor,
-          content: Container(
-            child: const Center(
-              child:
-                  CircularProgressIndicator(), // Put your gif into the assets folder
-            ),
-          ),
-        );
       },
     );
+
     try {
       var response = await http.post(
         Uri.parse("$baseAPI/auth/signin"),

Frontend/patient_manager/lib/theme/mihTheme.dart

@@ -7,7 +7,7 @@ class MyTheme {
   late int _succColor;
   late int _mesColor;
   late String mode;
-  late Image loading;
+  late AssetImage loading;
 
   // Options:-
   // f3f9d2 = Cream
@@ -115,16 +115,14 @@ class MyTheme {
     }
   }
 
-  Image loadingImage() {
+  AssetImage loadingImage() {
     if (mode == "Dark") {
-      loading = Image.asset(
+      loading = const AssetImage(
         'images/loading2.gif',
-        width: 100,
       );
     } else {
-      loading = Image.asset(
+      loading = const AssetImage(
         'images/loading1.gif',
-        width: 100,
       );
     }
     return loading;

Frontend/patient_manager/pubspec.lock

@@ -408,6 +408,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.2.0"
+  gif:
+    dependency: "direct main"
+    description:
+      name: gif
+      sha256: ade95694f1471da737922806818ffade2814d1d7f8d10af38ebcf36ace012bc0
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.0"
   glob:
     dependency: transitive
     description:

Frontend/patient_manager/pubspec.yaml

@@ -45,6 +45,7 @@ dependencies:
   google_nav_bar: ^5.0.6
   mysql_client: ^0.0.27
   args: 2.5.0
+  gif: ^2.3.0
 
 dev_dependencies:
   flutter_test: