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

Fixes: zulip#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(
+        loading: loading,
+        hidden: areMessagesRead,
         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
@@ -520,6 +519,49 @@ class MarkAsReadWidgetState extends State<MarkAsReadWidget> {
   }
 }
 
+class MarkAsReadAnimation extends StatefulWidget {
+  const MarkAsReadAnimation({
+    super.key,
+    required this.loading,
+    required this.hidden,
+    required this.child
+  });
+
+  final bool loading;
+  final bool hidden;
+  final Widget child;
+
+  @override
+  State<MarkAsReadAnimation> createState() => _MarkAsReadAnimationState();
+}
+
+class _MarkAsReadAnimationState extends State<MarkAsReadAnimation> {
+  bool _isPressed = false;
+
+  void _setScale(bool isPressed) {
+    setState(() {
+      _isPressed = isPressed;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTapDown: (_) => _setScale(true),
+      onTapUp: (_) => _setScale(false),
+      onTapCancel: () => _setScale(false),
+      child: AnimatedScale(
+        scale: _isPressed ? 0.95 : 1,
+        duration: const Duration(milliseconds: 100),
+        curve: Curves.easeOut,
+        child: AnimatedOpacity(
+          opacity: widget.hidden ? 0 : widget.loading ? 0.55 : 1,
+          duration: const Duration(milliseconds: 500),
+          curve: Curves.easeOut,
+          child: widget.child)));
+  }
+}
+
 class RecipientHeader extends StatelessWidget {
   const RecipientHeader({super.key, required this.message, required this.narrow});
 

test/widgets/message_list_test.dart

@@ -801,6 +801,46 @@ void main() {
 
           check(state.loading).isFalse();
         });
+
+        testWidgets('in idle state', (WidgetTester tester) async {
+          final child = Container();
+
+          await tester.pumpWidget(MaterialApp(
+	            home: MarkAsReadAnimation(hidden: false, loading: false, child: child)));
+
+          check(find.byWidget(child).evaluate()).length.equals(1);
+          check(tester.widget<AnimatedOpacity>(find.byType(AnimatedOpacity)).opacity).equals(1);
+        });
+
+        testWidgets('in loading state', (WidgetTester tester) async {
+          final child = Container();
+
+          await tester.pumpWidget(MaterialApp(
+	            home: MarkAsReadAnimation(hidden: false, loading: true, child: child)));
+
+          check(find.byWidget(child).evaluate()).length.equals(1);
+          check(tester.widget<AnimatedOpacity>(find.byType(AnimatedOpacity)).opacity).equals(0.55);
+        });
+
+        testWidgets('in hidden state', (WidgetTester tester) async {
+          final child = Container();
+
+          await tester.pumpWidget(MaterialApp(
+	            home: MarkAsReadAnimation(hidden: true, loading: false, child: child)));
+
+          check(find.byWidget(child).evaluate()).length.equals(1);
+          check(tester.widget<AnimatedOpacity>(find.byType(AnimatedOpacity)).opacity).equals(0);
+        });
+
+        testWidgets('in hidden state but loading is true', (WidgetTester tester) async {
+          final child = Container();
+
+          await tester.pumpWidget(MaterialApp(
+	            home: MarkAsReadAnimation(hidden: true, loading: true, child: child)));
+
+          check(find.byWidget(child).evaluate()).length.equals(1);
+          check(tester.widget<AnimatedOpacity>(find.byType(AnimatedOpacity)).opacity).equals(0);
+        });
       });
 
       testWidgets('smoke test on modern server', (WidgetTester tester) async {