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

Fixes: #613

Author: Khader-1

lib/widgets/message_list.dart

@@ -486,10 +486,9 @@ class MarkAsReadWidgetState extends State<MarkAsReadWidget> {
 
     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
@@ -653,6 +652,36 @@ 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, scale) = loading
+      ? (0.5, 0.95)
+      : visible ? (1.0 , 1.0) : (0.0, 0.0);
+    const duration = Duration(milliseconds: 500);
+    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

@@ -779,6 +779,46 @@ void main() {
           await tester.pump();
           check(state.isLoading).isFalse();
         });
+
+        testWidgets('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(0);
+        });
       });
 
       testWidgets('smoke test on modern server', (WidgetTester tester) async {