From 5dd7fffe105ef9172ecfb62a73e0bb9794177c7b Mon Sep 17 00:00:00 2001
From: ggurdin <ggurdin@gmail.com>
Date: Wed, 17 Dec 2025 13:08:15 -0500
Subject: [PATCH] practice buttons shimmer

---
 .../reading_assistance_input_bar.dart         | 14 +++---
 .../message_practice/toolbar_button.dart      | 47 ++++++++++++++-----
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/lib/pangea/toolbar/message_practice/reading_assistance_input_bar.dart b/lib/pangea/toolbar/message_practice/reading_assistance_input_bar.dart
index 782769ff3..4a7358ff3 100644
--- a/lib/pangea/toolbar/message_practice/reading_assistance_input_bar.dart
+++ b/lib/pangea/toolbar/message_practice/reading_assistance_input_bar.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import 'package:material_symbols_icons/symbols.dart';
+
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/pangea/events/models/pangea_token_model.dart';
@@ -59,6 +61,8 @@ class ReadingAssistanceInputBarState extends State<ReadingAssistanceInputBar> {
                       m.associatedActivityType!,
                     ),
                     isSelected: widget.controller.practiceMode == m,
+                    shimmer: widget.controller.practiceMode ==
+                        MessagePracticeMode.noneSelected,
                   ),
                 ),
               ],
@@ -133,13 +137,9 @@ class _ReadingAssistanceBarContent extends StatelessWidget {
       case MessagePracticeMode.noneSelected:
         return controller.isTotallyDone
             ? const _AllDoneWidget()
-            : Text(
-                L10n.of(context).choosePracticeMode,
-                style: Theme.of(context)
-                    .textTheme
-                    .bodyLarge
-                    ?.copyWith(fontStyle: FontStyle.italic),
-                textAlign: TextAlign.center,
+            : const Icon(
+                Symbols.fitness_center,
+                size: 60.0,
               );
 
       case MessagePracticeMode.wordEmoji:
diff --git a/lib/pangea/toolbar/message_practice/toolbar_button.dart b/lib/pangea/toolbar/message_practice/toolbar_button.dart
index 388d0a7ee..c4981c87e 100644
--- a/lib/pangea/toolbar/message_practice/toolbar_button.dart
+++ b/lib/pangea/toolbar/message_practice/toolbar_button.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import 'package:shimmer/shimmer.dart';
+
 import 'package:fluffychat/pangea/common/widgets/pressable_button.dart';
 import 'package:fluffychat/pangea/toolbar/message_practice/message_practice_mode_enum.dart';
 
@@ -9,12 +11,14 @@ class ToolbarButton extends StatelessWidget {
 
   final bool isComplete;
   final bool isSelected;
+  final bool shimmer;
 
   const ToolbarButton({
     required this.mode,
     required this.setMode,
     required this.isComplete,
     required this.isSelected,
+    this.shimmer = false,
     super.key,
   });
 
@@ -35,17 +39,38 @@ class ToolbarButton extends StatelessWidget {
           playSound: true,
           colorFactor:
               Theme.of(context).brightness == Brightness.light ? 0.55 : 0.3,
-          builder: (context, depressed, shadowColor) => Container(
-            height: 40.0,
-            width: 40.0,
-            decoration: BoxDecoration(
-              color: depressed ? shadowColor : color,
-              shape: BoxShape.circle,
-            ),
-            child: Icon(
-              mode.icon,
-              size: 20,
-            ),
+          builder: (context, depressed, shadowColor) => Stack(
+            alignment: Alignment.center,
+            children: [
+              Container(
+                height: 40.0,
+                width: 40.0,
+                decoration: BoxDecoration(
+                  color: depressed ? shadowColor : color,
+                  shape: BoxShape.circle,
+                ),
+              ),
+              if (shimmer)
+                Shimmer.fromColors(
+                  baseColor: Colors.transparent,
+                  highlightColor: Theme.of(context)
+                      .colorScheme
+                      .primaryContainer
+                      .withAlpha(0xAA),
+                  child: Container(
+                    height: 40.0,
+                    width: 40.0,
+                    decoration: BoxDecoration(
+                      color: depressed ? shadowColor : color,
+                      shape: BoxShape.circle,
+                    ),
+                  ),
+                ),
+              Icon(
+                mode.icon,
+                size: 20,
+              ),
+            ],
           ),
         ),
       ),