fix: if SVG content is already cached, don't use a FutureBuilder in C… (#1816)

* 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

@@ -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
+    return _modifySVG(modifiedSvg);
-    // or find black and replace with white
+  }
-    modifiedSvg = modifiedSvg.replaceAll("fill=\"none\"", '');
+
+  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) {

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);
   }
 }

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;

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),
                       ],
                     ),
                   ),