From fb2ef4b0a1e3dc391380483eeb2325e51c01a257 Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Wed, 31 Dec 2025 11:18:31 -0500
Subject: [PATCH] chore: Delay until screen darkening (#5009)

---
 lib/pages/chat/chat.dart                      | 14 ++++
 .../common/widgets/transparent_backdrop.dart  | 71 +++++++++++--------
 2 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart
index 1a2bf8eec..31eec29e2 100644
--- a/lib/pages/chat/chat.dart
+++ b/lib/pages/chat/chat.dart
@@ -51,6 +51,7 @@ import 'package:fluffychat/pangea/common/controllers/pangea_controller.dart';
 import 'package:fluffychat/pangea/common/utils/error_handler.dart';
 import 'package:fluffychat/pangea/common/utils/firebase_analytics.dart';
 import 'package:fluffychat/pangea/common/utils/overlay.dart';
+import 'package:fluffychat/pangea/common/widgets/transparent_backdrop.dart';
 import 'package:fluffychat/pangea/constructs/construct_identifier.dart';
 import 'package:fluffychat/pangea/events/constants/pangea_event_types.dart';
 import 'package:fluffychat/pangea/events/event_wrappers/pangea_message_event.dart';
@@ -2058,6 +2059,19 @@ class ChatController extends State<ChatPageWithRoom>
 
     if (buttonEventID == event.eventId) {
       depressMessageButton.value = true;
+      OverlayUtil.showOverlay(
+        context: context,
+        child: TransparentBackdrop(
+          backgroundColor: Colors.black,
+          onDismiss: clearSelectedEvents,
+          blurBackground: true,
+          animateBackground: true,
+          backgroundAnimationDuration: const Duration(milliseconds: 200),
+        ),
+        position: OverlayPositionEnum.centered,
+        overlayKey: "button_message_backdrop",
+      );
+
       Future.delayed(const Duration(milliseconds: 200), () {
         if (_router.state.path != ':roomid') {
           // The user has navigated away from the chat,
diff --git a/lib/pangea/common/widgets/transparent_backdrop.dart b/lib/pangea/common/widgets/transparent_backdrop.dart
index 7bf26dcde..7103d1e0e 100644
--- a/lib/pangea/common/widgets/transparent_backdrop.dart
+++ b/lib/pangea/common/widgets/transparent_backdrop.dart
@@ -9,45 +9,58 @@ class TransparentBackdrop extends StatelessWidget {
   final VoidCallback? onDismiss;
   final bool blurBackground;
 
+  /// New
+  final bool animateBackground;
+  final Duration backgroundAnimationDuration;
+
   const TransparentBackdrop({
     super.key,
     this.onDismiss,
     this.backgroundColor,
     this.blurBackground = false,
+    this.animateBackground = false,
+    this.backgroundAnimationDuration = const Duration(milliseconds: 200),
   });
 
   @override
   Widget build(BuildContext context) {
-    return Material(
-      borderOnForeground: false,
-      color:
-          backgroundColor?.withAlpha((0.8 * 255).round()) ?? Colors.transparent,
-      clipBehavior: Clip.antiAlias,
-      child: InkWell(
-        hoverColor: Colors.transparent,
-        splashColor: Colors.transparent,
-        focusColor: Colors.transparent,
-        highlightColor: Colors.transparent,
-        onTap: () {
-          if (onDismiss != null) {
-            onDismiss!();
-          }
-          MatrixState.pAnyState.closeOverlay();
-        },
-        child: BackdropFilter(
-          filter: blurBackground
-              ? ImageFilter.blur(
-                  sigmaX: 3.0,
-                  sigmaY: 3.0,
-                )
-              : ImageFilter.blur(sigmaX: 0, sigmaY: 0),
-          child: Container(
-            height: double.infinity,
-            width: double.infinity,
-            color: Colors.transparent,
-          ),
-        ),
+    final Color targetColor =
+        backgroundColor?.withAlpha((0.8 * 255).round()) ?? Colors.transparent;
+
+    return TweenAnimationBuilder<double>(
+      tween: Tween<double>(
+        begin: animateBackground ? 0.0 : 1.0,
+        end: 1.0,
       ),
+      duration: animateBackground ? backgroundAnimationDuration : Duration.zero,
+      builder: (context, t, child) {
+        return Material(
+          borderOnForeground: false,
+          color: Color.lerp(
+            Colors.transparent,
+            targetColor,
+            t,
+          ),
+          clipBehavior: Clip.antiAlias,
+          child: InkWell(
+            hoverColor: Colors.transparent,
+            splashColor: Colors.transparent,
+            focusColor: Colors.transparent,
+            highlightColor: Colors.transparent,
+            onTap: () {
+              onDismiss?.call();
+              MatrixState.pAnyState.closeOverlay();
+            },
+            child: BackdropFilter(
+              filter: ImageFilter.blur(
+                sigmaX: blurBackground ? 3.0 * t : 0,
+                sigmaY: blurBackground ? 3.0 * t : 0,
+              ),
+              child: const SizedBox.expand(),
+            ),
+          ),
+        );
+      },
     );
   }
 }