refactor: ♻️ handle script loading

Author: spences10

src/lib/components/toot.svelte

@@ -1,29 +1,54 @@
 <script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
 	export let instance: string = ''
 	export let username: string = ''
 	export let tootId: string = ''
 
+	let mastodon_embed_script: HTMLScriptElement | null = null
+
+	const load_mastodon_embed_script = () => {
+		if (mastodon_embed_script) return
+		mastodon_embed_script = document.createElement('script')
+		mastodon_embed_script.src = `https://${instance}/embed.js`
+		mastodon_embed_script.async = true
+		document.head.appendChild(mastodon_embed_script)
+	}
+
+	const remove_mastodon_embed_script = () => {
+		if (mastodon_embed_script) {
+			document.head.removeChild(mastodon_embed_script)
+			mastodon_embed_script = null
+		}
+	}
+
+	onMount(load_mastodon_embed_script)
+	onDestroy(remove_mastodon_embed_script)
+
 	$: trimmedUsername = username.trim()
 	$: atUsername = trimmedUsername.startsWith('@')
 		? trimmedUsername
 		: `@${trimmedUsername}`
 </script>
 
-<svelte:head>
-	<script
-		async
-		src="https://{instance}/embed.js"
-		charset="utf-8"
-	></script>
-</svelte:head>
-
-<div class="flex justify-center mb-12">
+<div>
 	<iframe
 		title=""
-		src="https://{instance}/{atUsername}/{tootId}/embed"
+		src={`https://${instance}/${atUsername}/${tootId}/embed`}
 		class="mastodon-embed"
-		style="max-width: 100%; border: 0"
 		width="400"
 		allowfullscreen
 	/>
 </div>
+
+<style>
+	div {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 12px;
+	}
+
+	iframe {
+		max-width: 100%;
+		border: 0;
+	}
+</style>

src/lib/components/tweet.svelte

@@ -1,19 +1,51 @@
 <script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
 	export let tweetLink: string = ''
-</script>
 
-<svelte:head>
-	<script
-		async
-		src="https://platform.twitter.com/widgets.js"
-		charset="utf-8"
-	></script>
-</svelte:head>
+	let twitter_widgets_script: HTMLScriptElement | null = null
+
+	const load_twitter_widgets_script = () => {
+		if (twitter_widgets_script) return
+		twitter_widgets_script = document.createElement('script')
+		twitter_widgets_script.src =
+			'https://platform.twitter.com/widgets.js'
+		twitter_widgets_script.async = true
+		document.head.appendChild(twitter_widgets_script)
+	}
+
+	const remove_twitter_widget_script = () => {
+		if (twitter_widgets_script) {
+			document.head.removeChild(twitter_widgets_script)
+			twitter_widgets_script = null
+		}
+	}
+
+	onMount(load_twitter_widgets_script)
+	onDestroy(remove_twitter_widget_script)
+</script>
 
-<div class="flex justify-center mb-12">
+<div class="tweet-wrapper">
 	<blockquote class="twitter-tweet">
-		<a class="twitter-tweet" href={`https://twitter.com/${tweetLink}`}
-			>Loading Tweet...</a
-		>
+		<a href={`https://twitter.com/${tweetLink}`}>Loading Tweet...</a>
 	</blockquote>
 </div>
+
+<style>
+	.tweet-wrapper {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 12px;
+	}
+
+	.twitter-tweet {
+		display: block;
+		margin: 0;
+		padding: 0;
+	}
+
+	.twitter-tweet a {
+		color: #1da1f2;
+		font-weight: bold;
+		text-decoration: none;
+	}
+</style>