feat: loading spinner and re-add hydration

src/routes/+layout.svelte

@@ -1,6 +1,31 @@
 <script lang="ts">
 	import NavHost from "$lib/components/molecules/NavHost.svelte";
 	import '../app.css';
+
+  import { navigating } from '$app/stores'
+  import { onMount } from "svelte";
+  import Spinner from '$lib/components/atoms/Spinner.svelte';
+
+  let timeout = 0;
+
+  let is_navigating = false;
+
+  onMount(() => {
+    // Show spinner if we are still waiting for navigation after 150ms
+    navigating.subscribe(nav => {
+      // cancel current timer, if any
+      clearTimeout(timeout);
+      // null after navigation finishes
+      if (nav != null) {
+        timeout = setTimeout(() => {
+          is_navigating = true;
+        }, 150);
+      } else {
+        // navigation finished
+        is_navigating = false;
+      }
+    });
+  });
 </script>
 
 <svelte:head>
@@ -17,4 +42,8 @@
 </svelte:head>
 
 <NavHost/>
-<slot />
+{#if is_navigating}
+  <Spinner />
+{:else}
+  <slot />
+{/if}

src/routes/+layout.ts

@@ -0,0 +1,11 @@
+import type { Repository } from 'src/data/types';
+
+export type ContribData = { repositories: Repository[] };
+
+export async function load({
+  fetch
+}): Promise<ContribData> {
+	const response = await fetch('https://releases.rvcd.win/contributors');
+	const data = await response.json();
+	return data;
+};

src/routes/credits/+page.svelte

@@ -1,33 +1,22 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	import type { ContribData } from '../../data/ContributorsStore';
-	import { ContributorsStore } from '../../data/ContributorsStore';
-	
+	import type { ContribData } from '../+layout';
+
 	import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-    import Footer from '$lib/components/molecules/Footer.svelte';
-	
+  import Footer from '$lib/components/molecules/Footer.svelte';
 
-	let data: ContribData;
-
-	onMount(() => {
-		ContributorsStore.subscribe(async (e: Promise<ContribData>) => {
-			data = await e;
-		});
-	});
-	
+  // From the layout hydration. See +layout.ts
+	export let data: ContribData;
 </script>
 
 <div class="wrapper contrib-grid">
-	{#if data}
-		{#each data.repositories as { contributors, name }}
-			<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-				<ContributorHost contribs={contributors} repo={name} />
-			</div>
-		{/each}
-	{/if}
+	{#each data.repositories as { contributors, name }}
+		<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+			<ContributorHost contribs={contributors} repo={name} />
+		</div>
+	{/each}
 </div>
 
 <style>
@@ -39,4 +28,4 @@
 	}
 </style>
 
-<Footer />
+<Footer {...data} />

src/routes/patches/+page.svelte

@@ -1,26 +1,22 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+  import type { PatchesData } from './+page';
+  import type { ContribData } from '../+layout';
+
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
 	import type { CompatiblePackage, Patch } from 'src/data/types';
-	import type { PatchesData } from '../../data/PatchesStore';
-	import { PatchesStore } from '../../data/PatchesStore';
 
 	import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
 	import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
 	import PatchCell from '$lib/components/atoms/PatchCell.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-	let patches: Patch[];
-	let packages: string[];
-	let current: boolean = false;
+  export let data: PatchesData & ContribData;
 
-	onMount(() => {
-		PatchesStore.subscribe(async (e: Promise<PatchesData>) => {
-			({ patches, packages } = await e);
-		});
-	});
+  let { patches, packages } = data;
+
+	let current: boolean = false;
 
 	function search(findTerm: string | boolean, array: CompatiblePackage[]) {
 		for (let i = 0; i < array.length; i++) {
@@ -41,27 +37,23 @@
 <section>
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 		<TreeMenu title="packages">
-			{#if packages}
-				{#each packages as pkg}
-					<TreeMenuButton bind:current name={pkg} />
-				{/each}
-			{/if}
+			{#each packages as pkg}
+				<TreeMenuButton bind:current name={pkg} />
+			{/each}
 		</TreeMenu>
 	</aside>
 
 	<div class="patches-container">
-		{#if patches}
-			{#each patches as patch, i}
-				{#if search(current, patch.compatiblePackages) || !current}
-					<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
-						<PatchCell bind:current {patch} />
-					</div>
-				{/if}
-			{/each}
-		{/if}
+		{#each patches as patch, i}
+			{#if search(current, patch.compatiblePackages) || !current}
+				<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: -(300 * 0.85 ** i) + 300 }}>
+					<PatchCell bind:current {patch} />
+				</div>
+			{/if}
+		{/each}
 	</div>
 </section>
-<Footer />
+<Footer repositories={data.repositories} />
 
 <style>
 	section {

src/routes/patches/+page.ts

@@ -0,0 +1,23 @@
+import { readable } from 'svelte/store';
+import type { Patch } from 'src/data/types';
+
+export type PatchesData = { patches: Patch[]; packages: string[] };
+
+export async function load({
+  fetch
+}): Promise<PatchesData> {
+	const response = await fetch('https://releases.rvcd.win/patches');
+	const patches = await response.json();
+	let packages: string[] = [];
+
+	// gets packages
+	for (let i = 0; i < patches.length; i++) {
+		patches[i].compatiblePackages.forEach((pkg: Patch) => {
+			let index = packages.findIndex((x) => x == pkg.name);
+			if (index === -1) {
+				packages.push(pkg.name);
+			}
+		});
+	}
+	return { patches, packages };
+};