feat(tracker): add loading skeleton in the tracker

Author: WarningImHack3r

src/routes/tracker/[org]/[repo]/+layout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { onNavigate } from "$app/navigation";
-	import { page } from "$app/state";
-	import { Menu } from "@lucide/svelte";
+	import { navigating, page } from "$app/state";
+	import { LoaderCircle, Menu } from "@lucide/svelte";
 	import { uniqueRepos } from "$lib/repositories";
 	import { Button } from "$lib/components/ui/button";
 	import * as Sheet from "$lib/components/ui/sheet";
+	import { Skeleton } from "$lib/components/ui/skeleton";
 	import RepoSidePanel from "./RepoSidePanel.svelte";
 
 	let { children } = $props();
@@ -15,6 +16,18 @@
 	});
 
 	let open = $state(false);
+
+	/**
+	 * The classic function that generates a random integer
+	 * between the specified minimum and maximum values, inclusive.
+	 *
+	 * @param min - The minimum value in the range.
+	 * @param max - The maximum value in the range.
+	 * @returns A random integer within the range [min, max].
+	 */
+	function random(min: number, max: number) {
+		return Math.floor(Math.random() * (max - min + 1)) + min;
+	}
 </script>
 
 {#snippet repoList()}
@@ -39,9 +52,32 @@
 {/snippet}
 
 <div class="relative flex gap-8">
-	<div class="min-w-0">
-		{@render children()}
-	</div>
+	{#if navigating.to}
+		<div class="flex w-full flex-col">
+			<div class="mt-8 space-y-2">
+				<Skeleton class="h-16 w-72" />
+				<Skeleton class="h-8 w-56" />
+			</div>
+			<div class="relative w-full space-y-2">
+				<p
+					class="absolute top-44 left-1/2 z-10 inline-flex -translate-x-1/2 -translate-y-1/2 justify-center text-xl"
+				>
+					<LoaderCircle class="mr-2 h-lh shrink-0 animate-spin" />
+					Gathering all the data, this may take some time...
+				</p>
+				{#each Array(3), i (i)}
+					<Skeleton class="mt-16 mb-4 h-12 w-52" />
+					{#each Array(random(1, 6)), j (j)}
+						<Skeleton class="h-24 w-full" />
+					{/each}
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<div class="min-w-0">
+			{@render children()}
+		</div>
+	{/if}
 
 	<Sheet.Root bind:open>
 		<Sheet.Trigger>

src/routes/tracker/[org]/[repo]/+page.server.ts

@@ -27,6 +27,7 @@ export async function load({ params }) {
 		githubCache.getAllDiscussions(params.org, params.repo)
 	]);
 	return {
+		params,
 		prs: unfilteredPRs
 			.filter(({ user, body, updated_at }) => {
 				if (new Date(updated_at).getFullYear() < now.getFullYear() - 1) return false;

src/routes/tracker/[org]/[repo]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { page } from "$app/state";
 	import { Image, Info } from "@lucide/svelte";
 	import { Transparent } from "svelte-exmarkdown";
 	import { buttonVariants } from "$lib/components/ui/button";
@@ -146,13 +145,13 @@
 <div class="my-8">
 	<h1 class="text-3xl font-semibold text-shadow-sm md:text-5xl">
 		<a
-			href="https://github.com/{page.params.org}/{page.params.repo}"
+			href="https://github.com/{data.params.org}/{data.params.repo}"
 			target="_blank"
 			class="group *:underline-offset-4 after:ml-0.5 after:inline-block after:-translate-x-2 after:font-sans after:text-2xl after:opacity-0 after:transition after:content-['↗'] hover:after:translate-x-0 hover:after:opacity-100"
 		>
-			<span class="text-primary group-hover:underline">{page.params.org}</span><span
+			<span class="text-primary group-hover:underline">{data.params.org}</span><span
 				class="text-foreground no-underline">/</span
-			><wbr /><span class="text-primary group-hover:underline">{page.params.repo}</span>
+			><wbr /><span class="text-primary group-hover:underline">{data.params.repo}</span>
 		</a>
 	</h1>
 	<div class="flex items-center gap-2">