fix(web): timeline stuttering with many assets in 1 day (#28509)

* fix(web): timeline stuttering with many assets in 1 day

* cache isInOrNearViewport per day

* skip inOrNearViewport check on first run

web/src/lib/commands.ts

@@ -1,17 +1,35 @@
 import { defaultProvider, screencastManager, themeManager, ThemePreference, type ActionItem } from '@immich/ui';
 import {
   mdiAccountMultipleOutline,
+  mdiAccountOutline,
+  mdiArchiveArrowDownOutline,
   mdiBookshelf,
   mdiCog,
+  mdiContentDuplicate,
+  mdiCrosshairsGps,
+  mdiFolderOutline,
+  mdiHeartOutline,
+  mdiImageAlbum,
+  mdiImageMultipleOutline,
+  mdiImageSizeSelectLarge,
   mdiKeyboard,
+  mdiLink,
+  mdiLockOutline,
+  mdiMagnify,
+  mdiMapOutline,
   mdiServer,
+  mdiStateMachine,
   mdiSync,
+  mdiTagMultipleOutline,
   mdiThemeLightDark,
+  mdiToolboxOutline,
+  mdiTrashCanOutline,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
 import { Route } from '$lib/route';
 import { copyToClipboard } from '$lib/utils';
 
@@ -49,7 +67,133 @@ export const getPagesProvider = ($t: MessageFormatter) => {
     },
   ].map((route) => ({ ...route, $if: () => authManager.authenticated && authManager.user.isAdmin }));
 
-  return defaultProvider({ name: $t('page'), actions: adminPages });
+  const userPages: ActionItem[] = [
+    {
+      title: $t('photos'),
+      icon: mdiImageMultipleOutline,
+      onAction: () => goto(Route.photos()),
+    },
+    {
+      title: $t('explore'),
+      icon: mdiMagnify,
+      onAction: () => goto(Route.explore()),
+      $if: () => authManager.authenticated && featureFlagsManager.value.search,
+    },
+
+    {
+      title: $t('map'),
+      icon: mdiMapOutline,
+      onAction: () => goto(Route.map()),
+      $if: () => authManager.authenticated && featureFlagsManager.value.map,
+    },
+    {
+      title: $t('people'),
+      description: $t('people_feature_description'),
+      icon: mdiAccountOutline,
+      onAction: () => goto(Route.people()),
+      $if: () => authManager.authenticated && authManager.preferences.people.enabled,
+    },
+    {
+      title: $t('shared_links'),
+      icon: mdiLink,
+      onAction: () => goto(Route.sharedLinks()),
+      $if: () => authManager.authenticated && authManager.preferences.sharedLinks.enabled,
+    },
+    {
+      title: $t('recently_added'),
+      icon: mdiMagnify,
+      onAction: () => goto(Route.recentlyAdded()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('sharing'),
+      icon: mdiAccountMultipleOutline,
+      onAction: () => goto(Route.sharing()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('favorites'),
+      icon: mdiHeartOutline,
+      onAction: () => goto(Route.favorites()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('albums'),
+      description: $t('albums_feature_description'),
+      icon: mdiImageAlbum,
+      onAction: () => goto(Route.albums()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('tags'),
+      description: $t('tag_feature_description'),
+      icon: mdiTagMultipleOutline,
+      onAction: () => goto(Route.tags()),
+      $if: () => authManager.authenticated && authManager.preferences.tags.enabled,
+    },
+    {
+      title: $t('folders'),
+      description: $t('folders_feature_description'),
+      icon: mdiFolderOutline,
+      onAction: () => goto(Route.folders()),
+      $if: () => authManager.authenticated && authManager.preferences.folders.enabled,
+    },
+    {
+      title: $t('utilities'),
+      icon: mdiToolboxOutline,
+      onAction: () => goto(Route.utilities()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('archive'),
+      icon: mdiArchiveArrowDownOutline,
+      onAction: () => goto(Route.archive()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('locked_folder'),
+      icon: mdiLockOutline,
+      onAction: () => goto(Route.locked()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('trash'),
+      icon: mdiTrashCanOutline,
+      onAction: () => goto(Route.trash()),
+      $if: () => authManager.authenticated && featureFlagsManager.value.trash,
+    },
+    {
+      title: $t('admin.user_settings'),
+      icon: mdiCog,
+      onAction: () => goto(Route.userSettings()),
+      $if: () => authManager.authenticated,
+    },
+  ].map((route) => ({ $if: () => authManager.authenticated, ...route }));
+
+  const utilityPages: ActionItem[] = [
+    {
+      title: $t('review_duplicates'),
+      icon: mdiContentDuplicate,
+      onAction: () => goto(Route.duplicatesUtility()),
+    },
+    {
+      title: $t('review_large_files'),
+      icon: mdiImageSizeSelectLarge,
+      onAction: () => goto(Route.largeFileUtility()),
+    },
+    {
+      title: $t('manage_geolocation'),
+      icon: mdiCrosshairsGps,
+      onAction: () => goto(Route.geolocationUtility()),
+    },
+    {
+      title: $t('workflows'),
+      icon: mdiStateMachine,
+      onAction: () => goto(Route.workflows()),
+    },
+  ].map((route) => ({ ...route, $if: () => authManager.authenticated }));
+
+  return defaultProvider({ name: $t('page'), actions: [...userPages, ...utilityPages, ...adminPages] });
 };
 
 const getMyImmichLink = () => {

web/src/lib/components/timeline/AssetLayout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
   import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
@@ -31,11 +30,14 @@
 
   const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+
+  const firstInOrNearViewport = $derived(viewerAssets.findIndex((a) => a.isInOrNearViewport));
+  const lastInOrNearViewport = $derived(viewerAssets.findLastIndex((a) => a.isInOrNearViewport));
 </script>
 
 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
+  {#each viewerAssets.slice(firstInOrNearViewport, lastInOrNearViewport + 1) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
 

web/src/lib/managers/timeline-manager/timeline-day.svelte.ts

@@ -17,13 +17,13 @@ export class TimelineDay {
 
   height = $state(0);
   width = $state(0);
-  isInOrNearViewport = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.isInOrNearViewport));
 
   #top: number = $state(0);
   #start: number = $state(0);
   #row = $state(0);
   #col = $state(0);
   #deferredLayout = false;
+  #lastInOrNearViewport = -1;
 
   constructor(timelineMonth: TimelineMonth, index: number, day: number, groupTitle: string, orderBy: AssetOrderBy) {
     this.index = index;
@@ -154,4 +154,13 @@ export class TimelineDay {
   get absoluteTimelineDayTop() {
     return this.timelineMonth.top + this.#top;
   }
+
+  get isInOrNearViewport() {
+    if (this.#lastInOrNearViewport !== -1 && this.viewerAssets[this.#lastInOrNearViewport].isInOrNearViewport) {
+      return true;
+    }
+
+    this.#lastInOrNearViewport = this.viewerAssets.findIndex((viewAsset) => viewAsset.isInOrNearViewport);
+    return this.#lastInOrNearViewport !== -1;
+  }
 }