Bugfix: Shimmer remove (#7)

The purpose of this branch is to remove "shimmer" package because it was slowing down and glitching the application. All Shimmers were replaced with stateless Containers.

List of changes:
- removed "shimmer" package from pubspec.yaml
- created loading_container.dart class to define the Container for loading in one class
- replaced all usages of Shimmer with LoadingContainer throughout the app

lib/views/pages/drawer/ir_record_drawer_page/ir_record_verifications_list_shimmer.dart

@@ -1,9 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:miro/config/theme/design_colors.dart';
-import 'package:shimmer/shimmer.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 
 class IRRecordVerificationsListShimmer extends StatelessWidget {
-
   const IRRecordVerificationsListShimmer({Key? key}) : super(key: key);
 
   @override
@@ -13,43 +11,24 @@ class IRRecordVerificationsListShimmer extends StatelessWidget {
       physics: const NeverScrollableScrollPhysics(),
       itemCount: 5,
       itemBuilder: (BuildContext context, int index) {
-        return ListTile(
+        return const ListTile(
           dense: false,
           contentPadding: EdgeInsets.zero,
           leading: ClipOval(
-            child: Shimmer.fromColors(
-              baseColor: DesignColors.grey3,
-              highlightColor: DesignColors.grey2,
-              child: Container(
-                width: 30,
-                height: 30,
-                color: DesignColors.grey2,
-              ),
+            child: LoadingContainer(
+              height: 30,
+              width: 30,
             ),
           ),
-          title: Shimmer.fromColors(
-            baseColor: DesignColors.grey3,
-            highlightColor: DesignColors.grey2,
-            child: Container(
-              width: 100,
-              height: 16,
-              decoration: const BoxDecoration(
-                borderRadius: BorderRadius.all(Radius.circular(5)),
-                color: DesignColors.grey2,
-              ),
-            ),
+          title: LoadingContainer(
+            height: 16,
+            width: 100,
+            circularBorderRadius: 5,
           ),
-          trailing: Shimmer.fromColors(
-            baseColor: DesignColors.grey3,
-            highlightColor: DesignColors.grey2,
-            child: Container(
-              width: 100,
-              height: 16,
-              decoration: const BoxDecoration(
-                borderRadius: BorderRadius.all(Radius.circular(5)),
-                color: DesignColors.grey2,
-              ),
-            ),
+          trailing: LoadingContainer(
+            height: 16,
+            width: 100,
+            circularBorderRadius: 5,
           ),
         );
       },

lib/views/pages/menu/dashboard_page/widgets/dashboard_grid_title_shimmer.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:miro/config/theme/design_colors.dart';
-import 'package:shimmer/shimmer.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 
 class DashboardGridTileShimmer extends StatelessWidget {
   final bool enabled;
@@ -21,16 +20,10 @@ class DashboardGridTileShimmer extends StatelessWidget {
         opacity: 0.5,
         child: ClipRRect(
           borderRadius: BorderRadius.circular(8),
-          child: Shimmer.fromColors(
-            enabled: enabled,
-            baseColor: DesignColors.grey3,
-            highlightColor: DesignColors.grey2,
-            child: Container(
-              width: 100,
-              color: DesignColors.grey2,
-              constraints: const BoxConstraints(minWidth: 100),
-              child: Text('', style: textTheme.headlineMedium),
-            ),
+          child: LoadingContainer(
+            height: textTheme.headlineMedium?.fontSize,
+            width: 100,
+            boxConstraints: const BoxConstraints(minWidth: 100),
           ),
         ),
       );

lib/views/pages/menu/my_account_page/identity_registrar/ir_record_status_chip/ir_record_status_chip.dart

@@ -5,7 +5,7 @@ import 'package:miro/generated/l10n.dart';
 import 'package:miro/shared/models/identity_registrar/ir_record_model.dart';
 import 'package:miro/shared/models/identity_registrar/ir_record_status.dart';
 import 'package:miro/views/pages/menu/my_account_page/identity_registrar/ir_record_status_chip/ir_record_status_chip_model.dart';
-import 'package:shimmer/shimmer.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 
 class IRRecordStatusChip extends StatelessWidget {
   final bool loadingBool;
@@ -22,17 +22,10 @@ class IRRecordStatusChip extends StatelessWidget {
     TextTheme textTheme = Theme.of(context).textTheme;
 
     if (loadingBool) {
-      return Shimmer.fromColors(
-        baseColor: DesignColors.grey3,
-        highlightColor: DesignColors.grey2,
-        child: Container(
-          width: 80,
-          height: 20,
-          decoration: const BoxDecoration(
-            color: DesignColors.grey2,
-            borderRadius: BorderRadius.all(Radius.circular(5)),
-          ),
-        ),
+      return const LoadingContainer(
+        height: 20,
+        width: 80,
+        circularBorderRadius: 5,
       );
     }
 

lib/views/pages/menu/my_account_page/identity_registrar/ir_record_value_widget/ir_record_text_value_widget.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:miro/config/theme/design_colors.dart';
 import 'package:miro/views/widgets/generic/expandable_text.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 import 'package:miro/views/widgets/generic/prefixed_widget.dart';
 import 'package:miro/views/widgets/generic/responsive/responsive_value.dart';
-import 'package:shimmer/shimmer.dart';
 
 class IRRecordTextValueWidget extends StatefulWidget {
   final bool loadingBool;
@@ -32,17 +32,10 @@ class _IRRecordTextValueWidget extends State<IRRecordTextValueWidget> {
     late Widget child;
 
     if (widget.loadingBool) {
-      child = Shimmer.fromColors(
-        baseColor: DesignColors.grey3,
-        highlightColor: DesignColors.grey2,
-        child: Container(
-          width: 80,
-          height: 20,
-          decoration: const BoxDecoration(
-            color: DesignColors.grey2,
-            borderRadius: BorderRadius.all(Radius.circular(5)),
-          ),
-        ),
+      child = const LoadingContainer(
+        height: 20,
+        width: 80,
+        circularBorderRadius: 5,
       );
     } else if (widget.expandableBool == false) {
       child = Text(

lib/views/pages/menu/my_account_page/identity_registrar/ir_record_value_widget/ir_record_urls_value_widget.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:miro/config/theme/design_colors.dart';
 import 'package:miro/shared/controllers/browser/browser_controller.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 import 'package:miro/views/widgets/generic/mouse_state_listener.dart';
 import 'package:miro/views/widgets/generic/prefixed_widget.dart';
-import 'package:shimmer/shimmer.dart';
 import 'package:url_recognizer/url_recognizer.dart';
 
 class IRRecordUrlsValueWidget extends StatelessWidget {
@@ -24,17 +24,10 @@ class IRRecordUrlsValueWidget extends StatelessWidget {
     late Widget child;
 
     if (loadingBool) {
-      child = Shimmer.fromColors(
-        baseColor: DesignColors.grey3,
-        highlightColor: DesignColors.grey2,
-        child: Container(
-          width: 80,
-          height: 20,
-          decoration: const BoxDecoration(
-            color: DesignColors.grey2,
-            borderRadius: BorderRadius.all(Radius.circular(5)),
-          ),
-        ),
+      child = const LoadingContainer(
+        height: 20,
+        width: 80,
+        circularBorderRadius: 5,
       );
     } else if (urls.isEmpty) {
       child = const Text('---');

lib/views/widgets/generic/account/account_header.dart

@@ -5,10 +5,10 @@ import 'package:miro/shared/models/identity_registrar/ir_model.dart';
 import 'package:miro/views/widgets/generic/account/account_tile_layout.dart';
 import 'package:miro/views/widgets/generic/copy_wrapper/copy_button.dart';
 import 'package:miro/views/widgets/generic/copy_wrapper/copy_wrapper.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 import 'package:miro/views/widgets/generic/responsive/responsive_value.dart';
 import 'package:miro/views/widgets/generic/responsive/responsive_widget.dart';
 import 'package:miro/views/widgets/kira/kira_identity_avatar.dart';
-import 'package:shimmer/shimmer.dart';
 
 class AccountHeader extends StatelessWidget {
   final IRModel? irModel;
@@ -36,29 +36,15 @@ class AccountHeader extends StatelessWidget {
           loadingBool: true,
           size: avatarSize,
         ),
-        usernameWidget: Shimmer.fromColors(
-          baseColor: DesignColors.grey3,
-          highlightColor: DesignColors.grey2,
-          child: Container(
-            width: 150,
-            height: textTheme.bodyLarge?.fontSize,
-            decoration: const BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(5)),
-              color: DesignColors.grey2,
-            ),
-          ),
+        usernameWidget: LoadingContainer(
+          height: textTheme.bodyLarge?.fontSize,
+          width: 150,
+          circularBorderRadius: 5,
         ),
-        addressWidget: Shimmer.fromColors(
-          baseColor: DesignColors.grey3,
-          highlightColor: DesignColors.grey2,
-          child: Container(
-            width: 200,
-            height: textTheme.bodyMedium?.fontSize,
-            decoration: const BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(5)),
-              color: DesignColors.grey2,
-            ),
-          ),
+        addressWidget: LoadingContainer(
+          height: textTheme.bodyMedium?.fontSize,
+          width: 200,
+          circularBorderRadius: 5,
         ),
       );
     } else {

lib/views/widgets/generic/account/account_tile.dart

@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:miro/config/theme/design_colors.dart';
 import 'package:miro/shared/models/wallet/wallet_address.dart';
 import 'package:miro/views/widgets/generic/account/account_tile_layout.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 import 'package:miro/views/widgets/kira/kira_identity_avatar.dart';
-import 'package:shimmer/shimmer.dart';
 
 class AccountTile extends StatefulWidget {
   final WalletAddress walletAddress;
@@ -43,29 +43,15 @@ class _AccountTile extends State<AccountTile> {
           loadingBool: true,
           size: widget.size,
         ),
-        usernameWidget: Shimmer.fromColors(
-          baseColor: DesignColors.grey3,
-          highlightColor: DesignColors.grey2,
-          child: Container(
-            width: 150,
-            height: (widget.usernameTextStyle ?? textTheme.bodyMedium)?.fontSize,
-            decoration: const BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(5)),
-              color: DesignColors.grey2,
-            ),
-          ),
+        usernameWidget: LoadingContainer(
+          height: (widget.usernameTextStyle ?? textTheme.bodyMedium)?.fontSize,
+          width: 150,
+          circularBorderRadius: 5,
         ),
-        addressWidget: Shimmer.fromColors(
-          baseColor: DesignColors.grey3,
-          highlightColor: DesignColors.grey2,
-          child: Container(
-            width: 200,
-            height: (widget.addressTextStyle ?? textTheme.bodySmall)?.fontSize,
-            decoration: const BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(5)),
-              color: DesignColors.grey2,
-            ),
-          ),
+        addressWidget: LoadingContainer(
+          height: (widget.addressTextStyle ?? textTheme.bodySmall)?.fontSize,
+          width: 200,
+          circularBorderRadius: 5,
         ),
       );
     }

lib/views/widgets/generic/loading_container.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:miro/config/theme/design_colors.dart';
+
+class LoadingContainer extends StatelessWidget {
+  final double? height;
+  final double? width;
+  final double? circularBorderRadius;
+  final BoxConstraints? boxConstraints;
+
+  const LoadingContainer({
+    this.height,
+    this.width,
+    this.circularBorderRadius,
+    this.boxConstraints,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: height,
+      width: width,
+      decoration: BoxDecoration(
+        borderRadius: circularBorderRadius != null ? BorderRadius.circular(circularBorderRadius!) : null,
+        color: DesignColors.grey2,
+      ),
+      constraints: boxConstraints,
+    );
+  }
+}

lib/views/widgets/generic/prefixed_widget.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:miro/config/theme/design_colors.dart';
-import 'package:shimmer/shimmer.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 
 class PrefixedWidget extends StatelessWidget {
   final String prefix;
@@ -47,17 +47,10 @@ class PrefixedWidget extends StatelessWidget {
               ),
               const SizedBox(height: 4),
               if (loadingBool)
-                Shimmer.fromColors(
-                  baseColor: DesignColors.grey3,
-                  highlightColor: DesignColors.grey2,
-                  child: Container(
-                    width: width,
-                    height: height,
-                    decoration: const BoxDecoration(
-                      color: DesignColors.grey2,
-                      borderRadius: BorderRadius.all(Radius.circular(5)),
-                    ),
-                  ),
+                LoadingContainer(
+                  height: height,
+                  width: width,
+                  circularBorderRadius: 5,
                 )
               else if (child == null)
                 Text(

lib/views/widgets/kira/kira_identity_avatar.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:miro/config/theme/design_colors.dart';
 import 'package:miro/views/widgets/generic/jdenticon_gravatar.dart';
+import 'package:miro/views/widgets/generic/loading_container.dart';
 import 'package:miro/views/widgets/generic/url_avatar_widget.dart';
-import 'package:shimmer/shimmer.dart';
 
 class KiraIdentityAvatar extends StatefulWidget {
   final double size;
@@ -29,14 +29,9 @@ class _KiraIdentityAvatarState extends State<KiraIdentityAvatar> {
   Widget build(BuildContext context) {
     if (widget.loadingBool) {
       return ClipOval(
-        child: Shimmer.fromColors(
-          baseColor: DesignColors.grey3,
-          highlightColor: DesignColors.grey2,
-          child: Container(
-            width: widget.size,
-            height: widget.size,
-            color: DesignColors.grey2,
-          ),
+        child: LoadingContainer(
+          height: widget.size,
+          width: widget.size,
         ),
       );
     } else if (widget.address == null) {