From 8b28e6e659249fd9cf76095355d762de551eb2e8 Mon Sep 17 00:00:00 2001
From: Fabian Freund <github@fabi.online>
Date: Mon, 29 Dec 2025 10:08:21 +0100
Subject: [PATCH] fix browser fab animation issues

---
 .../browser/presentation/screens/browser.dart |  2 +-
 .../widgets/browser_modules/browser_fab.dart  | 42 +++++++++++++------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart b/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart
index 7d2f94e3..551a4a23 100644
--- a/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart
+++ b/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart
@@ -342,7 +342,7 @@ class BrowserScreen extends HookConsumerWidget {
               displayedSheet: null,
             ).preferredSize,
           ),
-          floatingActionButton: BrowserFab(),
+          floatingActionButton: const BrowserFab(),
         ),
       ),
     );
diff --git a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_fab.dart b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_fab.dart
index b88ad5ee..f0f7a0cd 100644
--- a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_fab.dart
+++ b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_fab.dart
@@ -26,6 +26,8 @@ import 'package:weblibre/features/geckoview/features/browser/presentation/contro
 import 'package:weblibre/features/geckoview/features/readerview/domain/providers/readerable.dart';
 
 class BrowserFab extends HookConsumerWidget {
+  const BrowserFab({super.key});
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final tabBarDismissed = ref.watch(tabBarDismissableControllerProvider);
@@ -42,22 +44,38 @@ class BrowserFab extends HookConsumerWidget {
       ),
     );
 
-    return Visibility(
-      visible: readerabilityState.active && appearanceButtonVisible,
-      replacement: tabBarDismissed
-          ? FloatingActionButton(
-              child: const Icon(MdiIcons.dockBottom),
-              onPressed: () {
-                ref.read(tabBarDismissableControllerProvider.notifier).show();
-              },
-            )
-          : const SizedBox.shrink(),
-      child: FloatingActionButton(
+    final Widget child;
+    if (readerabilityState.active && appearanceButtonVisible) {
+      child = FloatingActionButton(
+        key: const ValueKey('appearance_fab'),
+        heroTag: 'appearance_fab',
         onPressed: () async {
           await ref.read(readerableServiceProvider).onAppearanceButtonTap();
         },
         child: const Icon(MdiIcons.formatFont),
-      ),
+      );
+    } else if (tabBarDismissed) {
+      child = FloatingActionButton(
+        key: const ValueKey('dock_fab'),
+        heroTag: 'dock_fab',
+        onPressed: () {
+          ref.read(tabBarDismissableControllerProvider.notifier).show();
+        },
+        child: const Icon(MdiIcons.dockBottom),
+      );
+    } else {
+      child = const SizedBox.shrink(key: ValueKey('no_fab'));
+    }
+
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 200),
+      transitionBuilder: (child, animation) {
+        return ScaleTransition(
+          scale: animation,
+          child: child,
+        );
+      },
+      child: child,
     );
   }
 }