feat: timeline performance (#16446)

* Squash - feature complete

* remove need to init assetstore

* More optimizations. No need to init. Fix tests

* lint

* add missing selector for e2e

* e2e selectors again

* Update: fully reactive store, some transitions, bugfixes

* merge fallout

* Test fallout

* safari quirk

* security

* lint

* lint

* Bug fixes

* lint/format

* accidental commit

* lock

* null check, more throttle

* revert long duration

* Fix intersection bounds

* Fix bugs in intersection calculation

* lint, tweak scrubber ui a tiny bit

* bugfix - deselecting asset doesnt work

* fix not loading bucket, scroll off-by-1 error, jsdoc, naming

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

@@ -136,13 +136,17 @@
     nextPage = 1;
     searchResultAssets = [];
     searchResultAlbums = [];
-    await loadNextPage();
+    await loadNextPage(true);
   }
 
-  const loadNextPage = async () => {
+  // eslint-disable-next-line svelte/valid-prop-names-in-kit-pages
+  export const loadNextPage = async (force?: boolean) => {
     if (!nextPage || searchResultAssets.length >= MAX_ASSET_COUNT) {
       return;
     }
+    if (isLoading && !force) {
+      return;
+    }
     isLoading = true;
 
     const searchDto: SearchTerms = {
@@ -232,9 +236,6 @@
     return tagNames.join(', ');
   }
 
-  // eslint-disable-next-line no-self-assign
-  const triggerAssetUpdate = () => (searchResultAssets = searchResultAssets);
-
   const onAddToAlbum = (assetIds: string[]) => {
     if (terms.isNotInAlbum.toString() == 'true') {
       const assetIdSet = new Set(assetIds);
@@ -262,13 +263,23 @@
           <AddToAlbum {onAddToAlbum} />
           <AddToAlbum shared {onAddToAlbum} />
         </ButtonContextMenu>
-        <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={triggerAssetUpdate} />
+        <FavoriteAction
+          removeFavorite={assetInteraction.isAllFavorite}
+          onFavorite={(ids, isFavorite) => {
+            for (const id of ids) {
+              const asset = searchResultAssets.find((asset) => asset.id === id);
+              if (asset) {
+                asset.isFavorite = isFavorite;
+              }
+            }
+          }}
+        />
 
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
           <DownloadAction menuItem />
           <ChangeDate menuItem />
           <ChangeLocation menuItem />
-          <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={triggerAssetUpdate} />
+          <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
           {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
             <TagAction menuItem />
           {/if}
@@ -281,6 +292,10 @@
   {:else}
     <div class="fixed z-[100] top-0 left-0 w-full">
       <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
+        <div
+          class="-z-[1] bg-immich-bg dark:bg-immich-dark-bg"
+          style="position:absolute;top:0;left:0;right:0;bottom:0;"
+        ></div>
         <div class="w-full flex-1 pl-4">
           <SearchBar grayTheme={false} value={terms?.query ?? ''} searchQuery={terms} />
         </div>
@@ -329,45 +344,43 @@
 {/if}
 
 <section
-  class="relative mb-12 bg-immich-bg dark:bg-immich-dark-bg m-4"
+  class="mb-12 bg-immich-bg dark:bg-immich-dark-bg m-4"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
 >
-  <section class="immich-scrollbar relative overflow-y-auto">
-    {#if searchResultAlbums.length > 0}
-      <section>
-        <div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">{$t('albums').toUpperCase()}</div>
-        <AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
+  {#if searchResultAlbums.length > 0}
+    <section>
+      <div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">{$t('albums').toUpperCase()}</div>
+      <AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
 
-        <div class="m-6 text-4xl font-medium text-black/70 dark:text-white/80">
-          {$t('photos_and_videos').toUpperCase()}
-        </div>
-      </section>
-    {/if}
-    <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
-      {#if searchResultAssets.length > 0}
-        <GalleryViewer
-          assets={searchResultAssets}
-          {assetInteraction}
-          onIntersected={loadNextPage}
-          showArchiveIcon={true}
-          {viewport}
-        />
-      {:else if !isLoading}
-        <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
-          <div class="flex flex-col content-center items-center text-center">
-            <Icon path={mdiImageOffOutline} size="3.5em" />
-            <p class="mt-5 text-3xl font-medium">{$t('no_results')}</p>
-            <p class="text-base font-normal">{$t('no_results_description')}</p>
-          </div>
-        </div>
-      {/if}
-
-      {#if isLoading}
-        <div class="flex justify-center py-16 items-center">
-          <LoadingSpinner size="48" />
-        </div>
-      {/if}
+      <div class="m-6 text-4xl font-medium text-black/70 dark:text-white/80">
+        {$t('photos_and_videos').toUpperCase()}
+      </div>
     </section>
+  {/if}
+  <section id="search-content">
+    {#if searchResultAssets.length > 0}
+      <GalleryViewer
+        assets={searchResultAssets}
+        {assetInteraction}
+        onIntersected={loadNextPage}
+        showArchiveIcon={true}
+        {viewport}
+      />
+    {:else if !isLoading}
+      <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
+        <div class="flex flex-col content-center items-center text-center">
+          <Icon path={mdiImageOffOutline} size="3.5em" />
+          <p class="mt-5 text-3xl font-medium">{$t('no_results')}</p>
+          <p class="text-base font-normal">{$t('no_results_description')}</p>
+        </div>
+      </div>
+    {/if}
+
+    {#if isLoading}
+      <div class="flex justify-center py-16 items-center">
+        <LoadingSpinner size="48" />
+      </div>
+    {/if}
   </section>
 </section>