feat: async images

Neovici · Dec 11, 2023 · 195cd99 · 195cd99
1 parent 175c437
commit 195cd99
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 20 deletions.
diff --git a/cosmoz-image-viewer.style.js b/cosmoz-image-viewer.style.js
@@ -115,8 +115,13 @@ button.nav:active:not([disabled]) {
 
 cosmoz-slider { 
     min-height: 150px;
+    overflow-y: auto !important;
     height:100%;
-    overflow-y: hidden;
 }
 
+cz-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
 `;
diff --git a/lib/hooks/use-cosmoz-image-viewer.js b/lib/hooks/use-cosmoz-image-viewer.js
@@ -1,11 +1,17 @@
+import '@neovici/cosmoz-utils/elements/cz-spinner';
+
 import { useSlideList } from '@neovici/cosmoz-slider';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
 import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
-import { useCallback, useEffect, useState } from 'haunted';
-import { html } from 'lit-html';
+import { useCallback, useEffect, useMemo, useState } from 'haunted';
+import { html, nothing } from 'lit-html';
 import { download } from '../pdf';
 import { popout, hasWindow } from '../popout';
 import { print } from '../print';
+import { guard } from 'lit-html/directives/guard.js';
+import { until } from 'lit-html/directives/until.js';
+import { invoke } from '@neovici/cosmoz-utils/function';
+import { memoize } from '@neovici/cosmoz-utils/memoize';
 
 const onImageError = (e) => {
 		if (!e.currentTarget.parentElement) {
@@ -18,21 +24,32 @@ const onImageError = (e) => {
 		e.currentTarget.setAttribute('hidden', true);
 	},
 	onStatusChanged = (ev) => ev.detail.value === 'error' && onImageError(ev),
-	renderImage = ({ showZoom, image, isZoomed, _onZoomChanged }) =>
-		showZoom
-			? html`<haunted-pan-zoom
-					class="image-zoom"
-					.src=${image}
-					?disabled=${!isZoomed}
-					@zoom-changed=${_onZoomChanged}
-					@status-changed=${onStatusChanged}
-			  ></haunted-pan-zoom>`
-			: html`<img
-					class="image"
-					.src=${image}
-					style="width:100%"
-					@error=${onImageError}
-			  />`,
+	renderImage = ({ src$, showZoom, isZoomed, _onZoomChanged }) => {
+		const src = guard(src$, () => until(src$));
+
+		return [
+			showZoom
+				? html`<haunted-pan-zoom
+						class="image-zoom"
+						.src=${src}
+						?disabled=${!isZoomed}
+						@zoom-changed=${_onZoomChanged}
+						@status-changed=${onStatusChanged}
+				  ></haunted-pan-zoom>`
+				: html`<img
+						class="image"
+						.src=${src}
+						style="width:100%"
+						@error=${onImageError}
+				  />`,
+			guard(src$, () =>
+				until(
+					src$.then(() => nothing),
+					html`<cz-spinner></cz-spinner>`,
+				),
+			),
+		];
+	},
 	render = (opts) =>
 		html`<div>
 			<div hidden class="error">
@@ -52,11 +69,20 @@ const onImageError = (e) => {
 			} = host,
 			[isZoomed, setIsZoomed] = useState(false),
 			_onZoomChanged = (ev) => setIsZoomed(ev.detail.value > 1),
-			{ slide, next, prev, goto, index } = useSlideList(images, {
+			_invoke = useMemo(
+				() => memoize((image) => Promise.resolve(invoke(image))),
+				[],
+			),
+			{ slide, next, prev, goto, index, first, last } = useSlideList(images, {
 				loop,
 				initial: images[host.currentImageIndex],
 				render: (image) =>
-					render({ image, showZoom, isZoomed, _onZoomChanged }),
+					render({
+						src$: _invoke(image),
+						showZoom,
+						isZoomed,
+						_onZoomChanged,
+					}),
 			}),
 			[isFullscreen, setIsFullscreen] = useState(false),
 			openFullscreen = () => setIsFullscreen(true),
@@ -97,6 +123,8 @@ const onImageError = (e) => {
 			currentSlide: slide,
 			nextImage: next,
 			previousImage: prev,
+			first,
+			last,
 			total: images.length,
 			currentImageIndex: index,
 			selectedImageNumber: index + 1,