@marianmeres/stuic 3.47.2 → 3.47.4

package/dist/components/AssetsPreview/AssetsPreviewInline.svelte

@@ -46,6 +46,8 @@
 		initialIndex?: number;
 		/** Current asset index (bindable). Defaults to initialIndex. */
 		currentIndex?: number;
+		/** Force preloading of all assets on mount, regardless of count (default: false) */
+		preloadAll?: boolean;
 	}
 </script>
 
@@ -75,6 +77,7 @@
 		prevNextBottom = false,
 		initialIndex = 0,
 		currentIndex = $bindable(initialIndex),
+		preloadAll = false,
 	}: Props = $props();
 
 	let assets: AssetPreviewNormalized[] = $derived(
@@ -83,18 +86,28 @@
 
 	let content: AssetsPreviewContent | undefined = $state();
 
-	// Preload images when assets change
+	// On-mount preload: all assets for small galleries or when forced;
+	// a window around the initial index for large collections.
 	$effect(() => {
-		const toPreload: PreloadImgOptions[] = (assets ?? [])
-			.filter((asset) => asset.isImage)
-			.map((asset) => ({
-				src: resolveUrl(String(asset.url.full), baseUrl),
-				srcset: resolveSrcset(asset.srcset ?? "", baseUrl) || undefined,
-				sizes: asset.sizes,
-			}));
-		if (toPreload.length) {
-			preloadImgs(toPreload);
-		}
+		const SMALL_THRESHOLD = 20;
+		const WINDOW = 5;
+
+		const all = (assets ?? []).filter((a) => a.isImage);
+		const subset =
+			preloadAll || all.length <= SMALL_THRESHOLD
+				? all
+				: all.slice(
+						Math.max(0, currentIndex - WINDOW),
+						Math.min(all.length, currentIndex + WINDOW + 1)
+					);
+
+		const toPreload: PreloadImgOptions[] = subset.map((asset) => ({
+			src: resolveUrl(String(asset.url.full), baseUrl),
+			srcset: resolveSrcset(asset.srcset ?? "", baseUrl) || undefined,
+			sizes: asset.sizes,
+		}));
+
+		if (toPreload.length) preloadImgs(toPreload);
 	});
 
 	export function goTo(index: number) {

package/dist/components/AssetsPreview/AssetsPreviewInline.svelte.d.ts

@@ -39,6 +39,8 @@ export interface Props {
     initialIndex?: number;
     /** Current asset index (bindable). Defaults to initialIndex. */
     currentIndex?: number;
+    /** Force preloading of all assets on mount, regardless of count (default: false) */
+    preloadAll?: boolean;
 }
 declare const AssetsPreviewInline: import("svelte").Component<Props, {
     goTo: (index: number) => void;

package/dist/components/AssetsPreview/_internal/AssetsPreviewContent.svelte

@@ -121,6 +121,20 @@
 	let loadingTimer: ReturnType<typeof setTimeout> | undefined;
 	let showSpinner = $state(false);
 
+	// Debounced index — prevents mass image downloads during rapid slider drags
+	let settledPreviewIdx = $state(0);
+	let _previewSettleTimer: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => {
+		const current = previewIdx;
+		clearTimeout(_previewSettleTimer);
+		_previewSettleTimer = setTimeout(() => {
+			settledPreviewIdx = current;
+		}, 120);
+	});
+
+	$effect(() => () => clearTimeout(_previewSettleTimer));
+
 	// Drag guard for area clicks (prevent click after drag/pan)
 	let _wasDragged = false;
 
@@ -432,7 +446,7 @@
 
 	// Preload nearest 2 assets in each direction
 	$effect(() => {
-		const idx = previewIdx;
+		const idx = settledPreviewIdx;
 		const len = assets.length;
 		if (len <= 1) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.47.2",
+  "version": "3.47.4",
   "files": [
     "dist",
     "!dist/**/*.test.*",