feat(web): Scroll to asset in gridview; increase gridview perf; reduce memory; scrollbar ticks in fixed position (#10646)

* Squashed

* Change strategy - now pre-measure buckets offscreen, so don't need to worry about sub-bucket scroll preservation

* Reduce jank on scroll, delay DOM updates until after scroll

* css opt, log measure time

* Trickle out queue while scrolling, flush when stopped

* yay

* Cleanup cleanup...

* everybody...

* everywhere...

* Clean up cleanup!

* Everybody do their share

* CLEANUP!

* package-lock ?

* dynamic measure, todo

* Fix web test

* type lint

* fix e2e

* e2e test

* Better scrollbar

* Tuning, and more tunables

* Tunable tweaks, more tunables

* Scrollbar dots and viewport events

* lint

* Tweaked tunnables, use requestIdleCallback for garbage tasks, bug fixes

* New tunables, and don't update url by default

* Bug fixes

* Bug fix, with debug

* Fix flickr, fix graybox bug, reduced debug

* Refactor/cleanup

* Fix

* naming

* Final cleanup

* review comment

* Forgot to update this after naming change

* scrubber works, with debug

* cleanup

* Rename scrollbar to scrubber

* rename  to

* left over rename and change to previous album bar

* bugfix addassets, comments

* missing destroy(), cleanup

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/routes/(user)/+layout.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
   import { page } from '$app/stores';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  let { isViewing: showAssetViewer, setAsset } = assetViewingStore;
 
-  // This block takes care of opening the viewer.
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  let { isViewing: showAssetViewer, setAsset, gridScrollTarget } = assetViewingStore;
+
   // $page.data.asset is loaded by route specific +page.ts loaders if that
   // route contains the assetId path.
   $: {
@@ -13,6 +13,8 @@
     } else {
       $showAssetViewer = false;
     }
+    const asset = $page.url.searchParams.get('at');
+    $gridScrollTarget = { at: asset };
   }
 </script>
 

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -43,7 +43,13 @@
   import { downloadAlbum } from '$lib/utils/asset-utils';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
-  import { isAlbumsRoute, isPeopleRoute, isSearchRoute } from '$lib/utils/navigation';
+  import {
+    isAlbumsRoute,
+    isPeopleRoute,
+    isSearchRoute,
+    navigate,
+    type AssetGridRouteSearchParams,
+  } from '$lib/utils/navigation';
   import {
     AlbumUserRole,
     AssetOrder,
@@ -78,12 +84,15 @@
   import type { PageData } from './$types';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
+  import { onDestroy } from 'svelte';
 
   export let data: PageData;
 
-  let { isViewing: showAssetViewer, setAsset } = assetViewingStore;
+  let { isViewing: showAssetViewer, setAsset, gridScrollTarget } = assetViewingStore;
   let { slideshowState, slideshowNavigation } = slideshowStore;
 
+  let oldAt: AssetGridRouteSearchParams | null | undefined;
+
   $: album = data.album;
   $: albumId = album.id;
   $: albumKey = `${albumId}_${albumOrder}`;
@@ -244,7 +253,7 @@
     }
 
     if (viewMode === ViewMode.SELECT_ASSETS) {
-      handleCloseSelectAssets();
+      await handleCloseSelectAssets();
       return;
     }
     if (viewMode === ViewMode.LINK_SHARING) {
@@ -289,20 +298,37 @@
 
       timelineInteractionStore.clearMultiselect();
       viewMode = ViewMode.VIEW;
+      await navigate(
+        { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget },
+        { replaceState: true, forceNavigate: true },
+      );
     } catch (error) {
       handleError(error, $t('errors.error_adding_assets_to_album'));
     }
   };
 
-  const handleCloseSelectAssets = () => {
+  const setModeToView = async () => {
     viewMode = ViewMode.VIEW;
+    assetStore.destroy();
+    assetStore = new AssetStore({ albumId, order: albumOrder });
+    timelineStore.destroy();
+    timelineStore = new AssetStore({ isArchived: false }, albumId);
+    await navigate(
+      { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: oldAt?.at } },
+      { replaceState: true, forceNavigate: true },
+    );
+    oldAt = null;
+  };
+
+  const handleCloseSelectAssets = async () => {
     timelineInteractionStore.clearMultiselect();
+    await setModeToView();
   };
 
   const handleSelectFromComputer = async () => {
     await openFileUploadDialog({ albumId: album.id });
     timelineInteractionStore.clearMultiselect();
-    viewMode = ViewMode.VIEW;
+    await setModeToView();
   };
 
   const handleAddUsers = async (albumUsers: AlbumUserAddDto[]) => {
@@ -400,6 +426,11 @@
       await deleteAlbum(album);
     }
   });
+
+  onDestroy(() => {
+    assetStore.destroy();
+    timelineStore.destroy();
+  });
 </script>
 
 <div class="flex overflow-hidden" bind:clientWidth={globalWidth}>
@@ -444,7 +475,14 @@
             {#if isEditor}
               <CircleIconButton
                 title={$t('add_photos')}
-                on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
+                on:click={async () => {
+                  viewMode = ViewMode.SELECT_ASSETS;
+                  oldAt = { at: $gridScrollTarget?.at };
+                  await navigate(
+                    { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: null } },
+                    { replaceState: true },
+                  );
+                }}
                 icon={mdiImagePlusOutline}
               />
             {/if}
@@ -530,12 +568,14 @@
       {#key albumKey}
         {#if viewMode === ViewMode.SELECT_ASSETS}
           <AssetGrid
+            enableRouting={false}
             assetStore={timelineStore}
             assetInteractionStore={timelineInteractionStore}
             isSelectionMode={true}
           />
         {:else}
           <AssetGrid
+            enableRouting={true}
             {album}
             {assetStore}
             {assetInteractionStore}

web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -17,6 +17,7 @@
   import type { PageData } from './$types';
   import { mdiPlus, mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { onDestroy } from 'svelte';
 
   export let data: PageData;
 
@@ -25,6 +26,10 @@
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
   $: isAllFavorite = [...$selectedAssets].every((asset) => asset.isFavorite);
+
+  onDestroy(() => {
+    assetStore.destroy();
+  });
 </script>
 
 {#if $isMultiSelectState}
@@ -45,7 +50,7 @@
 {/if}
 
 <UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
-  <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
+  <AssetGrid enableRouting={true} {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
     <EmptyPlaceholder text={$t('no_archived_assets_message')} slot="empty" />
   </AssetGrid>
 </UserPageLayout>

web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -19,6 +19,7 @@
   import type { PageData } from './$types';
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { onDestroy } from 'svelte';
 
   export let data: PageData;
 
@@ -27,6 +28,10 @@
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
 
   $: isAllArchive = [...$selectedAssets].every((asset) => asset.isArchived);
+
+  onDestroy(() => {
+    assetStore.destroy();
+  });
 </script>
 
 <!-- Multiselection mode app bar -->
@@ -50,7 +55,7 @@
 {/if}
 
 <UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
-  <AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
+  <AssetGrid enableRouting={true} {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
     <EmptyPlaceholder text={$t('no_favorites_message')} slot="empty" />
   </AssetGrid>
 </UserPageLayout>

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -124,7 +124,10 @@
           showNavigation={viewingAssets.length > 1}
           on:next={navigateNext}
           on:previous={navigatePrevious}
-          on:close={() => assetViewingStore.showAssetViewer(false)}
+          on:close={() => {
+            assetViewingStore.showAssetViewer(false);
+            handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
+          }}
           isShared={false}
         />
       {/await}

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -23,6 +23,7 @@
 
   onDestroy(() => {
     assetInteractionStore.clearMultiselect();
+    assetStore.destroy();
   });
 </script>
 
@@ -45,5 +46,5 @@
       </svelte:fragment>
     </ControlAppBar>
   {/if}
-  <AssetGrid {assetStore} {assetInteractionStore} />
+  <AssetGrid enableRouting={true} {assetStore} {assetInteractionStore} />
 </main>

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -52,7 +52,7 @@
     mdiEyeOutline,
     mdiPlus,
   } from '@mdi/js';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import type { PageData } from './$types';
   import { listNavigation } from '$lib/actions/list-navigation';
   import { t } from 'svelte-i18n';
@@ -155,6 +155,7 @@
     }
     if (previousPersonId !== data.person.id) {
       handlePromiseError(updateAssetCount());
+      assetStore.destroy();
       assetStore = new AssetStore({
         isArchived: false,
         personId: data.person.id,
@@ -344,6 +345,10 @@
       await goto($page.url);
     }
   };
+
+  onDestroy(() => {
+    assetStore.destroy();
+  });
 </script>
 
 {#if viewMode === ViewMode.UNASSIGN_ASSETS}
@@ -442,6 +447,7 @@
 <main class="relative h-screen overflow-hidden bg-immich-bg tall:ml-4 pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
   {#key refreshAssetGrid}
     <AssetGrid
+      enableRouting={true}
       {assetStore}
       {assetInteractionStore}
       isSelectionMode={viewMode === ViewMode.SELECT_PERSON}

web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte

@@ -24,6 +24,7 @@
   import { mdiDotsVertical, mdiPlus } from '@mdi/js';
   import { preferences, user } from '$lib/stores/user.store';
   import { t } from 'svelte-i18n';
+  import { onDestroy } from 'svelte';
 
   let { isViewing: showAssetViewer } = assetViewingStore;
   const assetStore = new AssetStore({ isArchived: false, withStacked: true, withPartners: true });
@@ -48,6 +49,10 @@
       return;
     }
   };
+
+  onDestroy(() => {
+    assetStore.destroy();
+  });
 </script>
 
 {#if $isMultiSelectState}
@@ -84,6 +89,7 @@
 
 <UserPageLayout hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
   <AssetGrid
+    enableRouting={true}
     {assetStore}
     {assetInteractionStore}
     removeAction={AssetAction.ARCHIVE}

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -291,7 +291,7 @@
         <GalleryViewer
           assets={searchResultAssets}
           bind:selectedAssets
-          on:intersected={loadNextPage}
+          onIntersected={loadNextPage}
           showArchiveIcon={true}
           {viewport}
         />

web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -11,8 +11,13 @@
   import type { PageData } from './$types';
   import { setSharedLink } from '$lib/utils';
   import { t } from 'svelte-i18n';
+  import { navigate } from '$lib/utils/navigation';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { tick } from 'svelte';
 
   export let data: PageData;
+
+  let { gridScrollTarget } = assetViewingStore;
   let { sharedLink, passwordRequired, sharedLinkKey: key, meta } = data;
   let { title, description } = meta;
   let isOwned = $user ? $user.id === sharedLink?.userId : false;
@@ -29,6 +34,11 @@
       description =
         sharedLink.description ||
         $t('shared_photos_and_videos_count', { values: { assetCount: sharedLink.assets.length } });
+      await tick();
+      await navigate(
+        { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget },
+        { forceNavigate: true, replaceState: true },
+      );
     } catch (error) {
       handleError(error, $t('errors.unable_to_get_shared_link'));
     }

web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -25,6 +25,7 @@
   import { handlePromiseError } from '$lib/utils';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
+  import { onDestroy } from 'svelte';
 
   export let data: PageData;
 
@@ -84,6 +85,10 @@
       handleError(error, $t('errors.unable_to_restore_trash'));
     }
   };
+
+  onDestroy(() => {
+    assetStore.destroy();
+  });
 </script>
 
 {#if $isMultiSelectState}
@@ -111,7 +116,7 @@
       </LinkButton>
     </div>
 
-    <AssetGrid {assetStore} {assetInteractionStore}>
+    <AssetGrid enableRouting={true} {assetStore} {assetInteractionStore}>
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         {$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
       </p>