loading on stats

prisma/schema.prisma

@@ -16,7 +16,7 @@ model User {
   lastSeen    DateTime      @default(now())
   settings    UserSettings?
   // STORED AS MEGABYTES !!
-  maxUpload Int           @default(100)
+  maxUploadMB Int           @default(100)
   uploads     Upload[]
   sessions    Session[]
 }
@@ -25,6 +25,7 @@ model Session {
   id     String @id @unique
   user   User   @relation(fields: [userId], references: [id])
   userId Int
+
   authorized    Boolean
   createdAt     DateTime @default(now())
   expiresAt     DateTime
@@ -46,7 +47,6 @@ model UserSettings {
 
 model Upload {
   id         String @id
-
   uploader   User   @relation(fields: [uploaderId], references: [id])
   uploaderId Int
 

src/routes/(app)/dashboard/+page.js

@@ -1,7 +1,10 @@
 /** @type {import("@sveltejs/kit").Load } */
-export async function load({ fetch }) {
-	const response = await fetch('/api/statistics');
-	const statistics = await response.json();
+export function load({ fetch }) {
+	const statistics = fetch('/api/statistics').then((response) => response.json());
 
-	return { statistics };
+	return {
+		streamed: {
+			statistics
+		}
+	};
 }

src/routes/(app)/dashboard/+page.svelte

@@ -6,6 +6,7 @@
 
 	import Button from '$lib/components/Inputs/Button.svelte';
 	import ButtonText from '$lib/components/Inputs/ButtonText.svelte';
+	import { fade } from 'svelte/transition';
 
 	export let data;
 
@@ -30,18 +31,22 @@
 		<div class="bg-crust w-full mx-auto mb-auto p-2 rounded-lg shadow-lg">
 			<table class="table-auto w-full mx-auto text-sm">
 				<tbody>
-					<tr>
+					{#await data?.streamed?.statistics}
+						<div class="h-[66px]"></div>
+					{:then statistics}
+						<tr in:fade={{ delay: 60 * 1 }}>
 							<td class="font-bold">Registered Users</td>
-						<td class="text-right">{data?.statistics?.users}</td>
+							<td class="text-right">{statistics?.users}</td>
 						</tr>
-					<tr>
+						<tr in:fade={{ delay: 60 * 2 }}>
 							<td class="font-bold">Files Hosted</td>
-						<td class="text-right">{data?.statistics?.files}</td>
+							<td class="text-right">{statistics?.files}</td>
 						</tr>
-					<tr>
+						<tr in:fade={{ delay: 60 * 3 }}>
 							<td class="font-bold">File Storage</td>
-						<td class="text-right">{data?.statistics?.storage}</td>
+							<td class="text-right">{statistics?.storage}</td>
 						</tr>
+					{/await}
 				</tbody>
 			</table>
 		</div>