From e1c96dc4d1545a2124d9986c95a2767dff18dc4e Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Wed, 4 Sep 2024 20:24:24 +0200
Subject: [PATCH] feat: Loading Spinners

---
 apps/frontend/src/ui/components/Spinner.tsx   | 36 +++++++++
 .../src/ui/pages/browser/BrowserPackage.tsx   | 73 +++++++++++--------
 2 files changed, 77 insertions(+), 32 deletions(-)
 create mode 100644 apps/frontend/src/ui/components/Spinner.tsx

diff --git a/apps/frontend/src/ui/components/Spinner.tsx b/apps/frontend/src/ui/components/Spinner.tsx
new file mode 100644
index 00000000..c28be54a
--- /dev/null
+++ b/apps/frontend/src/ui/components/Spinner.tsx
@@ -0,0 +1,36 @@
+import { type JSX, type ParentProps, Suspense, splitProps } from 'solid-js';
+
+export interface SpinnerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+
+};
+
+// https://cssloaders.github.io/
+function Spinner(props: SpinnerProps) {
+	const [split, rest] = splitProps(props, ['class']);
+
+	return (
+		<div
+			class={`h-16 w-16 animate-spin animate-duration-1000! inline-block border-t-2 border-t-fg-primary border-r-2 border-r-transparent rounded-1/2 border-solid ${split.class || ''}`}
+			{...rest}
+		/>
+	);
+}
+
+export default Spinner;
+
+export type SuspenseSpinnerProps = ParentProps & SpinnerProps;
+
+Spinner.Suspense = function SuspenseSpinner(props: SuspenseSpinnerProps) {
+	const [split, rest] = splitProps(props, ['children']);
+
+	return (
+		<Suspense fallback={(
+			<div class="h-full w-full flex items-center justify-center">
+				<Spinner {...rest} />
+			</div>
+		)}
+		>
+			{split.children}
+		</Suspense>
+	);
+};
diff --git a/apps/frontend/src/ui/pages/browser/BrowserPackage.tsx b/apps/frontend/src/ui/pages/browser/BrowserPackage.tsx
index 794e2040..87cc486a 100644
--- a/apps/frontend/src/ui/pages/browser/BrowserPackage.tsx
+++ b/apps/frontend/src/ui/pages/browser/BrowserPackage.tsx
@@ -15,6 +15,8 @@ import SteveHead from '~assets/images/steve.png';
 import usePromptOpener from '~ui/hooks/usePromptOpener';
 import Link from '~ui/components/base/Link';
 import usePagination from '~ui/hooks/usePagination';
+import Spinner from '~ui/components/Spinner';
+import AnimatedRoutes from '~ui/components/AnimatedRoutes';
 
 interface BrowserModParams extends Params {
 	id: string;
@@ -74,17 +76,16 @@ function BrowserPackage(props: ParentProps) {
 	];
 
 	return (
-		<>
-			<div class="flex flex-row items-start gap-x-4 pb-8">
+		<Spinner.Suspense>
+			<div class="h-full flex flex-1 flex-row items-start gap-x-4 pb-8">
 				<Show
 					when={pkg() !== undefined && authors() !== undefined}
-					fallback={<div>Loading...</div>}
 					children={(
 						<>
 							<BrowserSidebar package={pkg()!} authors={authors()!} />
 
-							<div class="flex flex-1 flex-col items-start justify-between gap-y-4">
-								<div class="flex flex-row gap-x-1 rounded-lg bg-component-bg p-1">
+							<div class="min-h-full flex flex-1 flex-col items-start gap-y-4">
+								<div class="flex flex-none flex-row gap-x-1 rounded-lg bg-component-bg p-1">
 									<For each={links}>
 										{link => (
 											<NavLink href={link[1] || ''}>
@@ -94,17 +95,23 @@ function BrowserPackage(props: ParentProps) {
 									</For>
 								</div>
 
-								<BrowserPackageProvider pkg={pkg()!}>
-									{/* <AnimatedRoutes> */}
-									{props.children}
-									{/* </AnimatedRoutes> */}
-								</BrowserPackageProvider>
+								<div class="h-full min-h-full w-full flex-1">
+									<BrowserPackageProvider pkg={pkg()!}>
+										<Spinner.Suspense>
+											<div class="h-full max-w-full min-h-full w-full overflow-hidden">
+												<AnimatedRoutes>
+													{props.children}
+												</AnimatedRoutes>
+											</div>
+										</Spinner.Suspense>
+									</BrowserPackageProvider>
+								</div>
 							</div>
 						</>
 					)}
 				/>
 			</div>
-		</>
+		</Spinner.Suspense>
 	);
 }
 
@@ -122,7 +129,7 @@ function BrowserSidebar(props: { package: ManagedPackage; authors: ManagedUser[]
 	const promptOpen = usePromptOpener();
 
 	return (
-		<div class="sticky top-0 max-w-60 min-w-54 flex flex-col gap-y-4">
+		<div class="sticky top-0 z-1 max-w-60 min-w-54 flex flex-col gap-y-4">
 			<div class="min-h-72 flex flex-col overflow-hidden rounded-lg bg-component-bg">
 				<div class="relative h-28 flex items-center justify-center overflow-hidden">
 					<img class="absolute z-0 max-w-none w-7/6 filter-blur-xl" src={props.package.icon_url || ''} alt={`Icon for ${props.package.title}`} />
@@ -389,11 +396,11 @@ function BrowserPackageVersions() {
 
 	createEffect(on(() => page(), () => {
 		refetch();
-		container.parentElement?.scrollIntoView({ behavior: 'smooth' });
+		container.parentElement?.parentElement?.scrollIntoView({ behavior: 'smooth' });
 	}));
 
 	return (
-		<div ref={container} class="w-full flex flex-1 flex-col gap-y-1">
+		<div ref={container} class="h-full w-full flex flex-1 flex-col gap-y-1">
 			<div class="flex flex-row justify-between">
 				<h1>
 					Versions - Page
@@ -404,26 +411,28 @@ function BrowserPackageVersions() {
 				<Navigation />
 			</div>
 
-			<table class="w-full border-separate border-spacing-x-none border-spacing-y-1">
-				<thead>
-					<tr class="bg-page-elevated [&>th]:py-2 [&>th]:text-left">
-						<th class="w-16 rounded-l-lg" />
+			<Spinner.Suspense>
+				<table class="w-full border-separate border-spacing-x-none border-spacing-y-1">
+					<thead>
+						<tr class="bg-page-elevated [&>th]:py-2 [&>th]:text-left">
+							<th class="w-16 rounded-l-lg" />
 
-						<th>Name</th>
-						<th>Game Version</th>
-						<th>Loader</th>
-						<th>Created</th>
-						<th>Downloads</th>
-						<th class="rounded-r-lg" />
-					</tr>
-				</thead>
+							<th>Name</th>
+							<th>Game Version</th>
+							<th>Loader</th>
+							<th>Created</th>
+							<th>Downloads</th>
+							<th class="rounded-r-lg" />
+						</tr>
+					</thead>
 
-				<tbody>
-					<For each={versions()?.reverse()}>
-						{version => <VersionRow {...version} />}
-					</For>
-				</tbody>
-			</table>
+					<tbody>
+						<For each={versions()?.reverse()}>
+							{version => <VersionRow {...version} />}
+						</For>
+					</tbody>
+				</table>
+			</Spinner.Suspense>
 
 			<Navigation />