perf(web): optimize date groups (#7593)

* optimize date groups

* remove `.values()`

* remove console.log

* remove if condition

* remove console.log

* remove outdated comment

* revert dynamic import

web/src/lib/components/photos-page/actions/select-all-assets.svelte

@@ -21,7 +21,7 @@
         if ($isSelectAllCancelled) {
           break;
         }
-        await assetStore.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
+        await assetStore.loadBucket(bucket.date, BucketPosition.Unknown);
         for (const asset of bucket.assets) {
           assetInteractionStore.selectAsset(asset);
         }

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -2,15 +2,9 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { AssetStore, Viewport } from '$lib/stores/assets.store';
-  import { locale } from '$lib/stores/preferences.store';
+  import type { AssetBucket, AssetStore, Viewport } from '$lib/stores/assets.store';
   import { getAssetRatio } from '$lib/utils/asset-utils';
-  import {
-    calculateWidth,
-    formatGroupTitle,
-    fromLocalDateTime,
-    splitBucketIntoDateGroups,
-  } from '$lib/utils/timeline-util';
+  import { calculateWidth, formatGroupTitle, fromLocalDateTime } from '$lib/utils/timeline-util';
   import type { AssetResponseDto } from '@immich/sdk';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
   import justifiedLayout from 'justified-layout';
@@ -18,9 +12,7 @@
   import { fly } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
 
-  export let assets: AssetResponseDto[];
-  export let bucketDate: string;
-  export let bucketHeight: number;
+  export let bucket: AssetBucket;
   export let isSelectionMode = false;
   export let viewport: Viewport;
   export let singleSelect = false;
@@ -42,7 +34,7 @@
   let actualBucketHeight: number;
   let hoveredDateGroup = '';
 
-  $: assetsGroupByDate = splitBucketIntoDateGroups(assets, $locale);
+  $: assetsGroupByDate = [...bucket.dateGroups.values()];
 
   $: geometry = (() => {
     const geometry = [];
@@ -66,8 +58,8 @@
   })();
 
   $: {
-    if (actualBucketHeight && actualBucketHeight !== 0 && actualBucketHeight != bucketHeight) {
-      const heightDelta = assetStore.updateBucket(bucketDate, actualBucketHeight);
+    if (actualBucketHeight && actualBucketHeight !== 0 && actualBucketHeight != bucket.height) {
+      const heightDelta = assetStore.updateBucket(bucket.date, actualBucketHeight);
       if (heightDelta !== 0) {
         scrollTimeline(heightDelta);
       }

web/src/lib/components/photos-page/asset-grid.svelte

@@ -5,12 +5,12 @@
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
-  import { locale, showDeleteModal } from '$lib/stores/preferences.store';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
   import { isSearchEnabled } from '$lib/stores/search.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { deleteAssets } from '$lib/utils/actions';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
-  import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
+  import { formatGroupTitle } from '$lib/utils/timeline-util';
   import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
@@ -22,7 +22,6 @@
   import AssetDateGroup from './asset-date-group.svelte';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
   import { handlePromiseError } from '$lib/utils';
-
   export let isSelectionMode = false;
   export let singleSelect = false;
   export let assetStore: AssetStore;
@@ -306,7 +305,7 @@
       // Select/deselect assets in all intermediate buckets
       for (let bucketIndex = startBucketIndex + 1; bucketIndex < endBucketIndex; bucketIndex++) {
         const bucket = $assetStore.buckets[bucketIndex];
-        await assetStore.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
+        await assetStore.loadBucket(bucket.date, BucketPosition.Unknown);
         for (const asset of bucket.assets) {
           if (deselect) {
             assetInteractionStore.removeAssetFromMultiselectGroup(asset);
@@ -320,10 +319,7 @@
       for (let bucketIndex = startBucketIndex; bucketIndex <= endBucketIndex; bucketIndex++) {
         const bucket = $assetStore.buckets[bucketIndex];
 
-        // Split bucket into date groups and check each group
-        const assetsGroupByDate = splitBucketIntoDateGroups(bucket.assets, $locale);
-
-        for (const dateGroup of assetsGroupByDate) {
+        for (const dateGroup of bucket.dateGroups.values()) {
           const dateGroupTitle = formatGroupTitle(DateTime.fromISO(dateGroup[0].fileCreatedAt).startOf('day'));
           if (dateGroup.every((a) => $selectedAssets.has(a))) {
             assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
@@ -414,7 +410,7 @@
       <slot name="empty" />
     {/if}
     <section id="virtual-timeline" style:height={$assetStore.timelineHeight + 'px'}>
-      {#each $assetStore.buckets as bucket (bucket.bucketDate)}
+      {#each $assetStore.buckets as bucket (bucket.date)}
         <IntersectionObserver
           on:intersected={intersectedHandler}
           on:hidden={() => assetStore.cancelBucket(bucket)}
@@ -423,7 +419,7 @@
           bottom={750}
           root={element}
         >
-          <div id={'bucket_' + bucket.bucketDate} style:height={bucket.bucketHeight + 'px'}>
+          <div id={'bucket_' + bucket.date} style:height={bucket.height + 'px'}>
             {#if intersecting}
               <AssetDateGroup
                 {withStacked}
@@ -436,9 +432,7 @@
                 on:shift={handleScrollTimeline}
                 on:selectAssetCandidates={({ detail: asset }) => handleSelectAssetCandidates(asset)}
                 on:selectAssets={({ detail: asset }) => handleSelectAssets(asset)}
-                assets={bucket.assets}
-                bucketDate={bucket.bucketDate}
-                bucketHeight={bucket.bucketHeight}
+                {bucket}
                 {viewport}
               />
             {/if}

web/src/lib/components/shared-components/scrollbar/scrollbar.svelte

@@ -38,8 +38,8 @@
     return buckets.map((bucket) => {
       const segment = new Segment();
       segment.count = bucket.assets.length;
-      segment.height = toScrollY(bucket.bucketHeight);
-      segment.timeGroup = bucket.bucketDate;
+      segment.height = toScrollY(bucket.height);
+      segment.timeGroup = bucket.date;
       segment.date = fromLocalDateTime(segment.timeGroup);
 
       if (previous?.date.year !== segment.date.year && height > MIN_YEAR_LABEL_DISTANCE) {