Move instance fetching to client

src/components/instance-select.astro

@@ -4,21 +4,10 @@
  * Licensed under AGPL v3 or later
  */
 
-let instances;
-try {
-	const response = await fetch(new URL("/api/instances", Astro.url));
-	instances = await response.json();
-} catch (error) {
-	console.error("Couln't fetch instances:", error);
-	instances = [];
-}
-
 const { prefilledInstance } = Astro.props;
 ---
 
-<datalist id="instanceDatalist">
+<datalist id="instance-list"></datalist>
-	{instances.map((instance: string) => <option value={instance} />)}
-</datalist>
 <label id="s2f-instanceContainer">
 	Fediverse instance
 	<div class="instance-input">
@@ -28,7 +17,7 @@ const { prefilledInstance } = Astro.props;
 			name="instance"
 			id="instance"
 			placeholder="mastodon.social"
-			list="instanceDatalist"
+			list="instance-list"
 			required
 			aria-describedby="https-label"
 			value={prefilledInstance}
@@ -144,3 +133,4 @@ const { prefilledInstance } = Astro.props;
 		return true;
 	});
 </script>
+<script src="../fetch-instances.ts" async defer></script>

src/fetch-instances.ts

@@ -0,0 +1,18 @@
+const instanceList = document.querySelector(
+	"#instance-list",
+) as HTMLDataListElement;
+
+/** @type {Array<string>} */
+let instances = [];
+try {
+	const response = await fetch("/api/instances");
+	instances = await response.json();
+} catch (error) {
+	console.error("Could not fetch instances:", error);
+}
+
+for (const instaneDomain of instances) {
+	const $option = document.createElement("option");
+	$option.value = instaneDomain;
+	instanceList.append($option);
+}