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
This commit is contained in:
Mert 2024-03-03 17:12:52 -05:00 committed by GitHub
parent 2fa10a254c
commit 762c4684f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 96 additions and 104 deletions

View file

@ -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);
}