preloading and one fix

src/lib/components/atoms/LogoOption.svelte

@@ -16,6 +16,9 @@
 	$: current = variants[i];
 	let interval = null;
 	onMount(() => {
+		if (!hasVariants) {
+			return;
+		}
 		interval = setInterval(() => {
 			if (i === variants.length - 1) {
 				i = 0;
@@ -40,13 +43,17 @@
 	}
 
 	function nextVariant() {
-		if (i >= variants.length) return null;
+		if (i >= variants.length - 1) {
+			return;
+		}
 		console.log('next');
 		i++;
 	}
 
 	function prevVariant() {
-		if (i <= 0) return null;
+		if (i == 0) {
+			return;
+		}
 		console.log('previous');
 		i--;
 	}
@@ -88,7 +95,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div class="option" tabindex="0" class:clicked>
 	<div class="row" on:click={handleClick} on:keypress={handleClick}>
-    <!-- Screenreader compatibility does not make sense in this context. -->
+		<!-- Screenreader compatibility does not make sense in this context. -->
 		<img src={current.gdrive_direct_url} alt="" />
 		{#if !hideDetails}
 			<div class="text">

src/routes/polling/+page.svelte

@@ -114,12 +114,26 @@
 		transitionDirection = -5;
 	}
 
+function preloadImage(url: string) {
+  var img=new Image();
+  img.src=url;
+}
+
 	function nextPage() {
 		if (currentPage >= logoPages || submit) return null;
 		currentPage++;
 
 		min = currentPage * logoAmount;
 		max = min + logoAmount;
+
+    if (currentPage < logoPages) {
+      const nextPage = currentPage + 1;
+      const nextMin = nextPage * logoAmount;
+      const nextMax = nextMin + logoAmount;
+      logos.slice(nextMin, nextMax).forEach(({ variants }) => {
+        variants.forEach(variant => preloadImage(variant.gdrive_direct_url));
+      });
+    }
 		transitionDirection = 5;
 	}