Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-08-30 23:02:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor hmr a bit more

Browse Source
This commit is contained in:
midzelis 2025-08-24 15:34:31 +00:00
parent 176b064866
commit 1dd06fd9ff
2 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte
View File

@ -12,6 +12,7 @@
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
import { onMount, type Snippet } from 'svelte';
import type { UpdatePayload } from 'vite';
interface Props {
isSelectionMode?: boolean;
@ -181,12 +182,24 @@
</script>
<Hmr
onHmr={() => {
const asset = $page.url.searchParams.get('at');
if (asset) {
$gridScrollTarget = { at: asset };
onAfterUpdate={(payload: UpdatePayload) => {
// when hmr happens, skeleton is initialized to true by default
// normally, loading asset-grid is part of a navigation event, and the completion of
// that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
// this handler will run the navigation/scroll-to-asset handler when hmr is performed,
// preventing skeleton from showing after hmr
const finishHmr = () => {
const asset = $page.url.searchParams.get('at');
if (asset) {
$gridScrollTarget = { at: asset };
}
void completeNav();
};
const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('base-timeline-viewer.svelte'));
if (assetGridUpdate) {
// wait 500ms for the update to be fully swapped in
setTimeout(finishHmr, 500);
}
void completeNav();
}}
/>

27
web/src/lib/components/timeline/base-components/hmr.svelte
View File

@ -3,29 +3,14 @@
import type { UpdatePayload } from 'vite';
interface Props {
onHmr: () => void;
onAfterUpdate: (payload: UpdatePayload) => void;
}
let { onHmr }: Props = $props();
let { onAfterUpdate }: Props = $props();
onMount(() => {
const hmrSupport = () => {
// when hmr happens, skeleton is initialized to true by default
// normally, loading asset-grid is part of a navigation event, and the completion of
// that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
// this handler will run the navigation/scroll-to-asset handler when hmr is performed,
// preventing skeleton from showing after hmr
if (import.meta && import.meta?.hot) {
const afterUpdate = (payload: UpdatePayload) => {
const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('base-timeline-viewer.svelte'));
if (assetGridUpdate) {
setTimeout(onHmr, 500);
}
};
import.meta.hot?.on('vite:afterUpdate', afterUpdate);
return () => import.meta.hot?.off('vite:afterUpdate', afterUpdate);
}
return () => void 0;
};
return hmrSupport();
if (import.meta && import.meta?.hot) {
import.meta.hot?.on('vite:afterUpdate', onAfterUpdate);
return () => import.meta.hot?.off('vite:afterUpdate', onAfterUpdate);
}
});
</script>