Update feature block on stats page

src/routes/more/statistics/+page.svelte

@@ -4,9 +4,12 @@
     import Loading from "$lib/navigation/loading.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
-    import { featureDetect } from "$lib/scripts/featureDetect";
+    import { featureDetect, type FeatureDetectionResult } from "$lib/scripts/featureDetect";
     import { getCurrentLocation } from "$lib/scripts/getLocation";
+    import { onMount } from "svelte";
     const title = "Statistics";
+    let features: FeatureDetectionResult | null = null;
+    let error: Error | null = null;
 
     async function getData() {
         const url = `${getApiUrl()}/misc/server/stats`;
@@ -14,6 +17,18 @@
         return await res.json();
     }
 
+    async function loadFeatures() {
+        try {
+            features = await featureDetect();
+        } catch (e) {
+            error = e;
+        }
+    }
+
+    onMount(() => {
+        loadFeatures();
+    });
+
     function U2L(input: Date | number): string {
         if (input instanceof Date) {
             return input.toLocaleString();
@@ -67,9 +82,9 @@
 {/await}
 
 <h2>Browser Features</h2>
-{#await featureDetect()}
-    Checking browser features
-{:then features}
+{#if features === null && error === null}
+    Checking browser features...
+{:else if features !== null}
     <h3>Critical Features</h3>
     {#if !features.critical}
         <p>
@@ -129,20 +144,9 @@
             </span>
         </li>
     </ul>
-{:catch error}
+{:else if error !== null}
     Failed to detect browser features: {error.message}
-{/await}
-
-<h3>Detected Location</h3>
-{#await getCurrentLocation()}
-    Fetching Location...
-{:then location}
-    {location.latitude}, {location.longitude}
-    <br />
-    <a target="_blank" rel="noopener noreferrer" href="https://www.openstreetmap.org/?mlat={location.latitude}&mlon={location.longitude}&zoom=12">View on Map</a>
-{:catch error}
-    {error.message}
-{/await}
+{/if}
 
 <Nav />