From db379fd252209cd1643d7e8f4369660054c4e3c8 Mon Sep 17 00:00:00 2001
From: Aleksi Lassila <aleksi.emil.lassila@gmail.com>
Date: Sat, 6 Apr 2024 01:37:34 +0300
Subject: [PATCH] fix: Add delay to tv hero carousel initial background load

---
 .../HeroCarousel/HeroBackground.svelte          | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/HeroCarousel/HeroBackground.svelte b/src/lib/components/HeroCarousel/HeroBackground.svelte
index 4b1f177..e383845 100644
--- a/src/lib/components/HeroCarousel/HeroBackground.svelte
+++ b/src/lib/components/HeroCarousel/HeroBackground.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { PLATFORM_TV } from '../../constants';
-	import { fade } from 'svelte/transition';
-	import { cubicIn, cubicOut } from 'svelte/easing';
 	import classNames from 'classnames';
 	import { onDestroy } from 'svelte';
 
 	export let urls: Promise<string[]>;
 	export let index: number;
-	let visibleIndex = -1;
+	let visibleIndex = -2;
 	let visibleIndexTimeout: ReturnType<typeof setTimeout>;
 
 	let htmlElements: HTMLDivElement[] = [];
@@ -16,15 +14,20 @@
 			htmlElements[index]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
 		}
 	}
-	$: {
+
+	function updateVisibleIndex(index: number) {
 		if (visibleIndexTimeout) {
 			clearTimeout(visibleIndexTimeout);
 		}
+		visibleIndexTimeout = setTimeout(
+			() => {
+				visibleIndex = index;
+			},
+			visibleIndex === -2 ? 1000 : 500
+		);
 		visibleIndex = -1;
-		visibleIndexTimeout = setTimeout(() => {
-			visibleIndex = index;
-		}, 500);
 	}
+	$: updateVisibleIndex(index);
 
 	onDestroy(() => visibleIndexTimeout && clearTimeout(visibleIndexTimeout));
 </script>