From 5a60e15832ce0293c313f8d353f6435156795a58 Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Mon, 17 Feb 2025 12:51:51 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20if=20SVG=20content=20is=20already=20cach?=
 =?UTF-8?q?ed,=20don't=20use=20a=20FutureBuilder=20in=20C=E2=80=A6=20(#181?=
 =?UTF-8?q?6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: if SVG content is already cached, don't use a FutureBuilder in CustomizedSVG

* chore: fix emoji button width
---
 lib/pangea/common/widgets/customized_svg.dart | 27 +++++++++++++++----
 .../emoji_practice_button.dart                |  4 +--
 .../practice_activity_card.dart               |  5 ----
 .../widgets/word_zoom/word_zoom_widget.dart   |  2 +-
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/lib/pangea/common/widgets/customized_svg.dart b/lib/pangea/common/widgets/customized_svg.dart
index 175b4d0e0..3bba7e882 100644
--- a/lib/pangea/common/widgets/customized_svg.dart
+++ b/lib/pangea/common/widgets/customized_svg.dart
@@ -70,22 +70,39 @@ class CustomizedSvg extends StatelessWidget {
 
   Future<String?> _getModifiedSvg() async {
     final svgContent = await _fetchSvg();
-    String? modifiedSvg = svgContent;
+    final String? modifiedSvg = svgContent;
     if (modifiedSvg == null) {
       return null;
     }
 
-    // find the white and replace with black
-    // or find black and replace with white
-    modifiedSvg = modifiedSvg.replaceAll("fill=\"none\"", '');
+    return _modifySVG(modifiedSvg);
+  }
+
+  String _modifySVG(String svgContent) {
+    String modifiedSvg = svgContent.replaceAll("fill=\"none\"", '');
     for (final entry in colorReplacements.entries) {
-      modifiedSvg = modifiedSvg!.replaceAll(entry.key, entry.value);
+      modifiedSvg = modifiedSvg.replaceAll(entry.key, entry.value);
     }
     return modifiedSvg;
   }
 
+  String? _getSvgFromCache() {
+    final cachedSvgEntry = _svgStorage.read(svgUrl);
+    if (cachedSvgEntry != null &&
+        cachedSvgEntry is Map<String, dynamic> &&
+        cachedSvgEntry['svg'] is String) {
+      return _modifySVG(cachedSvgEntry['svg'] as String);
+    }
+    return null;
+  }
+
   @override
   Widget build(BuildContext context) {
+    final cached = _getSvgFromCache();
+    if (cached != null) {
+      return SvgPicture.string(cached);
+    }
+
     return FutureBuilder<String?>(
       future: _getModifiedSvg(),
       builder: (context, snapshot) {
diff --git a/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart b/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart
index ee4b67ea1..2c956e25e 100644
--- a/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart
+++ b/lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart
@@ -27,7 +27,7 @@ class EmojiPracticeButton extends StatelessWidget {
     final emoji = token.getEmoji();
     return _shouldDoActivity || emoji != null
         ? SizedBox(
-            width: 30,
+            width: 40,
             child: WordZoomActivityButton(
               icon: emoji == null
                   ? const Icon(Icons.add_reaction_outlined)
@@ -36,6 +36,6 @@ class EmojiPracticeButton extends StatelessWidget {
               onPressed: onPressed,
             ),
           )
-        : const SizedBox(width: 30);
+        : const SizedBox(width: 40);
   }
 }
diff --git a/lib/pangea/toolbar/widgets/practice_activity/practice_activity_card.dart b/lib/pangea/toolbar/widgets/practice_activity/practice_activity_card.dart
index ec12ccd42..bab6a0156 100644
--- a/lib/pangea/toolbar/widgets/practice_activity/practice_activity_card.dart
+++ b/lib/pangea/toolbar/widgets/practice_activity/practice_activity_card.dart
@@ -103,11 +103,9 @@ class PracticeActivityCardState extends State<PracticeActivityCard> {
     ActivityQualityFeedback? activityFeedback,
   }) async {
     _error = null;
-    debugger(when: kDebugMode);
     if (!mounted ||
         !pangeaController.languageController.languagesSet ||
         widget.overlayController.messageAnalyticsEntry == null) {
-      debugger(when: kDebugMode);
       _updateFetchingActivity(false);
       return;
     }
@@ -153,7 +151,6 @@ class PracticeActivityCardState extends State<PracticeActivityCard> {
   Future<PracticeActivityModel?> _fetchActivityModel({
     ActivityQualityFeedback? activityFeedback,
   }) async {
-    debugger(when: kDebugMode);
     debugPrint(
       "fetching activity model of type: ${widget.targetTokensAndActivityType.activityType}",
     );
@@ -217,8 +214,6 @@ class PracticeActivityCardState extends State<PracticeActivityCard> {
       context,
     );
 
-    debugger(when: kDebugMode);
-
     if (activityResponse.activity == null) return null;
 
     currentActivityCompleter = activityResponse.eventCompleter;
diff --git a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart
index 139732690..e5e71ffaa 100644
--- a/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart
+++ b/lib/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart
@@ -256,7 +256,7 @@ class WordZoomWidgetState extends State<WordZoomWidget> {
                             ],
                           ),
                         ),
-                        const SizedBox(width: 30),
+                        const SizedBox(width: 40),
                       ],
                     ),
                   ),