Merge pull request #4869 from pangeachat/4868-word-card-loading-indicators

update loading indicators in word zoom card

lib/pangea/analytics_misc/text_loading_shimmer.dart

@@ -6,23 +6,27 @@ import 'package:fluffychat/config/app_config.dart';
 
 class TextLoadingShimmer extends StatelessWidget {
   final double width;
+  final double? height;
+
   const TextLoadingShimmer({
     super.key,
     this.width = 140.0,
+    this.height,
   });
 
   @override
   Widget build(BuildContext context) {
     return Shimmer.fromColors(
-      baseColor: Colors.transparent, // Base color of the shimmer effect
-      // for higlight, use white with 50 opacity
+      baseColor: Colors.transparent,
       highlightColor: Theme.of(context).colorScheme.primary.withAlpha(70),
       child: Container(
-        height: AppConfig.messageFontSize * AppConfig.fontSizeFactor,
-        width: width, // Width of the rectangle
-        color: Theme.of(context)
-            .colorScheme
-            .primary, // Background color of the rectangle
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(4.0),
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        height:
+            height ?? (AppConfig.messageFontSize * AppConfig.fontSizeFactor),
+        width: width,
       ),
     );
   }

lib/pangea/lemmas/lemma_highlight_emoji_row.dart

@@ -2,6 +2,8 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 
+import 'package:shimmer/shimmer.dart';
+
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pangea/analytics_misc/get_analytics_controller.dart';
 import 'package:fluffychat/pangea/common/utils/overlay.dart';
@@ -62,36 +64,50 @@ class LemmaHighlightEmojiRowState extends State<LemmaHighlightEmojiRow> {
       langCode: widget.langCode,
       constructId: widget.cId,
       builder: (context, controller) {
-        if (controller.isLoading) {
-          return const CircularProgressIndicator.adaptive();
-        }
-
-        final emojis = controller.lemmaInfo?.emoji;
-        if (controller.error != null || emojis == null || emojis.isEmpty) {
+        if (controller.error != null) {
           return const SizedBox.shrink();
         }
 
+        final emojis = controller.lemmaInfo?.emoji;
         return SizedBox(
           height: 70.0,
           child: Row(
             spacing: 4.0,
             mainAxisSize: MainAxisSize.min,
-            children: emojis
-                .map(
-                  (emoji) => EmojiChoiceItem(
-                    cId: widget.cId,
-                    emoji: emoji,
-                    onSelectEmoji: () => widget.onEmojiSelected(emoji),
-                    selected: widget.emoji == emoji,
-                    transformTargetId:
-                        "emoji-choice-item-$emoji-${widget.cId.lemma}",
-                    badge: widget.emoji == emoji
-                        ? widget.selectedEmojiBadge
-                        : null,
-                    showShimmer: widget.emoji == null,
-                  ),
-                )
-                .toList(),
+            children: emojis == null || emojis.isEmpty
+                ? List.generate(
+                    3,
+                    (_) => Shimmer.fromColors(
+                      baseColor: Colors.transparent,
+                      highlightColor:
+                          Theme.of(context).colorScheme.primary.withAlpha(70),
+                      child: Container(
+                        height: 55.0,
+                        width: 55.0,
+                        decoration: BoxDecoration(
+                          color: Theme.of(context).colorScheme.primary,
+                          borderRadius:
+                              BorderRadius.circular(AppConfig.borderRadius),
+                        ),
+                      ),
+                    ),
+                  )
+                : emojis
+                    .map(
+                      (emoji) => EmojiChoiceItem(
+                        cId: widget.cId,
+                        emoji: emoji,
+                        onSelectEmoji: () => widget.onEmojiSelected(emoji),
+                        selected: widget.emoji == emoji,
+                        transformTargetId:
+                            "emoji-choice-item-$emoji-${widget.cId.lemma}",
+                        badge: widget.emoji == emoji
+                            ? widget.selectedEmojiBadge
+                            : null,
+                        showShimmer: widget.emoji == null,
+                      ),
+                    )
+                    .toList(),
           ),
         );
       },

lib/pangea/phonetic_transcription/phonetic_transcription_widget.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 
 import 'package:fluffychat/l10n/l10n.dart';
+import 'package:fluffychat/pangea/analytics_misc/text_loading_shimmer.dart';
 import 'package:fluffychat/pangea/common/network/requests.dart';
 import 'package:fluffychat/pangea/common/widgets/error_indicator.dart';
 import 'package:fluffychat/pangea/languages/language_model.dart';
@@ -105,10 +106,9 @@ class _PhoneticTranscriptionWidgetState
 
                   if (controller.isLoading ||
                       controller.transcription == null) {
-                    return const SizedBox(
-                      width: 16,
-                      height: 16,
-                      child: CircularProgressIndicator.adaptive(),
+                    return const TextLoadingShimmer(
+                      width: 125.0,
+                      height: 20.0,
                     );
                   }
 

lib/pangea/toolbar/word_card/lemma_meaning_display.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:fluffychat/l10n/l10n.dart';
+import 'package:fluffychat/pangea/analytics_misc/text_loading_shimmer.dart';
 import 'package:fluffychat/pangea/common/widgets/error_indicator.dart';
 import 'package:fluffychat/pangea/constructs/construct_identifier.dart';
 import 'package:fluffychat/pangea/lemmas/lemma_meaning_builder.dart';
@@ -31,7 +32,10 @@ class LemmaMeaningDisplay extends StatelessWidget {
         }
 
         if (controller.isLoading || controller.lemmaInfo == null) {
-          return const CircularProgressIndicator.adaptive();
+          return const TextLoadingShimmer(
+            width: 125.0,
+            height: 20.0,
+          );
         }
 
         if (constructId.lemma.toLowerCase() == text.toLowerCase()) {