scroll into view

Makefile

@@ -5,7 +5,7 @@ build-dev:
 run-front-dev:
 	cd frontend && npm install && PUBLIC_DEV_MODE=DEV npm run dev
 run-dev:
-	FLASK_ENV=development python app.py
+	rm -rf .data/ && FLASK_ENV=development python app.py
 run-prod:
 	python app.py
 build-all: run-prod

frontend/src/routes/+page.svelte

@@ -14,14 +14,23 @@
 
 	let promptsData: ColorsPrompt[];
 	let prompt: string;
+	let promptInput: HTMLElement;
 
 	onMount(() => {
-		fetch(apiUrl + '/data')
-			.then((d) => d.json())
-			.then((palettes) => {
-				promptsData = sortData(palettes);
-			});
+		fetchData();
+		const interval = window.setInterval(fetchData, 5000);
+		return () => {
+			clearInterval(interval);
+		};
 	});
+
+	async function fetchData() {
+		const palettes = await fetch(apiUrl + '/data').then((d) => d.json());
+		if (!promptsData || palettes.length > promptsData.length) {
+			promptsData = sortData(palettes);
+		}
+	}
+
 	$: promptsTotal = promptsData?.length || 0;
 
 	function sortData(_promptData: ColorsPrompt[]) {
@@ -144,10 +153,7 @@
 	}
 	function remix(e: CustomEvent) {
 		prompt = e.detail.prompt;
-		window.scrollTo({
-			top: 0,
-			behavior: 'smooth'
-		});
+		promptInput.scrollIntoView({ behavior: 'smooth' });
 	}
 </script>
 
@@ -166,9 +172,10 @@
 		</a>,
 		<a class="link" href="https://drib.net/homage"> dribnet </a>
 	</p>
-	<div class="relative sticky top-0 z-50 bg-white dark:bg-black py-3">
+	<div class="relative top-0 z-50 bg-white dark:bg-black py-3">
 		<form class="grid grid-cols-6" on:submit|preventDefault={() => generatePalette(prompt)}>
 			<input
+				bind:this={promptInput}
 				class="input"
 				placeholder="A photo of a beautiful sunset in San Francisco"
 				title="Input prompt to generate image and obtain palette"