Load and cache popular instances

src/components/instance-select.astro

@@ -7,7 +7,7 @@
 const { prefilledInstance } = Astro.props;
 ---
 
-<datalist id="instance-list"></datalist>
+<datalist id="instances"></datalist>
 <label id="s2f-instanceContainer">
 	Fediverse instance
 	<div class="instance-input">
@@ -17,7 +17,7 @@ const { prefilledInstance } = Astro.props;
 			name="instance"
 			id="instance"
 			placeholder="mastodon.social"
-			list="instance-list"
+			list="instances"
 			required
 			aria-describedby="https-label"
 			value={prefilledInstance}
@@ -67,6 +67,7 @@ const { prefilledInstance } = Astro.props;
 <script>
 	import { getUrlDomain, normalizeURL } from "@scripts/util";
 	import { $savedInstances, save } from "@stores/saved-instances";
+	import { $popularInstances } from "@stores/popular-instances";
 
 	const $form = document.querySelector("#js-s2f-form") as HTMLFormElement;
 	const $instanceContainer = document.querySelector(
@@ -112,5 +113,17 @@ const { prefilledInstance } = Astro.props;
 
 		return true;
 	});
+
+	const instancesElement = document.querySelector("#instances");
+	if (instancesElement != undefined) {
+		$popularInstances.subscribe((instances) => {
+			instancesElement.replaceChildren(
+				...instances.map((domain) => {
+					const option = document.createElement("option");
+					option.value = domain;
+					return option;
+				}),
+			);
+		});
+	}
 </script>
-<script src="../scripts/fetch-instances.ts"></script>

src/stores/popular-instances.ts

@@ -0,0 +1,38 @@
+import { persistentAtom } from "@nanostores/persistent";
+import { onMount, task } from "nanostores";
+
+const UPDATE_INTERVAL_MS = 1000 * 60 * 60 * 24; // one day
+
+export const $popularInstances = persistentAtom<string[]>(
+	"popularInstances",
+	[],
+	{
+		encode: JSON.stringify,
+		decode: JSON.parse,
+	},
+);
+
+export const $lastFetched = persistentAtom<Date>(
+	"popularInstancesLastFetched",
+	new Date(0),
+	{
+		encode: (date) => date.toISOString(),
+		decode: (encoded) => new Date(encoded),
+	},
+);
+
+onMount($popularInstances, () => {
+	task(async () => {
+		if (Date.now() - $lastFetched.get().getTime() < UPDATE_INTERVAL_MS) {
+			return;
+		}
+
+		try {
+			const response = await fetch("/api/instances");
+			$popularInstances.set(await response.json());
+			$lastFetched.set(new Date());
+		} catch (error) {
+			console.error("Could not fetch popular instances:", error);
+		}
+	});
+});