refactored HEAD fetch

web/App.svelte

@@ -1,16 +1,16 @@
 <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;
@@ -22,25 +22,19 @@
 			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}
-		{#await component}
 		Loading data...
 	{:then v } 
 		<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
 	{/await}
-	{/if}
 </main>
 
 <style>