Page Loading Indicator

src/lib/PodcastHero.svelte

@@ -36,7 +36,7 @@
 		</p>
 		<p class="brought-by">
 			Brought to you by <a
-				href="https://sentry.io/signup/?original_referrer=https://syntax.fm/"
+				href="https://sentry.io/welcome/?utm_medium=site&utm_source=syntax&utm_campaign=syntax-sentry-evergreen&utm_content=homepage"
 				target="_blank"
 				title="Sentry"
 				class="naked"

src/lib/ProducedBySentry.svelte

@@ -19,8 +19,9 @@
 		Nearly 4M developers and 90K organizations rely on Sentry to see what actually matters, solve
 		what's urgent faster, and learn continuously about their code.
 	</p>
-	<a href="https://sentry.io/signup/?original_referrer=https://syntax.fm/" class="button ghost"
-		>Try Sentry for Free</a
+	<a
+		href="https://sentry.io/welcome/?utm_medium=site&utm_source=syntax&utm_campaign=syntax-sentry-evergreen&utm_content=footer"
+		class="button ghost">Try Sentry for Free</a
 	>
 </div>
 

src/lib/page_loading_indicator.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { navigating } from '$app/stores';
+	import { onNavigate } from '$app/navigation';
+	let visible = false;
+	let progress = 0;
+	let load_durations: number[] = [];
+	$: average_load = load_durations.reduce((a, b) => a + b, 0) / load_durations.length;
+	const increment = 1;
+	onNavigate((navigation) => {
+		const typical_load_time = average_load || 200; //ms
+		const frequency = typical_load_time / 100;
+		let start = performance.now();
+		// Start the progress bar
+		visible = true;
+		progress = 0;
+		const interval = setInterval(() => {
+			// Increment the progress bar
+			progress += increment;
+		}, frequency);
+		// Resolve the promise when the page is done loading
+		$navigating?.complete.then(() => {
+			progress = 100; // Fill out the progress bar
+			clearInterval(interval);
+			// after 100 ms hide the progress bar
+			setTimeout(() => {
+				visible = false;
+			}, 500);
+			// Log how long that one took
+			const end = performance.now();
+			const duration = end - start;
+			load_durations = [...load_durations, duration];
+		});
+	});
+</script>
+
+<div class="progress" class:visible style:--progress={progress}>
+	<div class="track"></div>
+</div>
+
+<style lang="postcss">
+	.progress {
+		width: 100%;
+		position: fixed;
+		z-index: 2;
+		top: 0;
+		transform: translateY(-100%);
+		transition: transform 0.5s;
+		&.visible {
+			transition: none;
+			transform: translateY(0);
+		}
+	}
+	.track {
+		height: 4px;
+		width: calc(var(--progress, 0) * 1%);
+		background: var(--primary);
+		border-radius: 0 4px 4px 0;
+		transition: width 0.05s;
+		.progress.visible & {
+			transition: none;
+		}
+	}
+</style>

src/routes/(site)/+layout.svelte

@@ -15,6 +15,7 @@
 	import { debug_mode } from '$state/debug';
 	import ThemeMaker from '../../params/ThemeMaker.svelte';
 	import { page } from '$app/stores';
+	import PageLoadingIndicator from '$lib/page_loading_indicator.svelte';
 	export let data;
 	$: ({ user, user_theme } = data);
 
@@ -34,6 +35,7 @@
 
 <Meta />
 
+<PageLoadingIndicator />
 <div class={'theme-' + ($theme || user_theme) + ' theme-wrapper'} class:debug={$debug_mode}>
 	{#if $page.url.pathname !== '/'}
 		<Header />

src/routes/(site)/Footer.svelte

@@ -13,7 +13,10 @@
 				<a href="/rss">RSS Feed</a>
 				<a href="/about">About</a>
 				<a href="/pages/privacy">Privacy Policy</a>
-				<a href="https://sentry.io">Sentry.io</a>
+				<a
+					href="https://sentry.io/welcome/?utm_medium=site&utm_source=syntax&utm_campaign=syntax-sentry-evergreen&utm_content=footer"
+					>Sentry.io</a
+				>
 			</div>
 			<div class="links-col">
 				<a href="/system/colors">Colors</a>

src/utilities/slug.ts

@@ -1,4 +1,3 @@
 export default function get_show_path(show: { number: number; slug: string }) {
-	console.log(show);
 	return `/shows/${show.number}/${show.slug}`;
 }