fix(image caching): used the CachedNetworkImage for icons to stop fet…

…ching them with every rebuild
pangeachat · Feb 21, 2025 · 1a04b35 · 1a04b35
1 parent 62d5a71
commit 1a04b35
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 55 deletions.
diff --git a/lib/pangea/analytics_details_popup/analytics_details_popup.dart b/lib/pangea/analytics_details_popup/analytics_details_popup.dart
@@ -10,6 +10,7 @@ import 'package:fluffychat/pangea/analytics_misc/construct_identifier.dart';
 import 'package:fluffychat/pangea/analytics_misc/construct_type_enum.dart';
 import 'package:fluffychat/pangea/analytics_summary/progress_indicators_enum.dart';
 import 'package:fluffychat/pangea/common/widgets/full_width_dialog.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 
 class AnalyticsPopupWrapper extends StatefulWidget {
   const AnalyticsPopupWrapper({
@@ -69,9 +70,11 @@ class AnalyticsPopupWrapperState extends State<AnalyticsPopupWrapper> {
                 height: 30.0,
                 width: 30.0,
                 child: InkWell(
-                  child: Image.network(
-                    '${AppConfig.assetsBaseURL}/${AnalyticsConstants.vocabIconFileName}',
-                  ),
+                  child: CachedNetworkImage(
+                    imageUrl: '${AppConfig.assetsBaseURL}/${AnalyticsConstants.vocabIconFileName}',
+                    placeholder: (context, url) => const CircularProgressIndicator(),
+                    errorWidget: (context, url, error) => const Icon(Icons.error),
+                    ),
                   onTap: () => setState(() {
                     localView = ConstructTypeEnum.vocab;
                     localConstructZoom = null;
@@ -85,8 +88,10 @@ class AnalyticsPopupWrapperState extends State<AnalyticsPopupWrapper> {
                 height: 30.0,
                 width: 30.0,
                 child: InkWell(
-                  child: Image.network(
-                    '${AppConfig.assetsBaseURL}/${AnalyticsConstants.morphIconFileName}',
+                  child: CachedNetworkImage(
+                    imageUrl: '${AppConfig.assetsBaseURL}/${AnalyticsConstants.morphIconFileName}',
+                    placeholder: (context, url) => const CircularProgressIndicator(),
+                    errorWidget: (context, url, error) => const Icon(Icons.error),
                   ),
                   onTap: () => setState(() {
                     localView = ConstructTypeEnum.morph;

diff --git a/lib/pangea/analytics_details_popup/analytics_details_popup_content.dart b/lib/pangea/analytics_details_popup/analytics_details_popup_content.dart
@@ -11,6 +11,7 @@ import 'package:fluffychat/pangea/analytics_misc/construct_identifier.dart';
 import 'package:fluffychat/pangea/analytics_misc/construct_level_enum.dart';
 import 'package:fluffychat/pangea/analytics_misc/construct_use_model.dart';
 import 'package:fluffychat/pangea/analytics_misc/learning_skills_enum.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 
 class AnalyticsDetailsViewContent extends StatelessWidget {
   final Widget title;
@@ -46,8 +47,10 @@ class AnalyticsDetailsViewContent extends StatelessWidget {
           headerContent,
           Padding(
             padding: const EdgeInsets.symmetric(vertical: 16.0),
-            child: Image.network(
-              "${AppConfig.assetsBaseURL}/${AnalyticsConstants.popupDividerFileName}",
+            child: CachedNetworkImage(
+              imageUrl: "${AppConfig.assetsBaseURL}/${AnalyticsConstants.popupDividerFileName}",
+              placeholder: (context, url) => const CircularProgressIndicator(),
+              errorWidget: (context, url, error) => const Icon(Icons.error),
             ),
           ),
           Row(

diff --git a/lib/pangea/bot/widgets/bot_face_svg.dart b/lib/pangea/bot/widgets/bot_face_svg.dart
@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:rive/rive.dart';
 
 import 'package:fluffychat/config/app_config.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 
 enum BotExpression { gold, nonGold, addled, idle, surprised }
 
@@ -122,7 +123,11 @@ class BotFaceState extends State<BotFace> {
               artboard: _artboard!,
               fit: BoxFit.cover,
             )
-          : Image.network(svgURL),
+          : CachedNetworkImage(
+              imageUrl: svgURL,
+              placeholder: (context, url) => const CircularProgressIndicator(),
+              errorWidget: (context, url, error) => const Icon(Icons.error),
+            ),
     );
   }
 }