From ab0c12d4c88a1805246b7ddebd64977f58686e27 Mon Sep 17 00:00:00 2001 From: ggurdin Date: Wed, 17 Dec 2025 10:52:06 -0500 Subject: [PATCH] update loading indicators in word zoom card --- .../analytics_misc/text_loading_shimmer.dart | 18 +++--- .../lemmas/lemma_highlight_emoji_row.dart | 60 ++++++++++++------- .../phonetic_transcription_widget.dart | 8 +-- .../word_card/lemma_meaning_display.dart | 6 +- 4 files changed, 58 insertions(+), 34 deletions(-) diff --git a/lib/pangea/analytics_misc/text_loading_shimmer.dart b/lib/pangea/analytics_misc/text_loading_shimmer.dart index 77c565797..f22a87062 100644 --- a/lib/pangea/analytics_misc/text_loading_shimmer.dart +++ b/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, ), ); } diff --git a/lib/pangea/lemmas/lemma_highlight_emoji_row.dart b/lib/pangea/lemmas/lemma_highlight_emoji_row.dart index 8fe72106c..8fcd2d29f 100644 --- a/lib/pangea/lemmas/lemma_highlight_emoji_row.dart +++ b/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 { 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(), ), ); }, diff --git a/lib/pangea/phonetic_transcription/phonetic_transcription_widget.dart b/lib/pangea/phonetic_transcription/phonetic_transcription_widget.dart index afe549d73..42bafda33 100644 --- a/lib/pangea/phonetic_transcription/phonetic_transcription_widget.dart +++ b/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, ); } diff --git a/lib/pangea/toolbar/word_card/lemma_meaning_display.dart b/lib/pangea/toolbar/word_card/lemma_meaning_display.dart index aac4f1f8d..a7c1552b8 100644 --- a/lib/pangea/toolbar/word_card/lemma_meaning_display.dart +++ b/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()) {