feat: redesign asset-viewer previous/next buttons (perf/prep for transitions), and hide nav button when no photo

feat: cache asset info for prev/next navigation
feat: PreloadManager - improve perf and standardize preloading behevior
2025-12-29 01:11:52 +03:00 · 2025-12-28 17:56:56 +00:00 · 2025-12-28 16:06:27 +00:00 · 2025-12-28 16:05:30 +00:00 · 2025-12-28 14:28:48 +00:00 · 2025-12-27 16:02:42 -06:00
44 changed files with 1716 additions and 948 deletions
--- a/docker/docker-compose.prod.yml
+++ b/docker/docker-compose.prod.yml
@@ -83,7 +83,7 @@ services:
    container_name: immich_prometheus
    ports:
      - 9090:9090
-    image: prom/prometheus@sha256:2b6f734e372c1b4717008f7d0a0152316aedd4d13ae17ef1e3268dbfaf68041b
+    image: prom/prometheus@sha256:d936808bdea528155c0154a922cd42fd75716b8bb7ba302641350f9f3eaeba09
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
      - prometheus-data:/prometheus
--- a/e2e/src/generators.ts
+++ b/e2e/src/generators.ts
@@ -26,6 +26,5 @@ export const makeRandomImage = () => {
  if (!value) {
    throw new Error('Ran out of random asset data');
  }
-
  return value;
 };
--- a/e2e/src/web/specs/photo-viewer.e2e-spec.ts
+++ b/e2e/src/web/specs/photo-viewer.e2e-spec.ts
@@ -3,7 +3,7 @@ import { Page, expect, test } from '@playwright/test';
 import { utils } from 'src/utils';

 function imageLocator(page: Page) {
-  return page.getByAltText('Image taken on').locator('visible=true');
+  return page.getByAltText('Image taken').locator('visible=true');
 }
 test.describe('Photo Viewer', () => {
  let admin: LoginResponseDto;
--- a/mobile/lib/presentation/pages/drift_remote_album.page.dart
+++ b/mobile/lib/presentation/pages/drift_remote_album.page.dart
@@ -171,67 +171,6 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
    unawaited(context.pushRoute(DriftActivitiesRoute(album: _album)));
  }

-  Future<void> showOptionSheet(BuildContext context) async {
-    final user = ref.watch(currentUserProvider);
-    final isOwner = user != null ? user.id == _album.ownerId : false;
-    final canAddPhotos =
-        await ref.read(remoteAlbumServiceProvider).getUserRole(_album.id, user?.id ?? '') == AlbumUserRole.editor;
-
-    unawaited(
-      showModalBottomSheet(
-        context: context,
-        backgroundColor: context.colorScheme.surface,
-        isScrollControlled: false,
-        builder: (context) {
-          return DriftRemoteAlbumOption(
-            onDeleteAlbum: isOwner
-                ? () async {
-                    await deleteAlbum(context);
-                    if (context.mounted) {
-                      context.pop();
-                    }
-                  }
-                : null,
-            onAddUsers: isOwner
-                ? () async {
-                    await addUsers(context);
-                    context.pop();
-                  }
-                : null,
-            onAddPhotos: isOwner || canAddPhotos
-                ? () async {
-                    await addAssets(context);
-                    context.pop();
-                  }
-                : null,
-            onToggleAlbumOrder: isOwner
-                ? () async {
-                    await toggleAlbumOrder();
-                    context.pop();
-                  }
-                : null,
-            onEditAlbum: isOwner
-                ? () async {
-                    context.pop();
-                    await showEditTitleAndDescription(context);
-                  }
-                : null,
-            onCreateSharedLink: isOwner
-                ? () async {
-                    context.pop();
-                    unawaited(context.pushRoute(SharedLinkEditRoute(albumId: _album.id)));
-                  }
-                : null,
-            onShowOptions: () {
-              context.pop();
-              context.pushRoute(DriftAlbumOptionsRoute(album: _album));
-            },
-          );
-        },
-      ),
-    );
-  }
-
  @override
  Widget build(BuildContext context) {
    final user = ref.watch(currentUserProvider);
@@ -249,8 +188,16 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
      child: Timeline(
        appBar: RemoteAlbumSliverAppBar(
          icon: Icons.photo_album_outlined,
-          onShowOptions: () => showOptionSheet(context),
-          onToggleAlbumOrder: isOwner ? () => toggleAlbumOrder() : null,
+          kebabMenu: _AlbumKebabMenu(
+            album: _album,
+            onDeleteAlbum: () => deleteAlbum(context),
+            onAddUsers: () => addUsers(context),
+            onAddPhotos: () => addAssets(context),
+            onToggleAlbumOrder: () => toggleAlbumOrder(),
+            onEditAlbum: () => showEditTitleAndDescription(context),
+            onCreateSharedLink: () => unawaited(context.pushRoute(SharedLinkEditRoute(albumId: _album.id))),
+            onShowOptions: () => context.pushRoute(DriftAlbumOptionsRoute(album: _album)),
+          ),
          onEditTitle: isOwner ? () => showEditTitleAndDescription(context) : null,
          onActivity: () => showActivity(context),
        ),
@@ -414,3 +361,77 @@ class _EditAlbumDialogState extends ConsumerState<_EditAlbumDialog> {
    );
  }
 }
+
+class _AlbumKebabMenu extends ConsumerWidget {
+  final RemoteAlbum album;
+  final VoidCallback? onDeleteAlbum;
+  final VoidCallback? onAddUsers;
+  final VoidCallback? onAddPhotos;
+  final VoidCallback? onToggleAlbumOrder;
+  final VoidCallback? onEditAlbum;
+  final VoidCallback? onCreateSharedLink;
+  final VoidCallback? onShowOptions;
+
+  const _AlbumKebabMenu({
+    required this.album,
+    this.onDeleteAlbum,
+    this.onAddUsers,
+    this.onAddPhotos,
+    this.onToggleAlbumOrder,
+    this.onEditAlbum,
+    this.onCreateSharedLink,
+    this.onShowOptions,
+  });
+
+  double _calculateScrollProgress(FlexibleSpaceBarSettings? settings) {
+    if (settings?.maxExtent == null || settings?.minExtent == null) {
+      return 1.0;
+    }
+
+    final deltaExtent = settings!.maxExtent - settings.minExtent;
+    if (deltaExtent <= 0.0) {
+      return 1.0;
+    }
+
+    return (1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent).clamp(0.0, 1.0);
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
+    final scrollProgress = _calculateScrollProgress(settings);
+
+    final iconColor = Color.lerp(Colors.white, context.primaryColor, scrollProgress);
+    final iconShadows = [
+      if (scrollProgress < 0.95)
+        Shadow(offset: const Offset(0, 2), blurRadius: 5, color: Colors.black.withValues(alpha: 0.5))
+      else
+        const Shadow(offset: Offset(0, 2), blurRadius: 0, color: Colors.transparent),
+    ];
+
+    final user = ref.watch(currentUserProvider);
+    final isOwner = user != null && user.id == album.ownerId;
+
+    return FutureBuilder<bool>(
+      future: ref
+          .read(remoteAlbumServiceProvider)
+          .getUserRole(album.id, user?.id ?? '')
+          .then((role) => role == AlbumUserRole.editor),
+      builder: (context, snapshot) {
+        final canAddPhotos = snapshot.data ?? false;
+
+        return DriftRemoteAlbumOption(
+          iconColor: iconColor,
+          iconShadows: iconShadows,
+          onDeleteAlbum: isOwner ? onDeleteAlbum : null,
+          onAddUsers: isOwner ? onAddUsers : null,
+          onAddPhotos: isOwner || canAddPhotos ? onAddPhotos : null,
+          onToggleAlbumOrder: isOwner ? onToggleAlbumOrder : null,
+          onEditAlbum: isOwner ? onEditAlbum : null,
+          onCreateSharedLink: isOwner ? onCreateSharedLink : null,
+          onShowOptions: onShowOptions,
+        );
+      },
+    );
+  }
+}
--- a/mobile/lib/presentation/widgets/action_buttons/base_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/base_action_button.widget.dart
@@ -53,7 +53,7 @@ class BaseActionButton extends ConsumerWidget {
        style: MenuItemButton.styleFrom(alignment: Alignment.centerLeft, padding: const EdgeInsets.all(16)),
        leadingIcon: Icon(iconData, color: effectiveIconColor),
        onPressed: onPressed,
-        child: Text(label, style: theme.textTheme.labelLarge?.copyWith(fontSize: 16)),
+        child: Text(label, style: theme.textTheme.labelLarge?.copyWith(fontSize: 16, color: iconColor)),
      );
    }

--- a/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart
@@ -92,6 +92,8 @@ class AssetViewer extends ConsumerStatefulWidget {
    if (asset.isVideo || asset.isMotionPhoto) {
      ref.read(videoPlaybackValueProvider.notifier).reset();
      ref.read(videoPlayerControlsProvider.notifier).pause();
+      // Hide controls by default for videos and motion photos
+      ref.read(assetViewerProvider.notifier).setControls(false);
    }
  }
 }
@@ -525,7 +527,13 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {

  void _onScaleStateChanged(PhotoViewScaleState scaleState) {
    if (scaleState != PhotoViewScaleState.initial) {
+      ref.read(assetViewerProvider.notifier).setControls(false);
      ref.read(videoPlayerControlsProvider.notifier).pause();
+      return;
+    }
+
+    if (!showingBottomSheet) {
+      ref.read(assetViewerProvider.notifier).setControls(true);
    }
  }

--- a/mobile/lib/presentation/widgets/remote_album/drift_album_option.widget.dart
+++ b/mobile/lib/presentation/widgets/remote_album/drift_album_option.widget.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';

 class DriftRemoteAlbumOption extends ConsumerWidget {
  const DriftRemoteAlbumOption({
@@ -14,6 +15,8 @@ class DriftRemoteAlbumOption extends ConsumerWidget {
    this.onToggleAlbumOrder,
    this.onEditAlbum,
    this.onShowOptions,
+    this.iconColor,
+    this.iconShadows,
  });

  final VoidCallback? onAddPhotos;
@@ -24,73 +27,131 @@ class DriftRemoteAlbumOption extends ConsumerWidget {
  final VoidCallback? onToggleAlbumOrder;
  final VoidCallback? onEditAlbum;
  final VoidCallback? onShowOptions;
+  final Color? iconColor;
+  final List<Shadow>? iconShadows;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    TextStyle textStyle = Theme.of(context).textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w600);
+    final theme = context.themeData;
+    final menuChildren = <Widget>[];

-    return SafeArea(
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 24.0),
-        child: ListView(
-          shrinkWrap: true,
-          children: [
-            if (onEditAlbum != null)
-              ListTile(
-                leading: const Icon(Icons.edit),
-                title: Text('edit_album'.t(context: context), style: textStyle),
-                onTap: onEditAlbum,
-              ),
-            if (onAddPhotos != null)
-              ListTile(
-                leading: const Icon(Icons.add_a_photo),
-                title: Text('add_photos'.t(context: context), style: textStyle),
-                onTap: onAddPhotos,
-              ),
-            if (onAddUsers != null)
-              ListTile(
-                leading: const Icon(Icons.group_add),
-                title: Text('album_viewer_page_share_add_users'.t(context: context), style: textStyle),
-                onTap: onAddUsers,
-              ),
-            if (onLeaveAlbum != null)
-              ListTile(
-                leading: const Icon(Icons.person_remove_rounded),
-                title: Text('leave_album'.t(context: context), style: textStyle),
-                onTap: onLeaveAlbum,
-              ),
-            if (onToggleAlbumOrder != null)
-              ListTile(
-                leading: const Icon(Icons.swap_vert_rounded),
-                title: Text('change_display_order'.t(context: context), style: textStyle),
-                onTap: onToggleAlbumOrder,
-              ),
-            if (onCreateSharedLink != null)
-              ListTile(
-                leading: const Icon(Icons.link),
-                title: Text('create_shared_link'.t(context: context), style: textStyle),
-                onTap: onCreateSharedLink,
-              ),
-            if (onShowOptions != null)
-              ListTile(
-                leading: const Icon(Icons.settings),
-                title: Text('options'.t(context: context), style: textStyle),
-                onTap: onShowOptions,
-              ),
-            if (onDeleteAlbum != null) ...[
-              const Divider(indent: 16, endIndent: 16),
-              ListTile(
-                leading: Icon(Icons.delete, color: context.isDarkTheme ? Colors.red[400] : Colors.red[800]),
-                title: Text(
-                  'delete_album'.t(context: context),
-                  style: textStyle.copyWith(color: context.isDarkTheme ? Colors.red[400] : Colors.red[800]),
-                ),
-                onTap: onDeleteAlbum,
-              ),
-            ],
-          ],
+    if (onEditAlbum != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'edit_album'.t(context: context),
+          iconData: Icons.edit,
+          onPressed: onEditAlbum,
+          menuItem: true,
        ),
+      );
+    }
+
+    if (onAddPhotos != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'add_photos'.t(context: context),
+          iconData: Icons.add_a_photo,
+          onPressed: onAddPhotos,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onAddUsers != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'album_viewer_page_share_add_users'.t(context: context),
+          iconData: Icons.group_add,
+          onPressed: onAddUsers,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onLeaveAlbum != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'leave_album'.t(context: context),
+          iconData: Icons.person_remove_rounded,
+          onPressed: onLeaveAlbum,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onToggleAlbumOrder != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'change_display_order'.t(context: context),
+          iconData: Icons.swap_vert_rounded,
+          onPressed: onToggleAlbumOrder,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onCreateSharedLink != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'create_shared_link'.t(context: context),
+          iconData: Icons.link,
+          onPressed: onCreateSharedLink,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onShowOptions != null) {
+      menuChildren.add(
+        BaseActionButton(
+          label: 'options'.t(context: context),
+          iconData: Icons.settings,
+          onPressed: onShowOptions,
+          menuItem: true,
+        ),
+      );
+    }
+
+    if (onDeleteAlbum != null) {
+      menuChildren.add(const Divider(height: 1));
+      menuChildren.add(
+        BaseActionButton(
+          label: 'delete_album'.t(context: context),
+          iconData: Icons.delete,
+          iconColor: context.isDarkTheme ? Colors.red[400] : Colors.red[800],
+          onPressed: onDeleteAlbum,
+          menuItem: true,
+        ),
+      );
+    }
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(theme.scaffoldBackgroundColor),
+        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
      ),
+      menuChildren: [
+        ConstrainedBox(
+          constraints: const BoxConstraints(minWidth: 150),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: menuChildren,
+          ),
+        ),
+      ],
+      builder: (context, controller, child) {
+        return IconButton(
+          icon: Icon(Icons.more_vert_rounded, color: iconColor ?? Colors.white, shadows: iconShadows),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+        );
+      },
    );
  }
 }
--- a/mobile/lib/providers/background_sync.provider.dart
+++ b/mobile/lib/providers/background_sync.provider.dart
@@ -5,16 +5,21 @@ import 'package:immich_mobile/providers/sync_status.provider.dart';

 final backgroundSyncProvider = Provider<BackgroundSyncManager>((ref) {
  final syncStatusNotifier = ref.read(syncStatusProvider.notifier);
-  final backupProvider = ref.read(driftBackupProvider.notifier);

  final manager = BackgroundSyncManager(
    onRemoteSyncStart: () {
      syncStatusNotifier.startRemoteSync();
-      backupProvider.updateError(BackupError.none);
+      final backupProvider = ref.read(driftBackupProvider.notifier);
+      if (backupProvider.mounted) {
+        backupProvider.updateError(BackupError.none);
+      }
    },
    onRemoteSyncComplete: (isSuccess) {
      syncStatusNotifier.completeRemoteSync();
-      backupProvider.updateError(isSuccess == true ? BackupError.none : BackupError.syncFailed);
+      final backupProvider = ref.read(driftBackupProvider.notifier);
+      if (backupProvider.mounted) {
+        backupProvider.updateError(isSuccess == true ? BackupError.none : BackupError.syncFailed);
+      }
    },
    onRemoteSyncError: syncStatusNotifier.errorRemoteSync,
    onLocalSyncStart: syncStatusNotifier.startLocalSync,
--- a/mobile/lib/providers/backup/drift_backup.provider.dart
+++ b/mobile/lib/providers/backup/drift_backup.provider.dart
@@ -212,8 +212,8 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
        ),
      ) {
    {
-      _uploadService.taskStatusStream.listen(_handleTaskStatusUpdate);
-      _uploadService.taskProgressStream.listen(_handleTaskProgressUpdate);
+      _statusSubscription = _uploadService.taskStatusStream.listen(_handleTaskStatusUpdate);
+      _progressSubscription = _uploadService.taskProgressStream.listen(_handleTaskProgressUpdate);
    }
  }

@@ -224,6 +224,10 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {

  /// Remove upload item from state
  void _removeUploadItem(String taskId) {
+    if (!mounted) {
+      _logger.warning("Skip _removeUploadItem: notifier disposed");
+      return;
+    }
    if (state.uploadItems.containsKey(taskId)) {
      final updatedItems = Map<String, DriftUploadStatus>.from(state.uploadItems);
      updatedItems.remove(taskId);
@@ -232,6 +236,10 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
  }

  void _handleTaskStatusUpdate(TaskStatusUpdate update) {
+    if (!mounted) {
+      _logger.warning("Skip _handleTaskStatusUpdate: notifier disposed");
+      return;
+    }
    final taskId = update.task.taskId;

    switch (update.status) {
@@ -291,6 +299,10 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
  }

  void _handleTaskProgressUpdate(TaskProgressUpdate update) {
+    if (!mounted) {
+      _logger.warning("Skip _handleTaskProgressUpdate: notifier disposed");
+      return;
+    }
    final taskId = update.task.taskId;
    final filename = update.task.displayName;
    final progress = update.progress;
@@ -332,7 +344,15 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
  }

  Future<void> getBackupStatus(String userId) async {
+    if (!mounted) {
+      _logger.warning("Skip getBackupStatus (pre-call): notifier disposed");
+      return;
+    }
    final counts = await _uploadService.getBackupCounts(userId);
+    if (!mounted) {
+      _logger.warning("Skip getBackupStatus (post-call): notifier disposed");
+      return;
+    }

    state = state.copyWith(
      totalCount: counts.total,
@@ -343,6 +363,10 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
  }

  void updateError(BackupError error) async {
+    if (!mounted) {
+      _logger.warning("Skip updateError: notifier disposed");
+      return;
+    }
    state = state.copyWith(error: error);
  }

@@ -360,10 +384,18 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
  }

  Future<void> cancel() async {
+    if (!mounted) {
+      _logger.warning("Skip cancel (pre-call): notifier disposed");
+      return;
+    }
    dPrint(() => "Canceling backup tasks...");
    state = state.copyWith(enqueueCount: 0, enqueueTotalCount: 0, isCanceling: true, error: BackupError.none);

    final activeTaskCount = await _uploadService.cancelBackup();
+    if (!mounted) {
+      _logger.warning("Skip cancel (post-call): notifier disposed");
+      return;
+    }

    if (activeTaskCount > 0) {
      dPrint(() => "$activeTaskCount tasks left, continuing to cancel...");
@@ -376,9 +408,17 @@ class DriftBackupNotifier extends StateNotifier<DriftBackupState> {
  }

  Future<void> handleBackupResume(String userId) async {
+    if (!mounted) {
+      _logger.warning("Skip handleBackupResume (pre-call): notifier disposed");
+      return;
+    }
    _logger.info("Resuming backup tasks...");
    state = state.copyWith(error: BackupError.none);
    final tasks = await _uploadService.getActiveTasks(kBackupGroup);
+    if (!mounted) {
+      _logger.warning("Skip handleBackupResume (post-call): notifier disposed");
+      return;
+    }
    _logger.info("Found ${tasks.length} tasks");

    if (tasks.isEmpty) {
--- a/mobile/lib/widgets/backup/backup_info_card.dart
+++ b/mobile/lib/widgets/backup/backup_info_card.dart
@@ -53,6 +53,7 @@ class BackupInfoCard extends StatelessWidget {
                      info,
                      style: context.textTheme.titleLarge?.copyWith(
                        color: context.colorScheme.onSurface.withAlpha(isLoading ? 50 : 255),
+                        fontFeatures: const [FontFeature.tabularFigures()],
                      ),
                    ),
                    if (isLoading)
--- a/mobile/lib/widgets/common/remote_album_sliver_app_bar.dart
+++ b/mobile/lib/widgets/common/remote_album_sliver_app_bar.dart
@@ -24,15 +24,13 @@ class RemoteAlbumSliverAppBar extends ConsumerStatefulWidget {
  const RemoteAlbumSliverAppBar({
    super.key,
    this.icon = Icons.camera,
-    this.onShowOptions,
-    this.onToggleAlbumOrder,
+    required this.kebabMenu,
    this.onEditTitle,
    this.onActivity,
  });

  final IconData icon;
-  final void Function()? onShowOptions;
-  final void Function()? onToggleAlbumOrder;
+  final Widget kebabMenu;
  final void Function()? onEditTitle;
  final void Function()? onActivity;

@@ -91,21 +89,12 @@ class _MesmerizingSliverAppBarState extends ConsumerState<RemoteAlbumSliverAppBa
              onPressed: () => context.maybePop(),
            ),
      actions: [
-        if (widget.onToggleAlbumOrder != null)
-          IconButton(
-            icon: Icon(Icons.swap_vert_rounded, color: actionIconColor, shadows: actionIconShadows),
-            onPressed: widget.onToggleAlbumOrder,
-          ),
        if (currentAlbum.isActivityEnabled && currentAlbum.isShared)
          IconButton(
            icon: Icon(Icons.chat_outlined, color: actionIconColor, shadows: actionIconShadows),
            onPressed: widget.onActivity,
          ),
-        if (widget.onShowOptions != null)
-          IconButton(
-            icon: Icon(Icons.more_vert, color: actionIconColor, shadows: actionIconShadows),
-            onPressed: widget.onShowOptions,
-          ),
+        widget.kebabMenu,
      ],
      title: Builder(
        builder: (context) {
--- a/mobile/test/presentation/widgets/remote_album/drift_album_option_widget_test.dart
+++ b/mobile/test/presentation/widgets/remote_album/drift_album_option_widget_test.dart
@@ -0,0 +1,500 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:immich_mobile/presentation/widgets/remote_album/drift_album_option.widget.dart';
+
+import '../../../widget_tester_extensions.dart';
+
+void main() {
+  group('DriftRemoteAlbumOption', () {
+    testWidgets('shows kebab menu icon button', (tester) async {
+      await tester.pumpConsumerWidget(
+        const DriftRemoteAlbumOption(),
+      );
+
+      expect(find.byIcon(Icons.more_vert_rounded), findsOneWidget);
+    });
+
+    testWidgets('opens menu when icon button is tapped', (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.edit), findsOneWidget);
+    });
+
+    testWidgets('shows edit album option when onEditAlbum is provided',
+        (tester) async {
+      bool editCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () => editCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.edit), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.edit));
+      await tester.pumpAndSettle();
+
+      expect(editCalled, isTrue);
+    });
+
+    testWidgets('hides edit album option when onEditAlbum is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onAddPhotos: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.edit), findsNothing);
+    });
+
+    testWidgets('shows add photos option when onAddPhotos is provided',
+        (tester) async {
+      bool addPhotosCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onAddPhotos: () => addPhotosCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.add_a_photo), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.add_a_photo));
+      await tester.pumpAndSettle();
+
+      expect(addPhotosCalled, isTrue);
+    });
+
+    testWidgets('hides add photos option when onAddPhotos is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.add_a_photo), findsNothing);
+    });
+
+    testWidgets('shows add users option when onAddUsers is provided',
+        (tester) async {
+      bool addUsersCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onAddUsers: () => addUsersCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.group_add), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.group_add));
+      await tester.pumpAndSettle();
+
+      expect(addUsersCalled, isTrue);
+    });
+
+    testWidgets('hides add users option when onAddUsers is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.group_add), findsNothing);
+    });
+
+    testWidgets('shows leave album option when onLeaveAlbum is provided',
+        (tester) async {
+      bool leaveAlbumCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onLeaveAlbum: () => leaveAlbumCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.person_remove_rounded), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.person_remove_rounded));
+      await tester.pumpAndSettle();
+
+      expect(leaveAlbumCalled, isTrue);
+    });
+
+    testWidgets('hides leave album option when onLeaveAlbum is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.person_remove_rounded), findsNothing);
+    });
+
+    testWidgets(
+        'shows toggle album order option when onToggleAlbumOrder is provided',
+        (tester) async {
+      bool toggleOrderCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onToggleAlbumOrder: () => toggleOrderCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.swap_vert_rounded), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.swap_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(toggleOrderCalled, isTrue);
+    });
+
+    testWidgets('hides toggle album order option when onToggleAlbumOrder is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.swap_vert_rounded), findsNothing);
+    });
+
+    testWidgets(
+        'shows create shared link option when onCreateSharedLink is provided',
+        (tester) async {
+      bool createSharedLinkCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onCreateSharedLink: () => createSharedLinkCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.link), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.link));
+      await tester.pumpAndSettle();
+
+      expect(createSharedLinkCalled, isTrue);
+    });
+
+    testWidgets('hides create shared link option when onCreateSharedLink is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.link), findsNothing);
+    });
+
+    testWidgets('shows options option when onShowOptions is provided',
+        (tester) async {
+      bool showOptionsCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onShowOptions: () => showOptionsCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.settings), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.settings));
+      await tester.pumpAndSettle();
+
+      expect(showOptionsCalled, isTrue);
+    });
+
+    testWidgets('hides options option when onShowOptions is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.settings), findsNothing);
+    });
+
+    testWidgets('shows delete album option when onDeleteAlbum is provided',
+        (tester) async {
+      bool deleteAlbumCalled = false;
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onDeleteAlbum: () => deleteAlbumCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.delete), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.delete));
+      await tester.pumpAndSettle();
+
+      expect(deleteAlbumCalled, isTrue);
+    });
+
+    testWidgets('hides delete album option when onDeleteAlbum is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.delete), findsNothing);
+    });
+
+    testWidgets('shows divider before delete album option', (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+          onDeleteAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byType(Divider), findsOneWidget);
+    });
+
+    testWidgets('shows all options when all callbacks are provided',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          onEditAlbum: () {},
+          onAddPhotos: () {},
+          onAddUsers: () {},
+          onLeaveAlbum: () {},
+          onToggleAlbumOrder: () {},
+          onCreateSharedLink: () {},
+          onShowOptions: () {},
+          onDeleteAlbum: () {},
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.edit), findsOneWidget);
+      expect(find.byIcon(Icons.add_a_photo), findsOneWidget);
+      expect(find.byIcon(Icons.group_add), findsOneWidget);
+      expect(find.byIcon(Icons.person_remove_rounded), findsOneWidget);
+      expect(find.byIcon(Icons.swap_vert_rounded), findsOneWidget);
+      expect(find.byIcon(Icons.link), findsOneWidget);
+      expect(find.byIcon(Icons.settings), findsOneWidget);
+      expect(find.byIcon(Icons.delete), findsOneWidget);
+      expect(find.byType(Divider), findsOneWidget);
+    });
+
+    testWidgets('shows no options when all callbacks are null', (tester) async {
+      await tester.pumpConsumerWidget(
+        const DriftRemoteAlbumOption(),
+      );
+
+      await tester.tap(find.byIcon(Icons.more_vert_rounded));
+      await tester.pumpAndSettle();
+
+      expect(find.byIcon(Icons.edit), findsNothing);
+      expect(find.byIcon(Icons.add_a_photo), findsNothing);
+      expect(find.byIcon(Icons.group_add), findsNothing);
+      expect(find.byIcon(Icons.person_remove_rounded), findsNothing);
+      expect(find.byIcon(Icons.swap_vert_rounded), findsNothing);
+      expect(find.byIcon(Icons.link), findsNothing);
+      expect(find.byIcon(Icons.settings), findsNothing);
+      expect(find.byIcon(Icons.delete), findsNothing);
+    });
+
+    testWidgets('uses custom icon color when provided', (tester) async {
+      const customColor = Colors.red;
+
+      await tester.pumpConsumerWidget(
+        const DriftRemoteAlbumOption(
+          iconColor: customColor,
+        ),
+      );
+
+      final iconButton = tester.widget<IconButton>(find.byType(IconButton));
+      final icon = iconButton.icon as Icon;
+
+      expect(icon.color, equals(customColor));
+    });
+
+    testWidgets('uses default white color when iconColor is null',
+        (tester) async {
+      await tester.pumpConsumerWidget(
+        const DriftRemoteAlbumOption(),
+      );
+
+      final iconButton = tester.widget<IconButton>(find.byType(IconButton));
+      final icon = iconButton.icon as Icon;
+
+      expect(icon.color, equals(Colors.white));
+    });
+
+    testWidgets('applies icon shadows when provided', (tester) async {
+      final shadows = [
+        const Shadow(offset: Offset(0, 2), blurRadius: 5, color: Colors.black),
+      ];
+
+      await tester.pumpConsumerWidget(
+        DriftRemoteAlbumOption(
+          iconShadows: shadows,
+        ),
+      );
+
+      final iconButton = tester.widget<IconButton>(find.byType(IconButton));
+      final icon = iconButton.icon as Icon;
+
+      expect(icon.shadows, equals(shadows));
+    });
+
+    group('owner vs non-owner scenarios', () {
+      testWidgets('owner sees all management options', (tester) async {
+        // Simulating owner scenario - all callbacks provided
+        await tester.pumpConsumerWidget(
+          DriftRemoteAlbumOption(
+            onEditAlbum: () {},
+            onAddPhotos: () {},
+            onAddUsers: () {},
+            onToggleAlbumOrder: () {},
+            onCreateSharedLink: () {},
+            onShowOptions: () {},
+            onDeleteAlbum: () {},
+          ),
+        );
+
+        await tester.tap(find.byIcon(Icons.more_vert_rounded));
+        await tester.pumpAndSettle();
+
+        // Owner should see all management options
+        expect(find.byIcon(Icons.edit), findsOneWidget);
+        expect(find.byIcon(Icons.add_a_photo), findsOneWidget);
+        expect(find.byIcon(Icons.group_add), findsOneWidget);
+        expect(find.byIcon(Icons.swap_vert_rounded), findsOneWidget);
+        expect(find.byIcon(Icons.link), findsOneWidget);
+        expect(find.byIcon(Icons.delete), findsOneWidget);
+        // Owner should NOT see leave album
+        expect(find.byIcon(Icons.person_remove_rounded), findsNothing);
+      });
+
+      testWidgets('non-owner with editor role sees limited options',
+          (tester) async {
+        // Simulating non-owner with editor role - can add photos, show options, leave
+        await tester.pumpConsumerWidget(
+          DriftRemoteAlbumOption(
+            onAddPhotos: () {},
+            onShowOptions: () {},
+            onLeaveAlbum: () {},
+          ),
+        );
+
+        await tester.tap(find.byIcon(Icons.more_vert_rounded));
+        await tester.pumpAndSettle();
+
+        // Editor can add photos
+        expect(find.byIcon(Icons.add_a_photo), findsOneWidget);
+        // Can see options
+        expect(find.byIcon(Icons.settings), findsOneWidget);
+        // Can leave album
+        expect(find.byIcon(Icons.person_remove_rounded), findsOneWidget);
+        // Cannot see owner-only options
+        expect(find.byIcon(Icons.edit), findsNothing);
+        expect(find.byIcon(Icons.group_add), findsNothing);
+        expect(find.byIcon(Icons.swap_vert_rounded), findsNothing);
+        expect(find.byIcon(Icons.link), findsNothing);
+        expect(find.byIcon(Icons.delete), findsNothing);
+      });
+
+      testWidgets('non-owner viewer sees minimal options', (tester) async {
+        // Simulating viewer - can only show options and leave
+        await tester.pumpConsumerWidget(
+          DriftRemoteAlbumOption(
+            onShowOptions: () {},
+            onLeaveAlbum: () {},
+          ),
+        );
+
+        await tester.tap(find.byIcon(Icons.more_vert_rounded));
+        await tester.pumpAndSettle();
+
+        // Can see options
+        expect(find.byIcon(Icons.settings), findsOneWidget);
+        // Can leave album
+        expect(find.byIcon(Icons.person_remove_rounded), findsOneWidget);
+        // Cannot see any other options
+        expect(find.byIcon(Icons.edit), findsNothing);
+        expect(find.byIcon(Icons.add_a_photo), findsNothing);
+        expect(find.byIcon(Icons.group_add), findsNothing);
+        expect(find.byIcon(Icons.swap_vert_rounded), findsNothing);
+        expect(find.byIcon(Icons.link), findsNothing);
+        expect(find.byIcon(Icons.delete), findsNothing);
+      });
+    });
+  });
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -752,9 +752,6 @@ importers:
      '@zoom-image/svelte':
        specifier: ^0.3.0
        version: 0.3.8(svelte@5.43.3)
-      async-mutex:
-        specifier: ^0.5.0
-        version: 0.5.0
      dom-to-image:
        specifier: ^2.6.0
        version: 2.6.0
@@ -5587,9 +5584,6 @@ packages:
  async-lock@1.4.1:
    resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}

-  async-mutex@0.5.0:
-    resolution: {integrity: sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==}
-
  async@0.2.10:
    resolution: {integrity: sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ==}

@@ -11831,10 +11825,12 @@ packages:
  whatwg-encoding@2.0.0:
    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
    engines: {node: '>=12'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation

  whatwg-encoding@3.1.1:
    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation

  whatwg-mimetype@3.0.0:
    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
@@ -17911,10 +17907,6 @@ snapshots:

  async-lock@1.4.1: {}

-  async-mutex@0.5.0:
-    dependencies:
-      tslib: 2.8.1
-
  async@0.2.10: {}

  async@3.2.6: {}
--- a/web/package.json
+++ b/web/package.json
@@ -40,7 +40,6 @@
    "@types/geojson": "^7946.0.16",
    "@zoom-image/core": "^0.41.0",
    "@zoom-image/svelte": "^0.3.0",
-    "async-mutex": "^0.5.0",
    "dom-to-image": "^2.6.0",
    "fabric": "^6.5.4",
    "geo-coordinates-parser": "^1.7.4",
--- a/web/src/lib/actions/autogrow.ts
+++ b/web/src/lib/actions/autogrow.ts
@@ -1,19 +0,0 @@
-import { tick } from 'svelte';
-import type { Action } from 'svelte/action';
-
-type Parameters = {
-  height?: string;
-  value: string; // added to enable reactivity
-};
-
-export const autoGrowHeight: Action<HTMLTextAreaElement, Parameters> = (textarea, { height = 'auto' }) => {
-  const update = () => {
-    void tick().then(() => {
-      textarea.style.height = height;
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    });
-  };
-
-  update();
-  return { update };
-};
--- a/web/src/lib/components/album-page/album-description.svelte
+++ b/web/src/lib/components/album-page/album-description.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { updateAlbumInfo } from '@immich/sdk';
+  import { shortcut } from '$lib/actions/shortcut';
  import { handleError } from '$lib/utils/handle-error';
-  import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
+  import { updateAlbumInfo } from '@immich/sdk';
+  import { Textarea } from '@immich/ui';
  import { t } from 'svelte-i18n';
+  import { fromAction } from 'svelte/attachments';

  interface Props {
    id: string;
@@ -12,27 +14,34 @@

  let { id, description = $bindable(), isOwned }: Props = $props();

-  const handleUpdateDescription = async (newDescription: string) => {
+  const handleFocusOut = async () => {
    try {
      await updateAlbumInfo({
        id,
        updateAlbumDto: {
-          description: newDescription,
+          description,
        },
      });
    } catch (error) {
      handleError(error, $t('errors.unable_to_save_album'));
    }
-    description = newDescription;
  };
 </script>

 {#if isOwned}
-  <AutogrowTextarea
-    content={description}
-    class="w-full mt-2 text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
-    onContentUpdate={handleUpdateDescription}
+  <Textarea
+    bind:value={description}
+    class="outline-none border-b border-gray-500 bg-transparent ring-0 focus:ring-0 resize-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary dark:bg-transparent"
+    rows={1}
+    grow
+    shape="rectangle"
+    onfocusout={handleFocusOut}
    placeholder={$t('add_a_description')}
+    data-testid="autogrow-textarea"
+    {@attach fromAction(shortcut, () => ({
+      shortcut: { key: 'Enter', ctrl: true },
+      onShortcut: (e) => e.currentTarget.blur(),
+    }))}
  />
 {:else if description}
  <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { resolve } from '$app/paths';
-  import { autoGrowHeight } from '$lib/actions/autogrow';
  import { shortcut } from '$lib/actions/shortcut';
  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -12,10 +11,11 @@
  import { handleError } from '$lib/utils/handle-error';
  import { isTenMinutesApart } from '$lib/utils/timesince';
  import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
-  import { Icon, IconButton, LoadingSpinner, toastManager } from '@immich/ui';
+  import { Icon, IconButton, LoadingSpinner, Textarea, toastManager } from '@immich/ui';
  import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiSend, mdiThumbUp } from '@mdi/js';
  import * as luxon from 'luxon';
  import { t } from 'svelte-i18n';
+  import { fromAction } from 'svelte/attachments';
  import UserAvatar from '../shared-components/user-avatar.svelte';

  const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
@@ -245,19 +245,20 @@
        </div>
        <form class="flex w-full max-h-56 gap-1" {onsubmit}>
          <div class="flex w-full items-center gap-4">
-            <textarea
+            <Textarea
              {disabled}
              bind:value={message}
-              use:autoGrowHeight={{ height: '5px', value: message }}
+              rows={1}
+              grow
              placeholder={disabled ? $t('comments_are_disabled') : $t('say_something')}
-              use:shortcut={{
+              {@attach fromAction(shortcut, () => ({
                shortcut: { key: 'Enter' },
                onShortcut: () => handleSendComment(),
-              }}
+              }))}
              class="h-4.5 {disabled
                ? 'cursor-not-allowed'
-                : ''} w-full max-h-56 pe-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200"
-            ></textarea>
+                : ''} w-full max-h-56 pe-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200 dark:bg-gray-200"
+            ></Textarea>
          </div>
          {#if isSendingMessage}
            <div class="flex items-end place-items-center pb-2 ms-0">
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -10,17 +10,19 @@
  import { AppRoute, AssetAction, ProjectionType } from '$lib/constants';
  import { activityManager } from '$lib/managers/activity-manager.svelte';
  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
  import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { ocrManager } from '$lib/stores/ocr.svelte';
  import { alwaysLoadOriginalVideo, isShowDetail } from '$lib/stores/preferences.store';
  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
  import { user } from '$lib/stores/user.store';
-  import { websocketEvents } from '$lib/stores/websocket';
-  import { getAssetJobMessage, getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetJobMessage, getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
+  import { InvocationTracker } from '$lib/utils/invocationTracker';
  import { SlideshowHistory } from '$lib/utils/slideshow-history';
+  import { preloadImageUrl } from '$lib/utils/sw-messaging';
  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import {
    AssetJobName,
@@ -50,11 +52,14 @@
  import SlideshowBar from './slideshow-bar.svelte';
  import VideoViewer from './video-wrapper-viewer.svelte';

-  type HasAsset = boolean;
+  export type AssetCursor = {
+    current: AssetResponseDto;
+    nextAsset: AssetResponseDto | undefined | null;
+    previousAsset: AssetResponseDto | undefined | null;
+  };

  interface Props {
-    asset: AssetResponseDto;
-    preloadAssets?: TimelineAsset[];
+    cursor: AssetCursor;
    showNavigation?: boolean;
    withStacked?: boolean;
    isShared?: boolean;
@@ -63,16 +68,14 @@
    preAction?: PreAction | undefined;
    onAction?: OnAction | undefined;
    showCloseButton?: boolean;
-    onClose: (asset: AssetResponseDto) => void;
-    onNext: () => Promise<HasAsset>;
-    onPrevious: () => Promise<HasAsset>;
-    onRandom: () => Promise<{ id: string } | undefined>;
+    onClose?: (asset: AssetResponseDto) => void;
+    onNavigateToAsset?: (asset: AssetResponseDto | undefined | null) => Promise<boolean>;
+    onRandom?: () => Promise<{ id: string } | undefined>;
    copyImage?: () => Promise<void>;
  }

  let {
-    asset = $bindable(),
-    preloadAssets = $bindable([]),
+    cursor,
    showNavigation = true,
    withStacked = false,
    isShared = false,
@@ -82,8 +85,7 @@
    onAction = undefined,
    showCloseButton,
    onClose,
-    onNext,
-    onPrevious,
+    onNavigateToAsset,
    onRandom,
    copyImage = $bindable(),
  }: Props = $props();
@@ -99,10 +101,13 @@
  const stackThumbnailSize = 60;
  const stackSelectedThumbnailSize = 65;

+  let asset = $derived(cursor.current);
+  let nextAsset = $derived(cursor.nextAsset);
+  let previousAsset = $derived(cursor.previousAsset);
  let appearsInAlbums: AlbumResponseDto[] = $state([]);
  let shouldPlayMotionPhoto = $state(false);
  let sharedLink = getSharedLink();
-  let enableDetailPanel = asset.hasMetadata;
+  let enableDetailPanel = $derived(asset.hasMetadata);
  let slideshowStateUnsubscribe: () => void;
  let shuffleSlideshowUnsubscribe: () => void;
  let previewStackedAsset: AssetResponseDto | undefined = $state();
@@ -135,7 +140,7 @@

    untrack(() => {
      if (stack && stack?.assets.length > 1) {
-        preloadAssets.push(toTimelineAsset(stack.assets[1]));
+        preloadImageUrl(getAssetUrl({ asset: stack.assets[1] }));
      }
    });
  };
@@ -150,18 +155,7 @@
    }
  };

-  const onAssetUpdate = ({ asset: assetUpdate }: { event: 'upload' | 'update'; asset: AssetResponseDto }) => {
-    if (assetUpdate.id === asset.id) {
-      asset = assetUpdate;
-    }
-  };
-
  onMount(async () => {
-    unsubscribes.push(
-      websocketEvents.on('on_upload_success', (asset) => onAssetUpdate({ event: 'upload', asset })),
-      websocketEvents.on('on_asset_update', (asset) => onAssetUpdate({ event: 'update', asset })),
-    );
-
    slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
      if (value === SlideshowState.PlaySlideshow) {
        slideshowHistory.reset();
@@ -225,7 +219,7 @@
  };

  const closeViewer = () => {
-    onClose(asset);
+    onClose?.(asset);
  };

  const closeEditor = () => {
@@ -234,7 +228,9 @@
    });
  };

-  const navigateAsset = async (order?: 'previous' | 'next', e?: Event) => {
+  const tracker = new InvocationTracker();
+
+  const navigateAsset = (order?: 'previous' | 'next', e?: Event) => {
    if (!order) {
      if ($slideshowState === SlideshowState.PlaySlideshow) {
        order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
@@ -244,38 +240,42 @@
    }

    e?.stopPropagation();
+    preloadManager.cancel(asset);
+    if (tracker.isActive()) {
+      return;
+    }

-    let hasNext = false;
+    void tracker.invoke(async () => {
+      let hasNext = false;

-    if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle) {
-      hasNext = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
-      if (!hasNext) {
-        const asset = await onRandom();
-        if (asset) {
-          slideshowHistory.queue(asset);
-          hasNext = true;
+      if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle) {
+        hasNext = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
+        if (!hasNext) {
+          const asset = await onRandom?.();
+          if (asset) {
+            slideshowHistory.queue(asset);
+            hasNext = true;
+          }
+        }
+      } else if (onNavigateToAsset) {
+        hasNext =
+          order === 'previous'
+            ? await onNavigateToAsset(cursor.previousAsset)
+            : await onNavigateToAsset(cursor.nextAsset);
+      } else {
+        hasNext = false;
+      }
+
+      if ($slideshowState === SlideshowState.PlaySlideshow) {
+        if (hasNext) {
+          $restartSlideshowProgress = true;
+        } else {
+          await handleStopSlideshow();
        }
      }
-    } else {
-      hasNext = order === 'previous' ? await onPrevious() : await onNext();
-    }
-
-    if ($slideshowState === SlideshowState.PlaySlideshow) {
-      if (hasNext) {
-        $restartSlideshowProgress = true;
-      } else {
-        await handleStopSlideshow();
-      }
-    }
+    });
  };

-  // const showEditorHandler = () => {
-  //   if (isShowActivity) {
-  //     isShowActivity = false;
-  //   }
-  //   isShowEditor = !isShowEditor;
-  // };
-
  const handleRunJob = async (name: AssetJobName) => {
    try {
      await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
@@ -378,12 +378,6 @@

  let isFullScreen = $derived(fullscreenElement !== null);

-  $effect(() => {
-    if (asset) {
-      previewStackedAsset = undefined;
-      handlePromiseError(refreshStack());
-    }
-  });
  $effect(() => {
    if (album && !album.isActivityEnabled && activityManager.commentCount === 0) {
      isShowActivity = false;
@@ -395,13 +389,51 @@
    }
  });

-  // primarily, this is reactive on `asset`
-  $effect(() => {
-    handlePromiseError(handleGetAllAlbums());
+  const refresh = async () => {
+    await refreshStack();
+    await handleGetAllAlbums();
    ocrManager.clear();
    if (!sharedLink) {
-      handlePromiseError(ocrManager.getAssetOcr(asset.id));
+      if (previewStackedAsset) {
+        await ocrManager.getAssetOcr(previewStackedAsset.id);
+      }
+      await ocrManager.getAssetOcr(asset.id);
    }
+  };
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    asset;
+    untrack(() => handlePromiseError(refresh()));
+    preloadManager.preload(cursor.nextAsset);
+    preloadManager.preload(cursor.previousAsset);
+  });
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    asset.id;
+    if (viewerKind !== 'PhotoViewer' && viewerKind !== 'ImagePanaramaViewer') {
+      eventManager.emit('AssetViewerFree');
+    }
+  });
+
+  const viewerKind = $derived.by(() => {
+    if (previewStackedAsset) {
+      return asset.type === AssetTypeEnum.Image ? 'StackPhotoViewer' : 'StackVideoViewer';
+    }
+    if (asset.type === AssetTypeEnum.Image) {
+      if (shouldPlayMotionPhoto && asset.livePhotoVideoId) {
+        return 'LiveVideoViewer';
+      } else if (
+        asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR ||
+        (asset.originalPath && asset.originalPath.toLowerCase().endsWith('.insp'))
+      ) {
+        return 'ImagePanaramaViewer';
+      } else if (isShowEditor && selectedEditType === 'crop') {
+        return 'CropArea';
+      }
+      return 'PhotoViewer';
+    }
+    return 'VideoViewer';
  });
 </script>

@@ -448,7 +480,7 @@
  {/if}

  {#if $slideshowState != SlideshowState.None}
-    <div class="absolute w-full flex">
+    <div class="absolute w-full flex justify-center">
      <SlideshowBar
        {isFullScreen}
        onSetToFullScreen={() => assetViewerHtmlElement?.requestFullscreen?.()}
@@ -459,112 +491,99 @@
    </div>
  {/if}

-  {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}
-    <div class="my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
+  {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor && previousAsset}
+    <div class="my-auto col-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
      <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
    </div>
  {/if}

  <!-- Asset Viewer -->
  <div class="z-[-1] relative col-start-1 col-span-4 row-start-1 row-span-full">
-    {#if previewStackedAsset}
-      {#key previewStackedAsset.id}
-        {#if previewStackedAsset.type === AssetTypeEnum.Image}
-          <PhotoViewer
-            bind:zoomToggle
-            bind:copyImage
-            asset={previewStackedAsset}
-            {preloadAssets}
-            onPreviousAsset={() => navigateAsset('previous')}
-            onNextAsset={() => navigateAsset('next')}
-            haveFadeTransition={false}
-            {sharedLink}
-          />
-        {:else}
-          <VideoViewer
-            assetId={previewStackedAsset.id}
-            cacheKey={previewStackedAsset.thumbhash}
-            projectionType={previewStackedAsset.exifInfo?.projectionType}
-            loopVideo={true}
-            onPreviousAsset={() => navigateAsset('previous')}
-            onNextAsset={() => navigateAsset('next')}
-            onClose={closeViewer}
-            onVideoEnded={() => navigateAsset()}
-            onVideoStarted={handleVideoStarted}
-            {playOriginalVideo}
-          />
-        {/if}
-      {/key}
-    {:else}
-      {#key asset.id}
-        {#if asset.type === AssetTypeEnum.Image}
-          {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
-            <VideoViewer
-              assetId={asset.livePhotoVideoId}
-              cacheKey={asset.thumbhash}
-              projectionType={asset.exifInfo?.projectionType}
-              loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
-              onPreviousAsset={() => navigateAsset('previous')}
-              onNextAsset={() => navigateAsset('next')}
-              onVideoEnded={() => (shouldPlayMotionPhoto = false)}
-              {playOriginalVideo}
-            />
-          {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
-                .toLowerCase()
-                .endsWith('.insp'))}
-            <ImagePanoramaViewer bind:zoomToggle {asset} />
-          {:else if isShowEditor && selectedEditType === 'crop'}
-            <CropArea {asset} />
-          {:else}
-            <PhotoViewer
-              bind:zoomToggle
-              bind:copyImage
-              {asset}
-              {preloadAssets}
-              onPreviousAsset={() => navigateAsset('previous')}
-              onNextAsset={() => navigateAsset('next')}
-              {sharedLink}
-              haveFadeTransition={$slideshowState !== SlideshowState.None && $slideshowTransition}
-            />
-          {/if}
-        {:else}
-          <VideoViewer
-            assetId={asset.id}
-            cacheKey={asset.thumbhash}
-            projectionType={asset.exifInfo?.projectionType}
-            loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
-            onPreviousAsset={() => navigateAsset('previous')}
-            onNextAsset={() => navigateAsset('next')}
-            onClose={closeViewer}
-            onVideoEnded={() => navigateAsset()}
-            onVideoStarted={handleVideoStarted}
-            {playOriginalVideo}
-          />
-        {/if}
+    {#if viewerKind === 'StackPhotoViewer'}
+      <PhotoViewer
+        bind:zoomToggle
+        bind:copyImage
+        cursor={{ ...cursor, current: previewStackedAsset! }}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
+        haveFadeTransition={false}
+        {sharedLink}
+      />
+    {:else if viewerKind === 'StackVideoViewer'}
+      <VideoViewer
+        assetId={previewStackedAsset!.id}
+        cacheKey={previewStackedAsset!.thumbhash}
+        projectionType={previewStackedAsset!.exifInfo?.projectionType}
+        loopVideo={true}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
+        onClose={closeViewer}
+        onVideoEnded={() => navigateAsset()}
+        onVideoStarted={handleVideoStarted}
+        {playOriginalVideo}
+      />
+    {:else if viewerKind === 'LiveVideoViewer'}
+      <VideoViewer
+        assetId={asset.livePhotoVideoId!}
+        cacheKey={asset.thumbhash}
+        projectionType={asset.exifInfo?.projectionType}
+        loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
+        onVideoEnded={() => (shouldPlayMotionPhoto = false)}
+        {playOriginalVideo}
+      />
+    {:else if viewerKind === 'ImagePanaramaViewer'}
+      <ImagePanoramaViewer bind:zoomToggle {asset} />
+    {:else if viewerKind === 'CropArea'}
+      <CropArea {asset} />
+    {:else if viewerKind === 'PhotoViewer'}
+      <PhotoViewer
+        bind:zoomToggle
+        bind:copyImage
+        {cursor}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
+        {sharedLink}
+        haveFadeTransition={$slideshowState !== SlideshowState.None && $slideshowTransition}
+        onFree={() => eventManager.emit('AssetViewerFree')}
+      />
+    {:else if viewerKind === 'VideoViewer'}
+      <VideoViewer
+        assetId={asset.id}
+        cacheKey={asset.thumbhash}
+        projectionType={asset.exifInfo?.projectionType}
+        loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
+        onPreviousAsset={() => navigateAsset('previous')}
+        onNextAsset={() => navigateAsset('next')}
+        onClose={closeViewer}
+        onVideoEnded={() => navigateAsset()}
+        onVideoStarted={handleVideoStarted}
+        {playOriginalVideo}
+      />
+    {/if}

-        {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || activityManager.commentCount > 0) && !activityManager.isLoading}
-          <div class="absolute bottom-0 end-0 mb-20 me-8">
-            <ActivityStatus
-              disabled={!album?.isActivityEnabled}
-              isLiked={activityManager.isLiked}
-              numberOfComments={activityManager.commentCount}
-              numberOfLikes={activityManager.likeCount}
-              onFavorite={handleFavorite}
-              onOpenActivityTab={handleOpenActivity}
-            />
-          </div>
-        {/if}
+    {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || activityManager.commentCount > 0) && !activityManager.isLoading}
+      <div class="absolute bottom-0 end-0 mb-20 me-8">
+        <ActivityStatus
+          disabled={!album?.isActivityEnabled}
+          isLiked={activityManager.isLiked}
+          numberOfComments={activityManager.commentCount}
+          numberOfLikes={activityManager.likeCount}
+          onFavorite={handleFavorite}
+          onOpenActivityTab={handleOpenActivity}
+        />
+      </div>
+    {/if}

-        {#if $slideshowState === SlideshowState.None && asset.type === AssetTypeEnum.Image && !isShowEditor && ocrManager.hasOcrData}
-          <div class="absolute bottom-0 end-0 mb-6 me-6">
-            <OcrButton />
-          </div>
-        {/if}
-      {/key}
+    {#if $slideshowState === SlideshowState.None && asset.type === AssetTypeEnum.Image && !isShowEditor && ocrManager.hasOcrData}
+      <div class="absolute bottom-0 end-0 mb-6 me-6">
+        <OcrButton />
+      </div>
    {/if}
  </div>

-  {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}
+  {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor && nextAsset}
    <div class="my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
      <NextAssetAction onNextAsset={() => navigateAsset('next')} />
    </div>
--- a/web/src/lib/components/asset-viewer/detail-panel-description.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel-description.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
+  import { shortcut } from '$lib/actions/shortcut';
  import { handleError } from '$lib/utils/handle-error';
  import { updateAsset, type AssetResponseDto } from '@immich/sdk';
-  import { toastManager } from '@immich/ui';
+  import { Textarea, toastManager } from '@immich/ui';
  import { t } from 'svelte-i18n';
+  import { fromAction } from 'svelte/attachments';

  interface Props {
    asset: AssetResponseDto;
@@ -12,15 +13,17 @@

  let { asset, isOwner }: Props = $props();

-  let description = $derived(asset.exifInfo?.description || '');
+  let currentDescription = asset.exifInfo?.description ?? '';
+  let draftDescription = $state(currentDescription);

-  const handleFocusOut = async (newDescription: string) => {
+  const handleFocusOut = async () => {
+    if (draftDescription === currentDescription) {
+      return;
+    }
    try {
-      await updateAsset({ id: asset.id, updateAssetDto: { description: newDescription } });
-
-      asset.exifInfo = { ...asset.exifInfo, description: newDescription };
-
+      await updateAsset({ id: asset.id, updateAssetDto: { description: draftDescription } });
      toastManager.success($t('asset_description_updated'));
+      currentDescription = draftDescription;
    } catch (error) {
      handleError(error, $t('cannot_update_the_description'));
    }
@@ -29,15 +32,23 @@

 {#if isOwner}
  <section class="px-4 mt-10">
-    <AutogrowTextarea
-      content={description}
-      class="max-h-125 w-full border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary immich-scrollbar"
-      onContentUpdate={handleFocusOut}
+    <Textarea
+      bind:value={draftDescription}
+      class="max-h-40 outline-none border-b border-gray-500 bg-transparent ring-0 focus:ring-0 resize-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary dark:bg-transparent"
+      rows={1}
+      grow
+      shape="rectangle"
+      onfocusout={handleFocusOut}
      placeholder={$t('add_a_description')}
+      data-testid="autogrow-textarea"
+      {@attach fromAction(shortcut, () => ({
+        shortcut: { key: 'Enter', ctrl: true },
+        onShortcut: (e) => e.currentTarget.blur(),
+      }))}
    />
  </section>
-{:else if description}
+{:else if draftDescription}
  <section class="px-4 mt-6">
-    <p class="wrap-break-word whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
+    <p class="wrap-break-word whitespace-pre-line w-full text-black dark:text-white text-base">{draftDescription}</p>
  </section>
 {/if}
--- a/web/src/lib/components/asset-viewer/photo-viewer.spec.ts
+++ b/web/src/lib/components/asset-viewer/photo-viewer.spec.ts
@@ -1,210 +0,0 @@
-import { getAnimateMock } from '$lib/__mocks__/animate.mock';
-import PhotoViewer from '$lib/components/asset-viewer/photo-viewer.svelte';
-import * as utils from '$lib/utils';
-import { AssetMediaSize, AssetTypeEnum } from '@immich/sdk';
-import { assetFactory } from '@test-data/factories/asset-factory';
-import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
-import { render } from '@testing-library/svelte';
-import type { MockInstance } from 'vitest';
-
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-globalThis.ResizeObserver = ResizeObserver;
-
-vi.mock('$lib/utils', async (originalImport) => {
-  const meta = await originalImport<typeof import('$lib/utils')>();
-  return {
-    ...meta,
-    getAssetOriginalUrl: vi.fn(),
-    getAssetThumbnailUrl: vi.fn(),
-  };
-});
-
-describe('PhotoViewer component', () => {
-  let getAssetOriginalUrlSpy: MockInstance;
-  let getAssetThumbnailUrlSpy: MockInstance;
-
-  beforeAll(() => {
-    getAssetOriginalUrlSpy = vi.spyOn(utils, 'getAssetOriginalUrl');
-    getAssetThumbnailUrlSpy = vi.spyOn(utils, 'getAssetThumbnailUrl');
-
-    vi.stubGlobal('cast', {
-      framework: {
-        CastState: {
-          NO_DEVICES_AVAILABLE: 'NO_DEVICES_AVAILABLE',
-        },
-        RemotePlayer: vi.fn().mockImplementation(() => ({})),
-        RemotePlayerEventType: {
-          ANY_CHANGE: 'anyChanged',
-        },
-        RemotePlayerController: vi.fn().mockImplementation(() => ({ addEventListener: vi.fn() })),
-        CastContext: {
-          getInstance: vi.fn().mockImplementation(() => ({ setOptions: vi.fn(), addEventListener: vi.fn() })),
-        },
-        CastContextEventType: {
-          SESSION_STATE_CHANGED: 'sessionstatechanged',
-          CAST_STATE_CHANGED: 'caststatechanged',
-        },
-      },
-    });
-    vi.stubGlobal('chrome', {
-      cast: { media: { PlayerState: { IDLE: 'IDLE' } }, AutoJoinPolicy: { ORIGIN_SCOPED: 'origin_scoped' } },
-    });
-  });
-
-  beforeEach(() => {
-    Element.prototype.animate = getAnimateMock();
-  });
-
-  afterEach(() => {
-    vi.resetAllMocks();
-  });
-
-  it('loads the thumbnail', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.jpg',
-      originalMimeType: 'image/jpeg',
-      type: AssetTypeEnum.Image,
-    });
-    render(PhotoViewer, { asset });
-
-    expect(getAssetThumbnailUrlSpy).toBeCalledWith({
-      id: asset.id,
-      size: AssetMediaSize.Preview,
-      cacheKey: asset.thumbhash,
-    });
-    expect(getAssetOriginalUrlSpy).not.toBeCalled();
-  });
-
-  it('loads the thumbnail image for static gifs', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.gif',
-      originalMimeType: 'image/gif',
-      type: AssetTypeEnum.Image,
-    });
-    render(PhotoViewer, { asset });
-
-    expect(getAssetThumbnailUrlSpy).toBeCalledWith({
-      id: asset.id,
-      size: AssetMediaSize.Preview,
-      cacheKey: asset.thumbhash,
-    });
-    expect(getAssetOriginalUrlSpy).not.toBeCalled();
-  });
-
-  it('loads the thumbnail image for static webp images', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.webp',
-      originalMimeType: 'image/webp',
-      type: AssetTypeEnum.Image,
-    });
-    render(PhotoViewer, { asset });
-
-    expect(getAssetThumbnailUrlSpy).toBeCalledWith({
-      id: asset.id,
-      size: AssetMediaSize.Preview,
-      cacheKey: asset.thumbhash,
-    });
-    expect(getAssetOriginalUrlSpy).not.toBeCalled();
-  });
-
-  it('loads the original image for animated gifs', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.gif',
-      originalMimeType: 'image/gif',
-      type: AssetTypeEnum.Image,
-      duration: '2.0',
-    });
-    render(PhotoViewer, { asset });
-
-    expect(getAssetThumbnailUrlSpy).not.toBeCalled();
-    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, cacheKey: asset.thumbhash });
-  });
-
-  it('loads the original image for animated webp images', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.webp',
-      originalMimeType: 'image/webp',
-      type: AssetTypeEnum.Image,
-      duration: '2.0',
-    });
-    render(PhotoViewer, { asset });
-
-    expect(getAssetThumbnailUrlSpy).not.toBeCalled();
-    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, cacheKey: asset.thumbhash });
-  });
-
-  it('not loads original static image in shared link even when download permission is true and showMetadata permission is true', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.gif',
-      originalMimeType: 'image/gif',
-      type: AssetTypeEnum.Image,
-    });
-    const sharedLink = sharedLinkFactory.build({ allowDownload: true, showMetadata: true, assets: [asset] });
-    render(PhotoViewer, { asset, sharedLink });
-
-    expect(getAssetThumbnailUrlSpy).toBeCalledWith({
-      id: asset.id,
-      size: AssetMediaSize.Preview,
-      cacheKey: asset.thumbhash,
-    });
-
-    expect(getAssetOriginalUrlSpy).not.toBeCalled();
-  });
-
-  it('loads original animated image in shared link when download permission is true and showMetadata permission is true', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.gif',
-      originalMimeType: 'image/gif',
-      type: AssetTypeEnum.Image,
-      duration: '2.0',
-    });
-    const sharedLink = sharedLinkFactory.build({ allowDownload: true, showMetadata: true, assets: [asset] });
-    render(PhotoViewer, { asset, sharedLink });
-
-    expect(getAssetThumbnailUrlSpy).not.toBeCalled();
-    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, cacheKey: asset.thumbhash });
-  });
-
-  it('not loads original animated image when shared link download permission is false', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.gif',
-      originalMimeType: 'image/gif',
-      type: AssetTypeEnum.Image,
-      duration: '2.0',
-    });
-    const sharedLink = sharedLinkFactory.build({ allowDownload: false, assets: [asset] });
-    render(PhotoViewer, { asset, sharedLink });
-
-    expect(getAssetThumbnailUrlSpy).toBeCalledWith({
-      id: asset.id,
-      size: AssetMediaSize.Preview,
-      cacheKey: asset.thumbhash,
-    });
-
-    expect(getAssetOriginalUrlSpy).not.toBeCalled();
-  });
-
-  it('not loads original animated image when shared link showMetadata permission is false', () => {
-    const asset = assetFactory.build({
-      originalPath: 'image.gif',
-      originalMimeType: 'image/gif',
-      type: AssetTypeEnum.Image,
-      duration: '2.0',
-    });
-    const sharedLink = sharedLinkFactory.build({ showMetadata: false, assets: [asset] });
-    render(PhotoViewer, { asset, sharedLink });
-
-    expect(getAssetThumbnailUrlSpy).toBeCalledWith({
-      id: asset.id,
-      size: AssetMediaSize.Preview,
-      cacheKey: asset.thumbhash,
-    });
-
-    expect(getAssetOriginalUrlSpy).not.toBeCalled();
-  });
-});
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -6,56 +6,61 @@
  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
  import { assetViewerFadeDuration } from '$lib/constants';
  import { castManager } from '$lib/managers/cast-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
  import { ocrManager } from '$lib/stores/ocr.svelte';
  import { boundingBoxesArray } from '$lib/stores/people.store';
-  import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
  import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
  import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getAssetOriginalUrl, getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
-  import { canCopyImageToClipboard, copyImageToClipboard, isWebCompatibleImage } from '$lib/utils/asset-utils';
+  import { getAssetUrl, targetImageSize as getTargetImageSize, handlePromiseError } from '$lib/utils';
+  import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
  import { handleError } from '$lib/utils/handle-error';
  import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
  import { getBoundingBox } from '$lib/utils/people-utils';
-  import { cancelImageUrl } from '$lib/utils/sw-messaging';
  import { getAltText } from '$lib/utils/thumbnail-util';
  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+  import { AssetMediaSize, type SharedLinkResponseDto } from '@immich/sdk';
  import { LoadingSpinner, toastManager } from '@immich/ui';
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy, onMount, untrack } from 'svelte';
  import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';
+  import type { AssetCursor } from './asset-viewer.svelte';

  interface Props {
-    asset: AssetResponseDto;
-    preloadAssets?: TimelineAsset[] | undefined;
+    cursor: AssetCursor;
    element?: HTMLDivElement | undefined;
    haveFadeTransition?: boolean;
    sharedLink?: SharedLinkResponseDto | undefined;
    onPreviousAsset?: (() => void) | null;
+    onFree?: (() => void) | null;
+    onBusy?: (() => void) | null;
+    onError?: (() => void) | null;
+    onLoad?: (() => void) | null;
    onNextAsset?: (() => void) | null;
    copyImage?: () => Promise<void>;
    zoomToggle?: (() => void) | null;
  }

  let {
-    asset,
-    preloadAssets = undefined,
+    cursor,
    element = $bindable(),
    haveFadeTransition = true,
    sharedLink = undefined,
    onPreviousAsset = null,
    onNextAsset = null,
+    onFree = null,
+    onBusy = null,
+    onError = null,
+    onLoad = null,
    copyImage = $bindable(),
    zoomToggle = $bindable(),
  }: Props = $props();

  const { slideshowState, slideshowLook } = slideshowStore;
+  const asset = $derived(cursor.current);

-  let assetFileUrl: string = $state('');
  let imageLoaded: boolean = $state(false);
  let originalImageLoaded: boolean = $state(false);
  let imageError: boolean = $state(false);
@@ -82,25 +87,6 @@

  let isOcrActive = $derived(ocrManager.showOverlay);

-  const preload = (targetSize: AssetMediaSize | 'original', preloadAssets?: TimelineAsset[]) => {
-    for (const preloadAsset of preloadAssets || []) {
-      if (preloadAsset.isImage) {
-        let img = new Image();
-        img.src = getAssetUrl(preloadAsset.id, targetSize, preloadAsset.thumbhash);
-      }
-    }
-  };
-
-  const getAssetUrl = (id: string, targetSize: AssetMediaSize | 'original', cacheKey: string | null) => {
-    if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {
-      return getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, cacheKey });
-    }
-
-    return targetSize === 'original'
-      ? getAssetOriginalUrl({ id, cacheKey })
-      : getAssetThumbnailUrl({ id, size: targetSize, cacheKey });
-  };
-
  copyImage = async () => {
    if (!canCopyImageToClipboard() || !$photoViewerImgElement) {
      return;
@@ -155,23 +141,11 @@
    }
  };

-  // when true, will force loading of the original image
-  let forceUseOriginal: boolean = $derived(
-    (asset.type === AssetTypeEnum.Image && asset.duration && !asset.duration.includes('0:00:00.000')) ||
-      $photoZoomState.currentZoom > 1,
-  );
-
-  const targetImageSize = $derived.by(() => {
-    if ($alwaysLoadOriginalFile || forceUseOriginal || originalImageLoaded) {
-      return isWebCompatibleImage(asset) ? 'original' : AssetMediaSize.Fullsize;
-    }
-
-    return AssetMediaSize.Preview;
-  });
+  const targetImageSize = $derived(getTargetImageSize(asset, originalImageLoaded || $photoZoomState.currentZoom > 1));

  $effect(() => {
-    if (assetFileUrl) {
-      void cast(assetFileUrl);
+    if (imageLoaderUrl) {
+      void cast(imageLoaderUrl);
    }
  });

@@ -190,36 +164,50 @@
  };

  const onload = () => {
+    onLoad?.();
+    onFree?.();
    imageLoaded = true;
-    assetFileUrl = imageLoaderUrl;
    originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize || targetImageSize === 'original';
  };

  const onerror = () => {
+    onError?.();
+    onFree?.();
    imageError = imageLoaded = true;
  };

-  $effect(() => {
-    preload(targetImageSize, preloadAssets);
-  });
-
  onMount(() => {
-    if (loader?.complete) {
-      onload();
-    }
-    loader?.addEventListener('load', onload, { passive: true });
-    loader?.addEventListener('error', onerror, { passive: true });
    return () => {
-      loader?.removeEventListener('load', onload);
-      loader?.removeEventListener('error', onerror);
-      cancelImageUrl(imageLoaderUrl);
+      if (!imageLoaded && !imageError) {
+        onFree?.();
+      }
+      preloadManager.cancelPreloadUrl(imageLoaderUrl);
    };
  });

-  let imageLoaderUrl = $derived(getAssetUrl(asset.id, targetImageSize, asset.thumbhash));
+  let imageLoaderUrl = $derived(
+    getAssetUrl({ asset, sharedLink, forceOriginal: originalImageLoaded || $photoZoomState.currentZoom > 1 }),
+  );

  let containerWidth = $state(0);
  let containerHeight = $state(0);
+
+  let lastUrl: string | undefined | null;
+
+  $effect(() => {
+    if (!lastUrl) {
+      untrack(() => onBusy?.());
+    }
+    if (lastUrl && lastUrl !== imageLoaderUrl) {
+      untrack(() => {
+        imageLoaded = false;
+        originalImageLoaded = false;
+        imageError = false;
+        onBusy?.();
+      });
+    }
+    lastUrl = imageLoaderUrl;
+  });
 </script>

 <svelte:document
@@ -232,19 +220,17 @@
  ]}
 />
 {#if imageError}
-  <div class="h-full w-full">
+  <div id="broken-asset" class="h-full w-full">
    <BrokenAsset class="text-xl h-full w-full" />
  </div>
 {/if}
-<!-- svelte-ignore a11y_missing_attribute -->
-<img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" />
+<img bind:this={loader} style="display:none" src={imageLoaderUrl} alt="" aria-hidden="true" {onload} {onerror} />
 <div
  bind:this={element}
-  class="relative h-full select-none"
+  class="relative h-full w-full select-none"
  bind:clientWidth={containerWidth}
  bind:clientHeight={containerHeight}
 >
-  <img style="display:none" src={imageLoaderUrl} alt="" {onload} {onerror} />
  {#if !imageLoaded}
    <div id="spinner" class="flex h-full items-center justify-center">
      <LoadingSpinner />
@@ -258,7 +244,7 @@
    >
      {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
        <img
-          src={assetFileUrl}
+          src={imageLoaderUrl}
          alt=""
          class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
          draggable="false"
@@ -266,7 +252,7 @@
      {/if}
      <img
        bind:this={$photoViewerImgElement}
-        src={assetFileUrl}
+        src={imageLoaderUrl}
        alt={$getAltText(toTimelineAsset(asset))}
        class="h-full w-full {$slideshowState === SlideshowState.None
          ? 'object-contain'
@@ -298,6 +284,7 @@
      visibility: visible;
    }
  }
+  #broken-asset,
  #spinner {
    visibility: hidden;
    animation: 0s linear 0.4s forwards delayedVisibility;
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { cancelImageUrl } from '$lib/utils/sw-messaging';
+  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
  import { Icon } from '@immich/ui';
  import { mdiEyeOffOutline } from '@mdi/js';
  import type { ActionReturn } from 'svelte/action';
@@ -60,7 +60,7 @@
      onComplete?.(false);
    }
    return {
-      destroy: () => cancelImageUrl(url),
+      destroy: () => preloadManager.cancelPreloadUrl(url),
    };
  }

--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -26,13 +26,13 @@
  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
+  import { memoryStore, type MemoryAsset } from '$lib/stores/memory.store.svelte';
  import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
  import { preferences } from '$lib/stores/user.store';
  import { getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
  import { cancelMultiselect } from '$lib/utils/asset-utils';
  import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
-  import { AssetMediaSize, getAssetInfo } from '@immich/sdk';
+  import { AssetMediaSize, AssetTypeEnum, getAssetInfo } from '@immich/sdk';
  import { IconButton, toastManager } from '@immich/ui';
  import {
    mdiCardsOutline,
@@ -67,7 +67,7 @@
  let currentMemoryAssetFull = $derived.by(async () =>
    current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
  );
-  let currentTimelineAssets = $derived(current?.memory.assets.map((asset) => toTimelineAsset(asset)) || []);
+  let currentTimelineAssets = $derived(current?.memory.assets || []);

  let isSaved = $derived(current?.memory.isSaved);
  let viewerHeight = $state(0);
@@ -396,7 +396,7 @@
          </p>
        </div>

-        {#if currentTimelineAssets.some(({ isVideo }) => isVideo)}
+        {#if currentTimelineAssets.some((asset) => asset.type === AssetTypeEnum.Video)}
          <div class="w-12.5 dark">
            <IconButton
              shape="round"
@@ -651,8 +651,6 @@
      bind:this={memoryGallery}
    >
      <GalleryViewer
-        onNext={handleNextAsset}
-        onPrevious={handlePreviousAsset}
        assets={currentTimelineAssets}
        viewport={galleryViewport}
        {assetInteraction}
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -32,7 +32,7 @@
  const viewport: Viewport = $state({ width: 0, height: 0 });
  const assetInteraction = new AssetInteraction();

-  let assets = $derived(sharedLink.assets.map((a) => toTimelineAsset(a)));
+  let assets = $derived(sharedLink.assets);

  dragAndDropFilesStore.subscribe((value) => {
    if (value.isDragging && value.files.length > 0) {
@@ -68,7 +68,7 @@
  };

  const handleSelectAll = () => {
-    assetInteraction.selectAssets(assets);
+    assetInteraction.selectAssets(assets.map((asset) => toTimelineAsset(asset)));
  };

  const handleAction = async (action: Action) => {
@@ -145,13 +145,9 @@
    {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
      {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
        <AssetViewer
-          {asset}
+          cursor={{ current: asset, nextAsset: null, previousAsset: null }}
          showCloseButton={false}
          onAction={handleAction}
-          onPrevious={() => Promise.resolve(false)}
-          onNext={() => Promise.resolve(false)}
-          onRandom={() => Promise.resolve(undefined)}
-          onClose={() => {}}
        />
      {/await}
    {/await}
--- a/web/src/lib/components/shared-components/autogrow-textarea.spec.ts
+++ b/web/src/lib/components/shared-components/autogrow-textarea.spec.ts
@@ -1,60 +0,0 @@
-import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
-import { render, screen, waitFor } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-
-describe('AutogrowTextarea component', () => {
-  const getTextarea = () => screen.getByTestId('autogrow-textarea') as HTMLTextAreaElement;
-
-  it('should render correctly', () => {
-    render(AutogrowTextarea);
-    const textarea = getTextarea();
-    expect(textarea).toBeInTheDocument();
-  });
-
-  it('should show the content passed to the component', () => {
-    render(AutogrowTextarea, { content: 'stuff' });
-    const textarea = getTextarea();
-    expect(textarea.value).toBe('stuff');
-  });
-
-  it('should show the placeholder passed to the component', () => {
-    render(AutogrowTextarea, { placeholder: 'asdf' });
-    const textarea = getTextarea();
-    expect(textarea.placeholder).toBe('asdf');
-  });
-
-  it('should execute the passed callback on blur', async () => {
-    const user = userEvent.setup();
-    const update = vi.fn();
-    render(AutogrowTextarea, { content: 'existing', onContentUpdate: update });
-    const textarea = getTextarea();
-    await user.click(textarea);
-    await user.keyboard('extra');
-    textarea.blur();
-    await waitFor(() => expect(update).toHaveBeenCalledWith('existingextra'));
-  });
-
-  it('should execute the passed callback when pressing ctrl+enter in the textarea', async () => {
-    const user = userEvent.setup();
-    const update = vi.fn();
-    render(AutogrowTextarea, { onContentUpdate: update });
-    const textarea = getTextarea();
-    await user.click(textarea);
-    const string = 'content';
-    await user.keyboard(string);
-    await user.keyboard('{Control>}{Enter}{/Control}');
-    await waitFor(() => expect(update).toHaveBeenCalledWith(string));
-  });
-
-  it('should not execute the passed callback if the text has not changed', async () => {
-    const user = userEvent.setup();
-    const update = vi.fn();
-    render(AutogrowTextarea, { content: 'initial', onContentUpdate: update });
-    const textarea = getTextarea();
-    await user.click(textarea);
-    await user.clear(textarea);
-    await user.keyboard('initial');
-    await user.keyboard('{Control>}{Enter}{/Control}');
-    await waitFor(() => expect(update).not.toHaveBeenCalled());
-  });
-});
--- a/web/src/lib/components/shared-components/autogrow-textarea.svelte
+++ b/web/src/lib/components/shared-components/autogrow-textarea.svelte
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { autoGrowHeight } from '$lib/actions/autogrow';
-  import { shortcut } from '$lib/actions/shortcut';
-
-  interface Props {
-    content?: string;
-    class?: string;
-    onContentUpdate?: (newContent: string) => void;
-    placeholder?: string;
-  }
-
-  let { content = '', class: className = '', onContentUpdate = () => null, placeholder = '' }: Props = $props();
-
-  let newContent = $derived(content);
-
-  const updateContent = () => {
-    if (content === newContent) {
-      return;
-    }
-    onContentUpdate(newContent);
-  };
-</script>
-
-<textarea
-  bind:value={newContent}
-  class="resize-none {className}"
-  onfocusout={updateContent}
-  {placeholder}
-  use:shortcut={{
-    shortcut: { key: 'Enter', ctrl: true },
-    onShortcut: (e) => e.currentTarget.blur(),
-  }}
-  use:autoGrowHeight={{ value: newContent }}
-  data-testid="autogrow-textarea">{content}</textarea
->
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -2,9 +2,11 @@
  import { goto } from '$app/navigation';
  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
  import { AppRoute, AssetAction } from '$lib/constants';
  import Portal from '$lib/elements/Portal.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
@@ -19,15 +21,16 @@
  import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
  import { navigate } from '$lib/utils/navigation';
  import { isTimelineAsset, toTimelineAsset } from '$lib/utils/timeline-util';
-  import { AssetVisibility, type AssetResponseDto } from '@immich/sdk';
+  import { AssetVisibility, getAssetInfo, type AssetResponseDto } from '@immich/sdk';
  import { modalManager } from '@immich/ui';
  import { debounce } from 'lodash-es';
+  import { untrack } from 'svelte';
  import { t } from 'svelte-i18n';
  import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';

  interface Props {
    initialAssetId?: string;
-    assets: TimelineAsset[] | AssetResponseDto[];
+    assets: AssetResponseDto[];
    assetInteraction: AssetInteraction;
    disableAssetSelect?: boolean;
    showArchiveIcon?: boolean;
@@ -35,9 +38,7 @@
    onIntersected?: (() => void) | undefined;
    showAssetName?: boolean;
    isShowDeleteConfirmation?: boolean;
-    onPrevious?: (() => Promise<{ id: string } | undefined>) | undefined;
-    onNext?: (() => Promise<{ id: string } | undefined>) | undefined;
-    onRandom?: (() => Promise<{ id: string } | undefined>) | undefined;
+    onNavigateToAsset?: (asset: AssetResponseDto | undefined) => Promise<boolean>;
    onReload?: (() => void) | undefined;
    pageHeaderOffset?: number;
    slidingWindowOffset?: number;
@@ -54,9 +55,7 @@
    onIntersected = undefined,
    showAssetName = false,
    isShowDeleteConfirmation = $bindable(false),
-    onPrevious = undefined,
-    onNext = undefined,
-    onRandom = undefined,
+    onNavigateToAsset,
    onReload = undefined,
    slidingWindowOffset = 0,
    pageHeaderOffset = 0,
@@ -86,7 +85,7 @@
    return top + pageHeaderOffset < window.bottom && top + geo.getHeight(i) > window.top;
  };

-  let currentIndex = 0;
+  let currentIndex = $state(0);
  if (initialAssetId && assets.length > 0) {
    const index = assets.findIndex(({ id }) => id === initialAssetId);
    if (index !== -1) {
@@ -229,7 +228,7 @@
    isShowDeleteConfirmation = false;
    await deleteAssets(
      !(isTrashEnabled && !force),
-      (assetIds) => (assets = assets.filter((asset) => !assetIds.includes(asset.id)) as TimelineAsset[]),
+      (assetIds) => (assets = assets.filter((asset) => !assetIds.includes(asset.id))),
      assetInteraction.selectedAssets,
      onReload,
    );
@@ -242,7 +241,7 @@
      assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive,
    );
    if (ids) {
-      assets = assets.filter((asset) => !ids.includes(asset.id)) as TimelineAsset[];
+      assets = assets.filter((asset) => !ids.includes(asset.id));
      deselectAllAssets();
    }
  };
@@ -295,48 +294,15 @@
    })(),
  );

-  const handleNext = async (): Promise<boolean> => {
-    try {
-      let asset: { id: string } | undefined;
-      if (onNext) {
-        asset = await onNext();
-      } else {
-        if (currentIndex >= assets.length - 1) {
-          return false;
-        }
-
-        currentIndex = currentIndex + 1;
-        asset = currentIndex < assets.length ? assets[currentIndex] : undefined;
-      }
-
-      if (!asset) {
-        return false;
-      }
-
-      await navigateToAsset(asset);
-      return true;
-    } catch (error) {
-      handleError(error, $t('errors.cannot_navigate_next_asset'));
-      return false;
-    }
-  };
-
  const handleRandom = async (): Promise<{ id: string } | undefined> => {
    try {
-      let asset: { id: string } | undefined;
-      if (onRandom) {
-        asset = await onRandom();
-      } else {
-        if (assets.length > 0) {
-          const randomIndex = Math.floor(Math.random() * assets.length);
-          asset = assets[randomIndex];
-        }
-      }
-
-      if (!asset) {
+      if (assets.length === 0) {
        return;
      }

+      const randomIndex = Math.floor(Math.random() * assets.length);
+      const asset = assets[randomIndex];
+
      await navigateToAsset(asset);
      return asset;
    } catch (error) {
@@ -345,30 +311,13 @@
    }
  };

-  const handlePrevious = async (): Promise<boolean> => {
-    try {
-      let asset: { id: string } | undefined;
-      if (onPrevious) {
-        asset = await onPrevious();
-      } else {
-        if (currentIndex <= 0) {
-          return false;
-        }
-
-        currentIndex = currentIndex - 1;
-        asset = currentIndex >= 0 ? assets[currentIndex] : undefined;
-      }
-
-      if (!asset) {
-        return false;
-      }
-
-      await navigateToAsset(asset);
+  const handleNavigateToAsset = async (target: AssetResponseDto | undefined | null) => {
+    if (target) {
+      currentIndex = assets.indexOf(target);
+      await (onNavigateToAsset ? onNavigateToAsset(target) : navigateToAsset(target));
      return true;
-    } catch (error) {
-      handleError(error, $t('errors.cannot_navigate_previous_asset'));
-      return false;
    }
+    return false;
  };

  const navigateToAsset = async (asset?: { id: string }) => {
@@ -390,9 +339,9 @@
        if (assets.length === 0) {
          await goto(AppRoute.PHOTOS);
        } else if (currentIndex === assets.length) {
-          await handlePrevious();
+          await handleNavigateToAsset(assetCursor.previousAsset);
        } else {
-          await setAssetId(assets[currentIndex].id);
+          await handleNavigateToAsset(assetCursor.nextAsset);
        }
        break;
      }
@@ -424,6 +373,59 @@
      selectAssetCandidates(lastAssetMouseEvent);
    }
  });
+
+  const getNextAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
+    if (!currentAsset) {
+      return;
+    }
+    const cursor = assets.indexOf(currentAsset);
+    if (cursor < assets.length - 1) {
+      const id = assets[cursor + 1].id;
+      const asset = await getAssetInfo({ ...authManager.params, id });
+      if (preload) {
+        void getNextAsset(asset, false);
+      }
+      return asset;
+    }
+  };
+
+  const getPreviousAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
+    if (!currentAsset) {
+      return;
+    }
+    const cursor = assets.indexOf(currentAsset);
+    if (cursor <= 0) {
+      return;
+    }
+    const id = assets[cursor - 1].id;
+    const asset = await getAssetInfo({ ...authManager.params, id });
+    if (preload) {
+      void getPreviousAsset(asset, false);
+    }
+    return asset;
+  };
+
+  let assetCursor = $state<AssetCursor>({
+    current: $viewingAsset,
+    previousAsset: undefined,
+    nextAsset: undefined,
+  });
+
+  const loadCloseAssets = async (currentAsset: AssetResponseDto) => {
+    const [nextAsset, previousAsset] = await Promise.all([getNextAsset(currentAsset), getPreviousAsset(currentAsset)]);
+    assetCursor = {
+      current: currentAsset,
+      nextAsset,
+      previousAsset,
+    };
+  };
+
+  //TODO: replace this with async derived in svelte 6
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    $viewingAsset;
+    untrack(() => void loadCloseAssets($viewingAsset));
+  });
 </script>

 <svelte:document
@@ -488,10 +490,9 @@
  <Portal target="body">
    {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
      <AssetViewer
-        asset={$viewingAsset}
+        cursor={assetCursor}
        onAction={handleAction}
-        onPrevious={handlePrevious}
-        onNext={handleNext}
+        onNavigateToAsset={handleNavigateToAsset}
        onRandom={handleRandom}
        onClose={() => {
          assetViewingStore.showAssetViewer(false);
--- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte
+++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
@@ -1,15 +1,22 @@
 <script lang="ts">
  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
  import { AssetAction } from '$lib/constants';
+  import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
+
  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { websocketEvents } from '$lib/stores/websocket';
+  import { handlePromiseError } from '$lib/utils';
  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
  import { navigate } from '$lib/utils/navigation';
  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { onDestroy, onMount, untrack } from 'svelte';

-  let { asset: viewingAsset, gridScrollTarget, mutex, preloadAssets } = assetViewingStore;
+  let { asset: viewingAsset, gridScrollTarget } = assetViewingStore;

  interface Props {
    timelineManager: TimelineManager;
@@ -38,44 +45,71 @@
    person = null,
  }: Props = $props();

-  const handlePrevious = async () => {
-    const release = await mutex.acquire();
-    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
-
-    if (laterAsset) {
-      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
+  const getNextAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
+    const earlierTimelineAsset = await timelineManager.getEarlierAsset(currentAsset);
+    if (earlierTimelineAsset) {
+      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: earlierTimelineAsset.id });
+      if (preload) {
+        // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
+        void getNextAsset(asset, false);
+      }
+      return asset;
    }
-
-    release();
-    return !!laterAsset;
  };

-  const handleNext = async () => {
-    const release = await mutex.acquire();
-    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
+  const getPreviousAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
+    const laterTimelineAsset = await timelineManager.getLaterAsset(currentAsset);

-    if (earlierAsset) {
-      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
+    if (laterTimelineAsset) {
+      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: laterTimelineAsset.id });
+      if (preload) {
+        // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
+        void getPreviousAsset(asset, false);
+      }
+      return asset;
    }
+  };

-    release();
-    return !!earlierAsset;
+  let assetCursor = $state<AssetCursor>({
+    current: $viewingAsset,
+    previousAsset: undefined,
+    nextAsset: undefined,
+  });
+
+  const loadCloseAssets = async (currentAsset: AssetResponseDto) => {
+    const [nextAsset, previousAsset] = await Promise.all([getNextAsset(currentAsset), getPreviousAsset(currentAsset)]);
+
+    assetCursor = {
+      current: currentAsset,
+      nextAsset,
+      previousAsset,
+    };
+  };
+
+  //TODO: replace this with async derived in svelte 6
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    $viewingAsset;
+    untrack(() => handlePromiseError(loadCloseAssets($viewingAsset)));
+  });
+
+  const handleNavigateToAsset = async (targetAsset: AssetResponseDto | undefined | null) => {
+    if (!targetAsset) {
+      return false;
+    }
+    let waitForAssetViewerFree = new Promise<void>((resolve) => {
+      eventManager.once('AssetViewerFree', () => resolve());
+    });
+    await navigate({ targetRoute: 'current', assetId: targetAsset.id });
+    await waitForAssetViewerFree;
+    return true;
  };

  const handleRandom = async () => {
    const randomAsset = await timelineManager.getRandomAsset();
-
    if (randomAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
-      assetViewingStore.setAsset(asset);
      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return asset;
+      return { id: randomAsset.id };
    }
  };

@@ -97,7 +131,9 @@
      case AssetAction.SET_VISIBILITY_TIMELINE: {
        // find the next asset to show or close the viewer
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
+        (await handleNavigateToAsset(assetCursor?.nextAsset)) ||
+          (await handleNavigateToAsset(assetCursor?.previousAsset)) ||
+          (await handleClose(action.asset));

        // delete after find the next one
        timelineManager.removeAssets([action.asset.id]);
@@ -163,20 +199,40 @@
      }
    }
  };
+  onDestroy(() => {
+    assetCacheManager.invalidate();
+  });
+  const onAssetUpdate = ({ asset }: { event: 'upload' | 'update'; asset: AssetResponseDto }) => {
+    if (asset.id === assetCursor.current.id) {
+      void loadCloseAssets(asset);
+    }
+  };
+  onMount(() => {
+    const unsubscribes = [
+      websocketEvents.on('on_upload_success', (asset: AssetResponseDto) => onAssetUpdate({ event: 'upload', asset })),
+      websocketEvents.on('on_asset_update', (asset: AssetResponseDto) => onAssetUpdate({ event: 'update', asset })),
+    ];
+    return () => {
+      for (const unsubscribe of unsubscribes) {
+        unsubscribe();
+      }
+    };
+  });
 </script>

 {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
  <AssetViewer
    {withStacked}
-    asset={$viewingAsset}
-    preloadAssets={$preloadAssets}
+    cursor={assetCursor}
    {isShared}
    {album}
    {person}
    preAction={handlePreAction}
-    onAction={handleAction}
-    onPrevious={handlePrevious}
-    onNext={handleNext}
+    onAction={(action) => {
+      handleAction(action);
+      assetCacheManager.invalidate();
+    }}
+    onNavigateToAsset={handleNavigateToAsset}
    onRandom={handleRandom}
    onClose={handleClose}
  />
--- a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
  import { shortcuts } from '$lib/actions/shortcut';
+  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
  import DuplicateAsset from '$lib/components/utilities-page/duplicates/duplicate-asset.svelte';
  import Portal from '$lib/elements/Portal.svelte';
  import { authManager } from '$lib/managers/auth-manager.svelte';
@@ -10,7 +11,7 @@
  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
  import { Button } from '@immich/ui';
  import { mdiCheck, mdiImageMultipleOutline, mdiTrashCanOutline } from '@mdi/js';
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy, onMount, untrack } from 'svelte';
  import { t } from 'svelte-i18n';
  import { SvelteSet } from 'svelte/reactivity';

@@ -43,21 +44,11 @@
    assetViewingStore.showAssetViewer(false);
  });

-  const onNext = async () => {
-    const index = getAssetIndex($viewingAsset.id) + 1;
-    if (index >= assets.length) {
+  const handleNavigateToAsset = async (asset: AssetResponseDto | undefined | null) => {
+    if (!asset) {
      return false;
    }
-    await onViewAsset(assets[index]);
-    return true;
-  };
-
-  const onPrevious = async () => {
-    const index = getAssetIndex($viewingAsset.id) - 1;
-    if (index < 0) {
-      return false;
-    }
-    await onViewAsset(assets[index]);
+    await onViewAsset(asset);
    return true;
  };

@@ -102,6 +93,43 @@
  const handleStack = () => {
    onStack(assets);
  };
+
+  const getPreviousAsset = (currentAsset: AssetResponseDto) => {
+    const index = getAssetIndex(currentAsset.id) - 1;
+    if (index < 0) {
+      return undefined;
+    }
+    return assets[index];
+  };
+
+  const getNextAsset = (currentAsset: AssetResponseDto) => {
+    const index = getAssetIndex(currentAsset.id) + 1;
+    if (index >= assets.length) {
+      return undefined;
+    }
+    return assets[index];
+  };
+
+  let assetCursor = $state<AssetCursor>({
+    current: $viewingAsset,
+    previousAsset: undefined,
+    nextAsset: undefined,
+  });
+
+  const loadCloseAssets = (currentAsset: AssetResponseDto) => {
+    assetCursor = {
+      current: currentAsset,
+      nextAsset: getNextAsset(currentAsset),
+      previousAsset: getPreviousAsset(currentAsset),
+    };
+  };
+
+  //TODO: replace this with async derived in svelte 6
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    $viewingAsset;
+    untrack(() => void loadCloseAssets($viewingAsset));
+  });
 </script>

 <svelte:document
@@ -182,10 +210,9 @@
  {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
    <Portal target="body">
      <AssetViewer
-        asset={$viewingAsset}
+        cursor={assetCursor}
        showNavigation={assets.length > 1}
-        {onNext}
-        {onPrevious}
+        onNavigateToAsset={handleNavigateToAsset}
        {onRandom}
        onClose={() => {
          assetViewingStore.showAssetViewer(false);
--- a/web/src/lib/managers/AssetCacheManager.svelte.ts
+++ b/web/src/lib/managers/AssetCacheManager.svelte.ts
@@ -0,0 +1,60 @@
+import { getAssetInfo, getAssetOcr, type AssetOcrResponseDto, type AssetResponseDto } from '@immich/sdk';
+
+const defaultSerializer = <K>(params: K) => JSON.stringify(params);
+
+class AsyncCache<V> {
+  #cache = new Map<string, V>();
+
+  async getOrFetch<K>(
+    params: K,
+    fetcher: (params: K) => Promise<V>,
+    keySerializer: (params: K) => string = defaultSerializer,
+    updateCache: boolean,
+  ): Promise<V> {
+    const cacheKey = keySerializer(params);
+
+    const cached = this.#cache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+
+    const value = await fetcher(params);
+    if (value && updateCache) {
+      this.#cache.set(cacheKey, value);
+    }
+
+    return value;
+  }
+
+  clear() {
+    this.#cache.clear();
+  }
+}
+
+class AssetCacheManager {
+  #assetCache = new AsyncCache<AssetResponseDto>();
+  #ocrCache = new AsyncCache<AssetOcrResponseDto[]>();
+
+  async getAsset(assetIdentifier: { key?: string; slug?: string; id: string }, updateCache = true) {
+    return this.#assetCache.getOrFetch(assetIdentifier, getAssetInfo, defaultSerializer, updateCache);
+  }
+
+  async getAssetOcr(id: string) {
+    return this.#ocrCache.getOrFetch({ id }, getAssetOcr, (params) => params.id, true);
+  }
+
+  clearAssetCache() {
+    this.#assetCache.clear();
+  }
+
+  clearOcrCache() {
+    this.#ocrCache.clear();
+  }
+
+  invalidate() {
+    this.clearAssetCache();
+    this.clearOcrCache();
+  }
+}
+
+export const assetCacheManager = new AssetCacheManager();
--- a/web/src/lib/managers/PreloadManager.svelte.ts
+++ b/web/src/lib/managers/PreloadManager.svelte.ts
@@ -0,0 +1,38 @@
+import { getAssetUrl } from '$lib/utils';
+import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
+import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
+
+class PreloadManager {
+  preload(asset: AssetResponseDto | undefined | null) {
+    if (globalThis.isSecureContext) {
+      preloadImageUrl(getAssetUrl({ asset }));
+      return;
+    }
+    if (!asset || asset.type !== AssetTypeEnum.Image) {
+      return;
+    }
+    const img = new Image();
+    const url = getAssetUrl({ asset });
+    if (!url) {
+      return;
+    }
+    img.src = url;
+  }
+
+  cancel(asset: AssetResponseDto | undefined | null) {
+    if (!globalThis.isSecureContext || !asset) {
+      return;
+    }
+    const url = getAssetUrl({ asset });
+    cancelImageUrl(url);
+  }
+
+  cancelPreloadUrl(url: string | undefined | null) {
+    if (!globalThis.isSecureContext) {
+      return;
+    }
+    cancelImageUrl(url);
+  }
+}
+
+export const preloadManager = new PreloadManager();
--- a/web/src/lib/managers/event-manager.svelte.ts
+++ b/web/src/lib/managers/event-manager.svelte.ts
@@ -43,6 +43,8 @@ export type Events = {
  // confirmed permanently deleted from server
  UserAdminDeleted: [{ id: string }];

+  AssetViewerFree: [];
+
  SystemConfigUpdate: [SystemConfigDto];

  LibraryCreate: [LibraryResponseDto];
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -346,7 +346,7 @@ export class TimelineManager extends VirtualScrollManager {

  async findMonthGroupForAsset(asset: AssetDescriptor | AssetResponseDto) {
    if (!this.isInitialized) {
-      await this.initTask.waitUntilCompletion();
+      await this.initTask.waitUntilExecution();
    }

    const { id } = asset;
--- a/web/src/lib/modals/ProfileImageCropperModal.svelte
+++ b/web/src/lib/modals/ProfileImageCropperModal.svelte
@@ -85,7 +85,7 @@
      <div
        class="relative flex aspect-square w-62.5 overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
      >
-        <PhotoViewer bind:element={imgElement} {asset} />
+        <PhotoViewer bind:element={imgElement} cursor={{ current: asset, nextAsset: null, previousAsset: null }} />
      </div>
    </div>
  </ModalBody>
--- a/web/src/lib/stores/asset-viewing.store.ts
+++ b/web/src/lib/stores/asset-viewing.store.ts
@@ -1,19 +1,14 @@
 import { authManager } from '$lib/managers/auth-manager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { type AssetGridRouteSearchParams } from '$lib/utils/navigation';
 import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-import { Mutex } from 'async-mutex';
 import { readonly, writable } from 'svelte/store';

 function createAssetViewingStore() {
  const viewingAssetStoreState = writable<AssetResponseDto>();
-  const preloadAssets = writable<TimelineAsset[]>([]);
  const viewState = writable<boolean>(false);
-  const viewingAssetMutex = new Mutex();
  const gridScrollTarget = writable<AssetGridRouteSearchParams | null | undefined>();

-  const setAsset = (asset: AssetResponseDto, assetsToPreload: TimelineAsset[] = []) => {
-    preloadAssets.set(assetsToPreload);
+  const setAsset = (asset: AssetResponseDto) => {
    viewingAssetStoreState.set(asset);
    viewState.set(true);
  };
@@ -30,8 +25,6 @@ function createAssetViewingStore() {

  return {
    asset: readonly(viewingAssetStoreState),
-    mutex: viewingAssetMutex,
-    preloadAssets: readonly(preloadAssets),
    isViewing: viewState,
    gridScrollTarget,
    setAsset,
--- a/web/src/lib/utils.spec.ts
+++ b/web/src/lib/utils.spec.ts
@@ -1,6 +1,141 @@
-import { getReleaseType } from '$lib/utils';
+import { getAssetUrl, getReleaseType } from '$lib/utils';
+import { AssetTypeEnum } from '@immich/sdk';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';

 describe('utils', () => {
+  describe(getAssetUrl.name, () => {
+    it('should return thumbnail URL for static images', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.jpg',
+        originalMimeType: 'image/jpeg',
+        type: AssetTypeEnum.Image,
+      });
+
+      const url = getAssetUrl({ asset });
+
+      // Should return a thumbnail URL (contains /thumbnail)
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL for static gifs', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+      });
+
+      const url = getAssetUrl({ asset });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL for static webp images', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.webp',
+        originalMimeType: 'image/webp',
+        type: AssetTypeEnum.Image,
+      });
+
+      const url = getAssetUrl({ asset });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return original URL for animated gifs', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+
+      const url = getAssetUrl({ asset });
+
+      // Should return original URL (contains /original)
+      expect(url).toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return original URL for animated webp images', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.webp',
+        originalMimeType: 'image/webp',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+
+      const url = getAssetUrl({ asset });
+
+      expect(url).toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL for static images in shared link even with download and showMetadata permissions', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+      });
+      const sharedLink = sharedLinkFactory.build({ allowDownload: true, showMetadata: true, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return original URL for animated images in shared link with download and showMetadata permissions', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+      const sharedLink = sharedLinkFactory.build({ allowDownload: true, showMetadata: true, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL (not original) for animated images when shared link download permission is false', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+      const sharedLink = sharedLinkFactory.build({ allowDownload: false, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).not.toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL (not original) for animated images when shared link showMetadata permission is false', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+      const sharedLink = sharedLinkFactory.build({ showMetadata: false, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).not.toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+  });
+
  describe(getReleaseType.name, () => {
    it('should return "major" for major version changes', () => {
      expect(getReleaseType({ major: 1, minor: 0, patch: 0 }, { major: 2, minor: 0, patch: 0 })).toBe('major');
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -1,10 +1,12 @@
 import { defaultLang, langs, locales } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
-import { lang } from '$lib/stores/preferences.store';
+import { alwaysLoadOriginalFile, lang } from '$lib/stores/preferences.store';
+import { isWebCompatibleImage } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
 import {
  AssetJobName,
  AssetMediaSize,
+  AssetTypeEnum,
  MemoryType,
  QueueName,
  finishOAuth,
@@ -17,6 +19,7 @@ import {
  linkOAuthAccount,
  startOAuth,
  unlinkOAuthAccount,
+  type AssetResponseDto,
  type MemoryResponseDto,
  type PersonResponseDto,
  type ServerVersionResponseDto,
@@ -191,6 +194,40 @@ const createUrl = (path: string, parameters?: Record<string, unknown>) => {

 type AssetUrlOptions = { id: string; cacheKey?: string | null };

+export const getAssetUrl = ({
+  asset,
+  sharedLink,
+  forceOriginal = false,
+}: {
+  asset: AssetResponseDto | undefined | null;
+  sharedLink?: SharedLinkResponseDto;
+  forceOriginal?: boolean;
+}) => {
+  if (!asset) {
+    return null;
+  }
+  const id = asset.id;
+  const cacheKey = asset.thumbhash;
+  if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {
+    return getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, cacheKey });
+  }
+  const targetSize = targetImageSize(asset, forceOriginal);
+  return targetSize === 'original'
+    ? getAssetOriginalUrl({ id, cacheKey })
+    : getAssetThumbnailUrl({ id, size: targetSize, cacheKey });
+};
+
+const forceUseOriginal = (asset: AssetResponseDto) => {
+  return asset.type === AssetTypeEnum.Image && asset.duration && !asset.duration.includes('0:00:00.000');
+};
+
+export const targetImageSize = (asset: AssetResponseDto, forceOriginal: boolean) => {
+  if (forceOriginal || get(alwaysLoadOriginalFile) || forceUseOriginal(asset)) {
+    return isWebCompatibleImage(asset) ? 'original' : AssetMediaSize.Fullsize;
+  }
+  return AssetMediaSize.Preview;
+};
+
 export const getAssetOriginalUrl = (options: string | AssetUrlOptions) => {
  if (typeof options === 'string') {
    options = { id: options };
--- a/web/src/lib/utils/date-time.ts
+++ b/web/src/lib/utils/date-time.ts
@@ -27,6 +27,9 @@ export const getShortDateRange = (startDate: string | Date, endDate: string | Da
  const endDateLocalized = endDate.toLocaleString(userLocale, {
    month: 'short',
    year: 'numeric',
+    // The API returns the date in UTC. If the earliest asset was taken on Jan 1st at 1am,
+    // we expect the album to start in January, even if the local timezone is UTC-5 for instance.
+    timeZone: 'UTC',
  });

  if (startDate.getFullYear() === endDate.getFullYear()) {
--- a/web/src/lib/utils/invocationTracker.ts
+++ b/web/src/lib/utils/invocationTracker.ts
@@ -50,4 +50,13 @@ export class InvocationTracker {
  isActive() {
    return this.invocationsStarted !== this.invocationsEnded;
  }
+
+  async invoke<T>(invocable: () => Promise<T>) {
+    const invocation = this.startInvocation();
+    try {
+      return await invocable();
+    } finally {
+      invocation.endInvocation();
+    }
+  }
 }
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -1,8 +1,8 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
+import type { RouteId } from '$app/types';
 import { AppRoute } from '$lib/constants';
-import { getAssetInfo } from '@immich/sdk';
-import type { NavigationTarget } from '@sveltejs/kit';
+import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
 import { get } from 'svelte/store';

 export type AssetGridRouteSearchParams = {
@@ -20,11 +20,12 @@ export const isAlbumsRoute = (route?: string | null) => !!route?.startsWith('/(u
 export const isPeopleRoute = (route?: string | null) => !!route?.startsWith('/(user)/people/[personId]');
 export const isLockedFolderRoute = (route?: string | null) => !!route?.startsWith('/(user)/locked');

-export const isAssetViewerRoute = (target?: NavigationTarget | null) =>
-  !!(target?.route.id?.endsWith('/[[assetId=id]]') && 'assetId' in (target?.params || {}));
+export const isAssetViewerRoute = (
+  target?: { route?: { id?: RouteId | null }; params?: Record<string, string> | null } | null,
+) => !!(target?.route?.id?.endsWith('/[[assetId=id]]') && 'assetId' in (target?.params || {}));

 export function getAssetInfoFromParam({ assetId, slug, key }: { assetId?: string; key?: string; slug?: string }) {
-  return assetId ? getAssetInfo({ id: assetId, slug, key }) : undefined;
+  return assetId ? assetCacheManager.getAsset({ id: assetId, slug, key }, false) : undefined;
 }

 function currentUrlWithoutAsset() {
--- a/web/src/lib/utils/sw-messaging.ts
+++ b/web/src/lib/utils/sw-messaging.ts
@@ -1,8 +1,14 @@
 const broadcast = new BroadcastChannel('immich');

-export function cancelImageUrl(url: string) {
+export function cancelImageUrl(url: string | undefined | null) {
+  if (!url) {
+    return;
+  }
  broadcast.postMessage({ type: 'cancel', url });
 }
-export function preloadImageUrl(url: string) {
+export function preloadImageUrl(url: string | undefined | null) {
+  if (!url) {
+    return;
+  }
  broadcast.postMessage({ type: 'preload', url });
 }
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
+  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
  import { AppRoute, timeToLoadTheMap } from '$lib/constants';
  import Portal from '$lib/elements/Portal.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { handlePromiseError } from '$lib/utils';
  import { delay } from '$lib/utils/asset-utils';
  import { navigate } from '$lib/utils/navigation';
+  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
  import { LoadingSpinner } from '@immich/ui';
-  import { onDestroy } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
  import type { PageData } from './$types';

  interface Props {
@@ -21,7 +24,6 @@
  let { isViewing: showAssetViewer, asset: viewingAsset, setAssetId } = assetViewingStore;

  let viewingAssets: string[] = $state([]);
-  let viewingAssetCursor = 0;

  onDestroy(() => {
    assetViewingStore.showAssetViewer(false);
@@ -33,27 +35,16 @@

  async function onViewAssets(assetIds: string[]) {
    viewingAssets = assetIds;
-    viewingAssetCursor = 0;
    await setAssetId(assetIds[0]);
  }

-  async function navigateNext() {
-    if (viewingAssetCursor < viewingAssets.length - 1) {
-      await setAssetId(viewingAssets[++viewingAssetCursor]);
-      await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
-      return true;
+  const handleNavigateToAsset = async (currentAsset: AssetResponseDto | undefined | null) => {
+    if (!currentAsset) {
+      return false;
    }
-    return false;
-  }
-
-  async function navigatePrevious() {
-    if (viewingAssetCursor > 0) {
-      await setAssetId(viewingAssets[--viewingAssetCursor]);
-      await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
-      return true;
-    }
-    return false;
-  }
+    await navigate({ targetRoute: 'current', assetId: currentAsset.id });
+    return true;
+  };

  async function navigateRandom() {
    if (viewingAssets.length <= 0) {
@@ -64,6 +55,59 @@
    await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
    return asset;
  }
+
+  const getNextAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
+    if (!currentAsset) {
+      return;
+    }
+    const cursor = viewingAssets.indexOf(currentAsset.id);
+    if (cursor < viewingAssets.length - 1) {
+      const id = viewingAssets[cursor + 1];
+      const asset = await getAssetInfo({ ...authManager.params, id });
+      if (preload) {
+        void getNextAsset(asset, false);
+      }
+      return asset;
+    }
+  };
+
+  const getPreviousAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
+    if (!currentAsset) {
+      return;
+    }
+    const cursor = viewingAssets.indexOf(currentAsset.id);
+    if (cursor <= 0) {
+      return;
+    }
+    const id = viewingAssets[cursor - 1];
+    const asset = await getAssetInfo({ ...authManager.params, id });
+    if (preload) {
+      void getPreviousAsset(asset, false);
+    }
+    return asset;
+  };
+
+  let assetCursor = $state<AssetCursor>({
+    current: $viewingAsset,
+    previousAsset: undefined,
+    nextAsset: undefined,
+  });
+
+  const loadCloseAssets = async (currentAsset: AssetResponseDto) => {
+    const [nextAsset, previousAsset] = await Promise.all([getNextAsset(currentAsset), getPreviousAsset(currentAsset)]);
+    assetCursor = {
+      current: currentAsset,
+      nextAsset,
+      previousAsset,
+    };
+  };
+
+  //TODO: replace this with async derived in svelte 6
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    $viewingAsset;
+    untrack(() => void loadCloseAssets($viewingAsset));
+  });
 </script>

 {#if featureFlagsManager.value.map}
@@ -82,13 +126,12 @@
    </div>
  </UserPageLayout>
  <Portal target="body">
-    {#if $showAssetViewer}
+    {#if $showAssetViewer && assetCursor.current}
      {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
        <AssetViewer
-          asset={$viewingAsset}
+          cursor={assetCursor}
          showNavigation={viewingAssets.length > 1}
-          onNext={navigateNext}
-          onPrevious={navigatePrevious}
+          onNavigateToAsset={handleNavigateToAsset}
          onRandom={navigateRandom}
          onClose={() => {
            assetViewingStore.showAssetViewer(false);
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -22,7 +22,7 @@
  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
  import { AppRoute, QueryParameter } from '$lib/constants';
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
+  import type { Viewport } from '$lib/managers/timeline-manager/types';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { lang, locale } from '$lib/stores/preferences.store';
@@ -35,6 +35,7 @@
  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import {
    type AlbumResponseDto,
+    type AssetResponseDto,
    getPerson,
    getTagById,
    type MetadataSearchDto,
@@ -58,7 +59,7 @@

  let nextPage = $state(1);
  let searchResultAlbums: AlbumResponseDto[] = $state([]);
-  let searchResultAssets: TimelineAsset[] = $state([]);
+  let searchResultAssets: AssetResponseDto[] = $state([]);
  let isLoading = $state(true);
  let scrollY = $state(0);
  let scrollYHistory = 0;
@@ -121,7 +122,7 @@

  const onAssetDelete = (assetIds: string[]) => {
    const assetIdSet = new Set(assetIds);
-    searchResultAssets = searchResultAssets.filter((asset: TimelineAsset) => !assetIdSet.has(asset.id));
+    searchResultAssets = searchResultAssets.filter((asset: AssetResponseDto) => !assetIdSet.has(asset.id));
  };

  const handleSetVisibility = (assetIds: string[]) => {
@@ -130,7 +131,7 @@
  };

  const handleSelectAll = () => {
-    assetInteraction.selectAssets(searchResultAssets);
+    assetInteraction.selectAssets(searchResultAssets.map((asset) => toTimelineAsset(asset)));
  };

  async function onSearchQueryUpdate() {
@@ -162,7 +163,7 @@
          : await searchAssets({ metadataSearchDto: searchDto });

      searchResultAlbums.push(...albums.items);
-      searchResultAssets.push(...assets.items.map((asset) => toTimelineAsset(asset)));
+      searchResultAssets.push(...assets.items);

      nextPage = Number(assets.nextPage) || 0;
    } catch (error) {
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
  import LargeAssetData from '$lib/components/utilities-page/large-assets/large-asset-data.svelte';
  import Portal from '$lib/elements/Portal.svelte';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { handlePromiseError } from '$lib/utils';
  import { navigate } from '$lib/utils/navigation';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { getAssetInfo } from '@immich/sdk';
+  import { untrack } from 'svelte';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
-  import type { AssetResponseDto } from '@immich/sdk';

  interface Props {
    data: PageData;
@@ -19,29 +23,17 @@
  let assets = $derived(data.assets);
  let asset = $derived(data.asset);
  const { isViewing: showAssetViewer, asset: viewingAsset, setAsset } = assetViewingStore;
-  const getAssetIndex = (id: string) => assets.findIndex((asset) => asset.id === id);
-
  $effect(() => {
    if (asset) {
      setAsset(asset);
    }
  });

-  const onNext = async () => {
-    const index = getAssetIndex($viewingAsset.id) + 1;
-    if (index >= assets.length) {
+  const handleNavigateToAsset = async (asset: AssetResponseDto | undefined | null) => {
+    if (!asset) {
      return false;
    }
-    await onViewAsset(assets[index]);
-    return true;
-  };
-
-  const onPrevious = async () => {
-    const index = getAssetIndex($viewingAsset.id) - 1;
-    if (index < 0) {
-      return false;
-    }
-    await onViewAsset(assets[index]);
+    await onViewAsset(asset);
    return true;
  };

@@ -65,6 +57,59 @@
  const onViewAsset = async (asset: AssetResponseDto) => {
    await navigate({ targetRoute: 'current', assetId: asset.id });
  };
+
+  const getNextAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
+    if (!currentAsset) {
+      return;
+    }
+    const cursor = assets.indexOf(currentAsset);
+    if (cursor < assets.length - 1) {
+      const id = assets[cursor + 1].id;
+      const asset = await getAssetInfo({ ...authManager.params, id });
+      if (preload) {
+        void getNextAsset(asset, false);
+      }
+      return asset;
+    }
+  };
+
+  const getPreviousAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
+    if (!currentAsset) {
+      return;
+    }
+    const cursor = assets.indexOf(currentAsset);
+    if (cursor <= 0) {
+      return;
+    }
+    const id = assets[cursor - 1].id;
+    const asset = await getAssetInfo({ ...authManager.params, id });
+    if (preload) {
+      void getPreviousAsset(asset, false);
+    }
+    return asset;
+  };
+
+  let assetCursor = $state<AssetCursor>({
+    current: $viewingAsset,
+    previousAsset: undefined,
+    nextAsset: undefined,
+  });
+
+  const loadCloseAssets = async (currentAsset: AssetResponseDto) => {
+    const [nextAsset, previousAsset] = await Promise.all([getNextAsset(currentAsset), getPreviousAsset(currentAsset)]);
+    assetCursor = {
+      current: currentAsset,
+      nextAsset,
+      previousAsset,
+    };
+  };
+
+  //TODO: replace this with async derived in svelte 6
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    $viewingAsset;
+    untrack(() => void loadCloseAssets($viewingAsset));
+  });
 </script>

 <UserPageLayout title={data.meta.title} scrollbar={true}>
@@ -85,10 +130,9 @@
  {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
    <Portal target="body">
      <AssetViewer
-        asset={$viewingAsset}
+        cursor={assetCursor}
+        onNavigateToAsset={handleNavigateToAsset}
        showNavigation={assets.length > 1}
-        {onNext}
-        {onPrevious}
        {onRandom}
        {onAction}
        onClose={() => {
Author	SHA1	Message	Date
midzelis	45a5d41fdf	feat: redesign asset-viewer previous/next buttons (perf/prep for transitions), and hide nav button when no photo	2025-12-28 17:56:56 +00:00
midzelis	fe29d74a13	feat: cache asset info for prev/next navigation	2025-12-28 16:06:27 +00:00
midzelis	4836963196	feat: PreloadManager - improve perf and standardize preloading behevior fix test	2025-12-28 16:05:30 +00:00
midzelis	841046931b	fix: canceling a bucket while findMonthGroupForAsset is waiting fails	2025-12-28 14:28:48 +00:00
Lauritz Tieste	0df618feee	feat: Hide/show controls when zoom state changes (#24784 ) feat: hide/show controls based on zoom state in asset viewer	2025-12-27 16:02:42 -06:00
Daniel Dietzler	363b9276eb	fix: album card timezone (#24855 )	2025-12-26 21:40:07 -06:00
idubnori	36d7dd9319	feat(mobile): album options to kebab menu (#24204 ) * feat(mobile): refactor album options into kebab menu for improved UX * feat(mobile): update BaseActionButton to use iconColor for text styling and add delete button color in DriftRemoteAlbumOption * feat: const Divider(height: 1) * fix(mobile): update icon color for album options menu button * chore: refactor * chore: refactor * add test --------- Co-authored-by: Alex <alex.tran1502@gmail.com>	2025-12-26 18:46:05 +00:00
Peter Ombodi	a57c4d9a9e	fix(drift backup notifier): add lifecycle guards and dispose logging (#24806 ) * fix(drift backup notifier): add lifecycle guards and dispose logging * fix(drift backup notifier): re-read notifiers in callbacks to avoid disposed backup notifier * fix(drift backup notifier): increase the log level to warning. --------- Co-authored-by: Peter Ombodi <peter.ombodi@gmail.com>	2025-12-26 18:44:07 +00:00
Marcin Wróblewski	724948d36d	feat(mobile): use tabular figures in backup info card (#24820 ) * feat(mobile): use tabular figures in backup info card during large (initial) backups current non-tabular figures are jumping around the UI, making the UI hard to follow. this change makes sure there’s no jump in text width between e.g. 7888 to 7111 * chore: use const	2025-12-25 22:27:33 -06:00
Min Idzelis	83f8065f10	fix: autogrow textarea bugs during animation (#24481 )	2025-12-24 13:21:08 +01:00