msg_list: Use scale down with opacity animation for mark-as-read

Fixes: zulip#613

Author: Khader-1

lib/widgets/message_list.dart

@@ -438,30 +438,40 @@ class ScrollToBottomButton extends StatelessWidget {
   }
 }
 
-class MarkAsReadWidget extends StatelessWidget {
+class MarkAsReadWidget extends StatefulWidget {
   const MarkAsReadWidget({super.key, required this.narrow});
 
   final Narrow narrow;
 
+  @override
+  State<MarkAsReadWidget> createState() => MarkAsReadWidgetState();
+}
+
+class MarkAsReadWidgetState extends State<MarkAsReadWidget> {
+  bool isLoading = false;
+
   void _handlePress(BuildContext context) async {
     if (!context.mounted) return;
 
     final store = PerAccountStoreWidget.of(context);
     final connection = store.connection;
     final useLegacy = connection.zulipFeatureLevel! < 155;
+    setState(() => isLoading = true);
 
     try {
-      await markNarrowAsRead(context, narrow, useLegacy);
+      await markNarrowAsRead(context, widget.narrow, useLegacy);
     } catch (e) {
       if (!context.mounted) return;
       final zulipLocalizations = ZulipLocalizations.of(context);
       await showErrorDialog(context: context,
         title: zulipLocalizations.errorMarkAsReadFailedTitle,
         message: e.toString()); // TODO(#741): extract user-facing message better
       return;
+    } finally {
+      setState(() => isLoading = false);
     }
     if (!context.mounted) return;
-    if (narrow is CombinedFeedNarrow && !useLegacy) {
+    if (widget.narrow is CombinedFeedNarrow && !useLegacy) {
       PerAccountStoreWidget.of(context).unreads.handleAllMessagesReadSuccess();
     }
   }
@@ -470,15 +480,14 @@ class MarkAsReadWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
     final store = PerAccountStoreWidget.of(context);
-    final unreadCount = store.unreads.countInNarrow(narrow);
+    final unreadCount = store.unreads.countInNarrow(widget.narrow);
     final areMessagesRead = unreadCount == 0;
 
     return IgnorePointer(
       ignoring: areMessagesRead,
-      child: AnimatedOpacity(
-        opacity: areMessagesRead ? 0 : 1,
-        duration: Duration(milliseconds: areMessagesRead ? 2000 : 300),
-        curve: Curves.easeOut,
+      child: MarkAsReadAnimation(
+        visible: !areMessagesRead,
+        loading: isLoading,
         child: SizedBox(width: double.infinity,
           // Design referenced from:
           //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=132-9684&mode=design&t=jJwHzloKJ0TMOG4M-0
@@ -505,8 +514,7 @@ class MarkAsReadWidget extends StatelessWidget {
               ),
               onPressed: () => _handlePress(context),
               icon: const Icon(Icons.playlist_add_check),
-              label: Text(zulipLocalizations.markAllAsReadLabel))))),
-    );
+              label: Text(zulipLocalizations.markAllAsReadLabel))))));
   }
 }
 
@@ -643,6 +651,35 @@ class _UnreadMarker extends StatelessWidget {
   }
 }
 
+class MarkAsReadAnimation extends StatelessWidget {
+  const MarkAsReadAnimation({
+    super.key,
+    required this.visible,
+    required this.loading,
+    required this.child});
+
+  final bool visible;
+  final bool loading;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final opacity = loading ? 0.5 : visible ? 1.0 : 0.0;
+    final scale = loading ? 0.95 : 1.0;
+    const duration = Duration(milliseconds: 300);
+    const curve = Curves.easeOut;
+    return AnimatedScale(
+      scale: scale,
+      duration: duration,
+      curve: curve,
+      child: AnimatedOpacity(
+        opacity: opacity,
+        duration: duration,
+        curve: curve,
+        child: child));
+  }
+}
+
 class StreamMessageRecipientHeader extends StatelessWidget {
   const StreamMessageRecipientHeader({
     super.key,

test/widgets/message_list_test.dart

@@ -753,6 +753,74 @@ void main() {
           unreadMessageIds: [message.id]),
       ]);
 
+      group('MarkAsReadAnimation', () {
+        testWidgets('isLoading is changed correctly', (WidgetTester tester) async {
+          final narrow = TopicNarrow.ofMessage(message);
+          await setupMessageListPage(tester,
+            narrow: narrow, messages: [message], unreadMsgs: unreadMsgs);
+          check(isMarkAsReadButtonVisible(tester)).isTrue();
+
+          connection.prepare(json: UpdateMessageFlagsForNarrowResult(
+            processedCount: 11, updatedCount: 3,
+            firstProcessedId: null, lastProcessedId: null,
+            foundOldest: true, foundNewest: true).toJson());
+
+          // Verify isLoading is initially false
+          final state = tester.state<MarkAsReadWidgetState>(find.byType(MarkAsReadWidget));
+          check(state.isLoading).isFalse();
+
+          // Simulate button press and verify isLoading is true
+          await tester.tap(find.byType(MarkAsReadWidget));
+          await tester.pump();
+          check(state.isLoading).isTrue();
+
+          // Simulate completion of markNarrowAsRead and verify isLoading is false
+          await tester.idle();
+          await tester.pump();
+          check(state.isLoading).isFalse();
+        });
+
+        testWidgets('MarkAsReadAnimation displays correctly based on visible and loading', (WidgetTester tester) async {
+          final child = Container();
+
+          // Test loading state
+          await tester.pumpWidget(MaterialApp(
+            home: MarkAsReadAnimation(
+              visible: false,
+              loading: true,
+              child: child,
+            ),
+          ));
+          check(find.byWidget(child).evaluate()).length.equals(1);
+          check(tester.widget<AnimatedOpacity>(find.byType(AnimatedOpacity)).opacity).equals(0.5);
+          check(tester.widget<AnimatedScale>(find.byType(AnimatedScale)).scale).equals(0.95);
+
+          // Test visible state
+          await tester.pumpWidget(MaterialApp(
+            home: MarkAsReadAnimation(
+              visible: true,
+              loading: false,
+              child: child,
+            ),
+          ));
+          check(find.byWidget(child).evaluate()).length.equals(1);
+          check(tester.widget<AnimatedOpacity>(find.byType(AnimatedOpacity)).opacity).equals(1);
+          check(tester.widget<AnimatedScale>(find.byType(AnimatedScale)).scale).equals(1);
+
+          // Test default state
+          await tester.pumpWidget(MaterialApp(
+            home: MarkAsReadAnimation(
+              visible: false,
+              loading: false,
+              child: child,
+            ),
+          ));
+          check(find.byWidget(child).evaluate()).length.equals(1);
+          check(tester.widget<AnimatedOpacity>(find.byType(AnimatedOpacity)).opacity).equals(0);
+          check(tester.widget<AnimatedScale>(find.byType(AnimatedScale)).scale).equals(1);
+        });
+      });
+
       testWidgets('smoke test on modern server', (WidgetTester tester) async {
         final narrow = TopicNarrow.ofMessage(message);
         await setupMessageListPage(tester,