refactored HEAD fetch

web/App.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import getComponentForShare from "./contentType";
+
+	const regex = /filename="(.*)"/gm;
 	const slug = window.location.pathname.split("/").pop();
 
 	let component = null;
 	let contentType: string;
 	let filename: string;
 
-	onMount(async () => {
+	async function getFileHeadAndComponent() {
-		const regex = /filename="(.*)"/gm;
 		const res = await fetch(`/s/${slug}`,{method:"HEAD"});
-
 		contentType = res.headers.get("Content-Type");
-		
+
 		let match;
 		while ((match = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
 			// This is necessary to avoid infinite loops with zero-width matches
@@ -21,26 +21,20 @@
 			}
 			filename = match[1];
 		}
-
+		
-		document.title = filename;
+		return getComponentForShare(contentType,filename);
-
+	}
-		component = getComponentForShare(contentType,filename);
-	});
 </script>
 
 <div class="dl">
 	<a href="/s/{slug}">Download</a>
 </div>
 <main>
-	{#if component === null}
+	{#await getFileHeadAndComponent()}
 		Loading data...
-	{:else}
+	{:then v } 
-		{#await component}
+		<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
-			Loading data...
+	{/await}
-		{:then v } 
-			<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
-		{/await}
-	{/if}
 </main>
 
 <style>