From 9b97f062c6dc6f6d859746bd25528bf05e8544f1 Mon Sep 17 00:00:00 2001
From: Ax333l <main@axelen.xyz>
Date: Sat, 22 Oct 2022 13:06:55 +0200
Subject: [PATCH] feat: loading spinner and re-add hydration

---
 src/lib/components/atoms/Spinner.svelte       | 23 ++++++++++
 src/lib/components/molecules/Footer.svelte    | 17 ++-----
 src/routes/+layout.svelte                     | 31 ++++++++++++-
 .../+layout.ts}                               |  7 ++-
 src/routes/credits/+page.svelte               | 33 +++++---------
 src/routes/patches/+page.svelte               | 44 ++++++++-----------
 .../patches/+page.ts}                         |  6 +--
 7 files changed, 91 insertions(+), 70 deletions(-)
 create mode 100644 src/lib/components/atoms/Spinner.svelte
 rename src/{data/ContributorsStore.ts => routes/+layout.ts} (58%)
 rename src/{data/PatchesStore.ts => routes/patches/+page.ts} (83%)

diff --git a/src/lib/components/atoms/Spinner.svelte b/src/lib/components/atoms/Spinner.svelte
new file mode 100644
index 0000000..31c5e89
--- /dev/null
+++ b/src/lib/components/atoms/Spinner.svelte
@@ -0,0 +1,23 @@
+<div class="spin-container">
+	<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+</div>
+
+<style>
+.spin-container {
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  z-index: 1000;
+}
+.logo-image {
+  animation: rotate 2s linear infinite;
+  width: 75vmin;
+  height: 75vmin;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/lib/components/molecules/Footer.svelte b/src/lib/components/molecules/Footer.svelte
index ed5238f..8a50488 100644
--- a/src/lib/components/molecules/Footer.svelte
+++ b/src/lib/components/molecules/Footer.svelte
@@ -1,16 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+  import type { Contributor } from 'src/data/types';
 
-	import type { ContribData } from '../../../data/ContributorsStore';
-	import { ContributorsStore } from '../../../data/ContributorsStore';
-
-	let data: ContribData;
-
-	onMount(() => {
-		ContributorsStore.subscribe(async (e: Promise<ContribData>) => {
-			data = await e;
-		});
-	});
+	export let repositories: Contributor[];
 </script>
 
 <hr />
@@ -37,8 +28,7 @@
 		</div>
 		<div class="link-column">
 			<h5>Repos</h5>
-			{#if data}
-				{#each data.repositories as { name }}
+				{#each repositories as { name }}
 					<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
 						<div>
 							<h6>
@@ -52,7 +42,6 @@
 						</div>
 					</a>
 				{/each}
-			{/if}
 		</div>
 		<div class="link-column">
 			<!-- to replace -->
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f9bc569..0dc7fc4 100644
--- a/src/routes/+layout.svelte
+++ b/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}
diff --git a/src/data/ContributorsStore.ts b/src/routes/+layout.ts
similarity index 58%
rename from src/data/ContributorsStore.ts
rename to src/routes/+layout.ts
index 0b25902..9d03b7d 100644
--- a/src/data/ContributorsStore.ts
+++ b/src/routes/+layout.ts
@@ -1,12 +1,11 @@
-import { readable } from 'svelte/store';
 import type { Repository } from 'src/data/types';
 
 export type ContribData = { repositories: Repository[] };
 
-const fetchContributors = async (): Promise<ContribData> => {
+export async function load({
+  fetch
+}): Promise<ContribData> {
 	const response = await fetch('https://releases.rvcd.win/contributors');
 	const data = await response.json();
 	return data;
 };
-
-export const ContributorsStore = readable(fetchContributors());
diff --git a/src/routes/credits/+page.svelte b/src/routes/credits/+page.svelte
index 2ae30a9..e71b9a8 100644
--- a/src/routes/credits/+page.svelte
+++ b/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} />
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index e80e033..b891520 100644
--- a/src/routes/patches/+page.svelte
+++ b/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 {
diff --git a/src/data/PatchesStore.ts b/src/routes/patches/+page.ts
similarity index 83%
rename from src/data/PatchesStore.ts
rename to src/routes/patches/+page.ts
index d4e4bb7..52a76ea 100644
--- a/src/data/PatchesStore.ts
+++ b/src/routes/patches/+page.ts
@@ -3,7 +3,9 @@ import type { Patch } from 'src/data/types';
 
 export type PatchesData = { patches: Patch[]; packages: string[] };
 
-const fetchPatches = async (): Promise<PatchesData> => {
+export async function load({
+  fetch
+}): Promise<PatchesData> {
 	const response = await fetch('https://releases.rvcd.win/patches');
 	const patches = await response.json();
 	let packages: string[] = [];
@@ -19,5 +21,3 @@ const fetchPatches = async (): Promise<PatchesData> => {
 	}
 	return { patches, packages };
 };
-
-export const PatchesStore = readable(fetchPatches());