Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-09-29 15:31:13 -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 50d9b1ec60
commit 2a55b05a25
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

@ -13,6 +13,7 @@
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { mobileDevice } from '$lib/stores/mobile-device.svelte'; import { mobileDevice } from '$lib/stores/mobile-device.svelte';
import { onMount, type Snippet } from 'svelte'; import { onMount, type Snippet } from 'svelte';
import type { UpdatePayload } from 'vite';
interface Props { interface Props {
customThumbnailLayout?: Snippet<[TimelineAsset]>; customThumbnailLayout?: Snippet<[TimelineAsset]>;
@ -189,12 +190,24 @@
</script> </script>
<Hmr <Hmr
onHmr={() => { onAfterUpdate={(payload: UpdatePayload) => {
const asset = $page.url.searchParams.get('at'); // when hmr happens, skeleton is initialized to true by default
if (asset) { // normally, loading asset-grid is part of a navigation event, and the completion of
$gridScrollTarget = { at: asset }; // 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'; import type { UpdatePayload } from 'vite';
interface Props { interface Props {
onHmr: () => void; onAfterUpdate: (payload: UpdatePayload) => void;
} }
let { onHmr }: Props = $props(); let { onAfterUpdate }: Props = $props();
onMount(() => { onMount(() => {
const hmrSupport = () => { if (import.meta && import.meta?.hot) {
// when hmr happens, skeleton is initialized to true by default import.meta.hot?.on('vite:afterUpdate', onAfterUpdate);
// normally, loading asset-grid is part of a navigation event, and the completion of return () => import.meta.hot?.off('vite:afterUpdate', onAfterUpdate);
// 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();
}); });
</script> </script>