Merge f1fbd313a5 into baad38f0e6

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -619,6 +619,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   }
 
   void _onPop<T>(bool didPop, T? result) {
+    ref.read(currentAssetNotifier.notifier).clearAsset();
     ref.read(currentAssetNotifier.notifier).dispose();
   }
 

mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -8,9 +10,97 @@ import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 
+class _DelayedAnimation extends StatefulWidget {
+  final Widget child;
+  final bool show;
+  final Duration showDelay;
+  final Duration hideDelay;
+  final Duration showDuration;
+  final Duration hideDuration;
+
+  const _DelayedAnimation({
+    required this.child,
+    required this.show,
+    this.showDelay = const Duration(milliseconds: 0),
+    this.hideDelay = const Duration(milliseconds: 0),
+    this.showDuration = const Duration(milliseconds: 0),
+    this.hideDuration = const Duration(milliseconds: 0),
+  });
+
+  @override
+  State<_DelayedAnimation> createState() => _DelayedAnimationState();
+}
+
+class _DelayedAnimationState extends State<_DelayedAnimation> {
+  bool _show = false;
+  Duration _currentDuration = const Duration(milliseconds: 200);
+  Timer? _delayTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    // If starting with show=true, show immediately (no delay on initial render)
+    if (widget.show) {
+      _show = true;
+      _currentDuration = widget.showDuration;
+    }
+  }
+
+  @override
+  void didUpdateWidget(_DelayedAnimation oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    // Cancel any pending timer
+    _delayTimer?.cancel();
+
+    if (widget.show && !oldWidget.show) {
+      // Showing
+      _currentDuration = widget.showDuration;
+      if (widget.showDelay == Duration.zero) {
+        setState(() => _show = true);
+      } else {
+        _delayTimer = Timer(widget.showDelay, () {
+          if (mounted) {
+            setState(() => _show = true);
+          }
+        });
+      }
+    } else if (!widget.show && oldWidget.show) {
+      // Hiding
+      if (widget.hideDelay == Duration.zero) {
+        setState(() {
+          _currentDuration = widget.hideDuration;
+          _show = false;
+        });
+      } else {
+        _delayTimer = Timer(widget.hideDelay, () {
+          if (mounted) {
+            setState(() {
+              _currentDuration = widget.hideDuration;
+              _show = false;
+            });
+          }
+        });
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _delayTimer?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedOpacity(duration: _currentDuration, opacity: _show ? 1.0 : 0.0, child: widget.child);
+  }
+}
+
 class ThumbnailTile extends ConsumerWidget {
   const ThumbnailTile(
     this.asset, {
@@ -33,6 +123,8 @@ class ThumbnailTile extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final asset = this.asset;
     final heroIndex = heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+    final currentAsset = ref.watch(currentAssetNotifier);
+    final showIndicators = asset == null || asset != currentAsset;
 
     final assetContainerColor = context.isDarkTheme
         ? context.primaryColor.darken(amount: 0.4)
@@ -47,7 +139,11 @@ class ThumbnailTile extends ConsumerWidget {
 
     return Stack(
       children: [
-        Container(color: lockSelection ? context.colorScheme.surfaceContainerHighest : assetContainerColor),
+        _DelayedAnimation(
+          show: isSelected || lockSelection,
+          hideDelay: Durations.short4,
+          child: Container(color: lockSelection ? context.colorScheme.surfaceContainerHighest : assetContainerColor),
+        ),
         AnimatedContainer(
           duration: Durations.short4,
           curve: Curves.decelerate,
@@ -68,40 +164,60 @@ class ThumbnailTile extends ConsumerWidget {
                   ),
                 ),
                 if (asset != null)
-                  Align(
-                    alignment: Alignment.topRight,
-                    child: _AssetTypeIcons(asset: asset),
+                  _DelayedAnimation(
+                    show: showIndicators,
+                    showDelay: const Duration(milliseconds: 300),
+                    showDuration: const Duration(milliseconds: 200),
+                    hideDuration: const Duration(milliseconds: 150),
+                    child: Align(
+                      alignment: Alignment.topRight,
+                      child: _AssetTypeIcons(asset: asset),
+                    ),
                   ),
+
                 if (storageIndicator && asset != null)
-                  switch (asset.storage) {
-                    AssetState.local => const Align(
-                      alignment: Alignment.bottomRight,
-                      child: Padding(
-                        padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
-                        child: _TileOverlayIcon(Icons.cloud_off_outlined),
+                  _DelayedAnimation(
+                    show: showIndicators,
+                    showDelay: const Duration(milliseconds: 300),
+                    showDuration: const Duration(milliseconds: 200),
+                    hideDuration: const Duration(milliseconds: 150),
+                    child: switch (asset.storage) {
+                      AssetState.local => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_off_outlined),
+                        ),
                       ),
-                    ),
-                    AssetState.remote => const Align(
-                      alignment: Alignment.bottomRight,
-                      child: Padding(
-                        padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
-                        child: _TileOverlayIcon(Icons.cloud_outlined),
+                      AssetState.remote => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_outlined),
+                        ),
                       ),
-                    ),
-                    AssetState.merged => const Align(
-                      alignment: Alignment.bottomRight,
-                      child: Padding(
-                        padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
-                        child: _TileOverlayIcon(Icons.cloud_done_outlined),
+                      AssetState.merged => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_done_outlined),
+                        ),
                       ),
-                    ),
-                  },
+                    },
+                  ),
+
                 if (asset != null && asset.isFavorite)
-                  const Align(
-                    alignment: Alignment.bottomLeft,
-                    child: Padding(
-                      padding: EdgeInsets.only(left: 10.0, bottom: 6.0),
-                      child: _TileOverlayIcon(Icons.favorite_rounded),
+                  _DelayedAnimation(
+                    show: showIndicators,
+                    showDelay: const Duration(milliseconds: 300),
+                    showDuration: const Duration(milliseconds: 200),
+                    hideDuration: const Duration(milliseconds: 150),
+                    child: const Align(
+                      alignment: Alignment.bottomLeft,
+                      child: Padding(
+                        padding: EdgeInsets.only(left: 10.0, bottom: 6.0),
+                        child: _TileOverlayIcon(Icons.favorite_rounded),
+                      ),
                     ),
                   ),
               ],

mobile/lib/providers/infrastructure/asset_viewer/current_asset.provider.dart

@@ -25,6 +25,14 @@ class CurrentAssetNotifier extends AutoDisposeNotifier<BaseAsset?> {
     _keepAliveLink = ref.keepAlive();
   }
 
+  void clearAsset() {
+    _keepAliveLink?.close();
+    _assetSubscription?.cancel();
+    _keepAliveLink = null;
+    _assetSubscription = null;
+    state = null;
+  }
+
   void dispose() {
     _keepAliveLink?.close();
     _assetSubscription?.cancel();