Adding explicit types to load and actions, adding the page indicator from Syntax.fm, and hex for that color.

src/app.d.ts

@@ -2,7 +2,7 @@
 // for information about these interfaces
 // and what to do when importing types
 
-import type { PrismaClient, User } from '@prisma/client';
+import type { User } from '@prisma/client';
 
 type User = Omit<User, 'created_at' | 'updated_at'>;
 
@@ -14,7 +14,6 @@ declare global {
 		}
 		interface Locals {
 			auth: import('lucia').AuthRequest;
-			prisma: PrismaClient;
 			user: Lucia.UserAttributes;
 			startTimer: number;
 			error: string;
@@ -32,6 +31,11 @@ declare global {
 			errorId?: string;
 		}
 	}
+
+	interface Document {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		startViewTransition: (callback: any) => void; // Add your custom property/method here
+	}
 }
 
 // interface PageData {}

src/hooks.server.ts

@@ -16,12 +16,8 @@ export const authentication: Handle = async function ({ event, resolve }) {
 
 	event.locals.auth = auth.handleRequest(event);
 	if (event?.locals?.auth) {
-		console.log('auth not empty');
-		console.log('auth', event.locals.auth);
 		try {
 			const session = await event.locals.auth.validate();
-			console.log('user', session?.user);
-			console.log('session', JSON.stringify(session, null, 2));
 			event.locals.user = session?.user;
 			// if (event.route.id?.startsWith('/(protected)')) {
 			// if (!user) throw redirect(302, '/sign-in');
@@ -36,22 +32,5 @@ export const authentication: Handle = async function ({ event, resolve }) {
 	return await resolve(event);
 };
 
-// This hook is used to pass our prisma instance to each action, load, and endpoint
-// export const prisma: Handle = async function ({ event, resolve }) {
-// 	try {
-// 		const ip = event.request.headers.get('x-forwarded-for') as string;
-// 		const country = event.request.headers.get('x-vercel-ip-country') as string;
-// 		event.locals.prisma = prisma_client;
-// 		event.locals.session = {
-// 			...event.locals.session,
-// 			ip,
-// 			country
-// 		};
-// 	} catch (error) {
-// 		console.error(error);
-// 	}
-// 	return await resolve(event);
-// };
-
 export const handle: Handle = sequence(sequence(Sentry.sentryHandle(), authentication));
 export const handleError = Sentry.handleErrorWithSentry();

src/lib/page_loading_indicator.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { navigating } from '$app/stores';
+	import { onNavigate } from '$app/navigation';
+	let visible = false;
+	let progress = 0;
+	let load_durations: number[] = [];
+	$: average_load = load_durations.reduce((a, b) => a + b, 0) / load_durations.length;
+	const increment = 1;
+	onNavigate((navigation) => {
+		const typical_load_time = average_load || 200; //ms
+		const frequency = typical_load_time / 100;
+		let start = performance.now();
+		// Start the progress bar
+		visible = true;
+		progress = 0;
+		const interval = setInterval(() => {
+			// Increment the progress bar
+			progress += increment;
+		}, frequency);
+		// Resolve the promise when the page is done loading
+		$navigating?.complete.then(() => {
+			progress = 100; // Fill out the progress bar
+			clearInterval(interval);
+			// after 100 ms hide the progress bar
+			setTimeout(() => {
+				visible = false;
+			}, 500);
+			// Log how long that one took
+			const end = performance.now();
+			const duration = end - start;
+			load_durations = [...load_durations, duration];
+		});
+	});
+</script>
+
+<div class="progress" class:visible style:--progress={progress}>
+	<div class="track"></div>
+</div>
+
+<style lang="postcss">
+	.progress {
+		width: 100%;
+		position: fixed;
+		z-index: 2;
+		top: 0;
+		transform: translateY(-100%);
+		transition: transform 0.5s;
+		&.visible {
+			transition: none;
+			transform: translateY(0);
+		}
+	}
+	.track {
+		height: 6px;
+		width: calc(var(--progress, 0) * 1%);
+		background: var(--primary-hex);
+		border-radius: 0 4px 4px 0;
+		transition: width 0.05s;
+		.progress.visible & {
+			transition: none;
+		}
+	}
+</style>

src/lib/server/lucia.ts

@@ -5,8 +5,6 @@ import { prisma } from '@lucia-auth/adapter-prisma';
 import { dev } from '$app/environment';
 import prisma_client from '$lib/prisma';
 
-// export const prisma_client = new PrismaClient();
-
 export const auth = lucia({
 	env: dev ? 'DEV' : 'PROD',
 	middleware: sveltekit(),

src/lib/styles/app.pcss

@@ -11,6 +11,7 @@
 		--popover: 0 0% 100%;
 		--popover-foreground: 20 14.3% 4.1%;
 		--primary: 47.9 95.8% 53.1%;
+		--primary-hex: #facc15;
 		--primary-foreground: 26 83.3% 14.1%;
 		--secondary: 60 4.8% 95.9%;
 		--secondary-foreground: 24 9.8% 10%;

src/routes/(app)/(protected)/admin/+layout.server.ts

@@ -1,5 +1,6 @@
 import { redirect } from '@sveltejs/kit';
+import type { PageServerData } from './$types';
 
-export const load = async function ({ locals }) {
+export const load: PageServerData = async function ({ locals }) {
 	if (!locals?.user?.role?.includes('admin')) throw redirect(302, '/');
 };

src/routes/(app)/(protected)/collection/+page.server.ts

@@ -1,9 +1,9 @@
-import { error, fail, redirect } from '@sveltejs/kit';
+import { type Actions, error, fail, redirect } from "@sveltejs/kit";
 import { superValidate } from 'sveltekit-superforms/server';
-import type { PageServerLoad } from '../../$types.js';
 import prisma from '$lib/prisma';
 import { modifyListGameSchema, type ListGame } from '$lib/config/zod-schemas.js';
 import { search_schema } from '$lib/zodValidation.js';
+import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ fetch, url, locals }) => {
 	const session = await locals.auth.validate();
@@ -97,7 +97,7 @@ export const load: PageServerLoad = async ({ fetch, url, locals }) => {
 	};
 };
 
-export const actions = {
+export const actions: Actions = {
 	// Add game to a wishlist
 	add: async (event) => {
 		const { params, locals, request } = event;

src/routes/(app)/(protected)/list/[id]/+page.server.ts

@@ -1,4 +1,4 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { type Actions, fail, redirect } from "@sveltejs/kit";
 import { superValidate } from 'sveltekit-superforms/server';
 import prisma from '$lib/prisma';
 
@@ -40,7 +40,7 @@ export async function load({ params, locals }) {
 	}
 }
 
-export const actions = {
+export const actions: Actions = {
 	// Add game to a wishlist
 	add: async (event) => {
 		const { params, locals, request } = event;

src/routes/(app)/(protected)/password/change/+page.server.ts

@@ -1,9 +1,10 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { fail, redirect, type Actions } from "@sveltejs/kit";
 import { message, setError, superValidate } from 'sveltekit-superforms/server';
 import { changeUserPasswordSchema } from '$lib/config/zod-schemas.js';
 import { auth } from '$lib/server/lucia.js';
+import type { PageServerLoad } from "./$types";
 
-export const load = async (event) => {
+export const load: PageServerLoad = async (event) => {
 	const form = await superValidate(event, changeUserPasswordSchema);
 	const session = await event.locals.auth.validate();
 
@@ -23,7 +24,7 @@ export const load = async (event) => {
 	};
 };
 
-export const actions = {
+export const actions: Actions = {
 	default: async (event) => {
 		const form = await superValidate(event, changeUserPasswordSchema);
 		//console.log(form);

src/routes/(app)/(protected)/profile/+page.server.ts

@@ -1,8 +1,9 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { fail, redirect, type Actions } from '@sveltejs/kit';
 import { message, setError, superValidate } from 'sveltekit-superforms/server';
+import { LuciaError } from 'lucia';
 import { userSchema } from '$lib/config/zod-schemas';
 import { auth } from '$lib/server/lucia.js';
-import { LuciaError } from 'lucia';
+import type { PageServerLoad } from './$types';
 
 const profileSchema = userSchema.pick({
 	firstName: true,
@@ -11,7 +12,7 @@ const profileSchema = userSchema.pick({
 	username: true
 });
 
-export const load = async (event) => {
+export const load: PageServerLoad = async (event) => {
 	const form = await superValidate(event, profileSchema);
 	const session = await event.locals.auth.validate();
 
@@ -32,7 +33,7 @@ export const load = async (event) => {
 	};
 };
 
-export const actions = {
+export const actions: Actions = {
 	default: async (event) => {
 		const form = await superValidate(event, profileSchema);
 

src/routes/(app)/(protected)/wishlist/+page.server.ts

@@ -1,4 +1,4 @@
-import { error, redirect } from '@sveltejs/kit';
+import { error, redirect, type Actions } from '@sveltejs/kit';
 import { superValidate } from 'sveltekit-superforms/server';
 import prisma from '$lib/prisma';
 import { modifyListGameSchema } from '$lib/config/zod-schemas.js';
@@ -46,7 +46,7 @@ export async function load({ params, locals }) {
 	redirect(302, '/404');
 }
 
-export const actions = {
+export const actions: Actions = {
 	// Add game to a wishlist
 	add: async (event) => {
 		const { params, locals, request } = event;

src/routes/(app)/+page.server.ts

@@ -1,8 +1,9 @@
 import { superValidate } from 'sveltekit-superforms/server';
 import { search_schema } from '$lib/zodValidation';
 import type { MetaTagsProps } from 'svelte-meta-tags';
+import type { PageServerLoad } from './$types';
 
-export const load = async ({ fetch, url }) => {
+export const load: PageServerLoad = async ({ fetch, url }) => {
 	const image = {
 		url: `${
 			new URL(url.pathname, url.origin).href
@@ -42,10 +43,3 @@ export const load = async ({ fetch, url }) => {
 	console.log('form', form);
 	return { form, metaTagsChild: metaTags };
 };
-
-// export const actions = {
-// 	default: async ({ request, locals }): Promise<any> => {
-// 		// Do things in here
-// 		return {};
-// 	}
-// };

src/routes/(app)/game/[id]/+page.server.ts

@@ -11,8 +11,9 @@ import {
 } from '$lib/utils/dbUtils.js';
 import { mapAPIGameToBoredGame } from '$lib/utils/gameMapper.js';
 import prisma from '$lib/prisma';
+import type { PageServerLoad } from './$types';
 
-export const load = async ({ params, locals, fetch }) => {
+export const load: PageServerLoad = async ({ params, locals, fetch }) => {
 	try {
 		const { user } = locals;
 		const { id } = params;

src/routes/(auth)/login/+page.server.ts

@@ -1,16 +1,17 @@
-import { fail } from '@sveltejs/kit';
+import { fail, type Actions } from '@sveltejs/kit';
 import { setError, superValidate } from 'sveltekit-superforms/server';
 import { redirect } from 'sveltekit-flash-message/server';
 import prisma from '$lib/prisma';
 import { auth } from '$lib/server/lucia';
 import { userSchema } from '$lib/config/zod-schemas';
+import type { PageServerLoad } from './$types';
 
 const signInSchema = userSchema.pick({
 	username: true,
 	password: true
 });
 
-export const load = async (event) => {
+export const load: PageServerLoad = async (event) => {
 	const form = await superValidate(event, signInSchema);
 	try {
 		console.log('login load event', event);
@@ -29,7 +30,7 @@ export const load = async (event) => {
 	}
 };
 
-export const actions = {
+export const actions: Actions = {
 	default: async (event) => {
 		const { locals } = event;
 		const form = await superValidate(event, signInSchema);

src/routes/(auth)/logout/+page.server.ts

@@ -1,7 +1,7 @@
+import { redirect, type Actions } from '@sveltejs/kit';
 import { auth } from '$lib/server/lucia';
-import { redirect } from '@sveltejs/kit';
 
-export const actions = {
+export const actions: Actions = {
 	default: async ({ locals }) => {
 		console.log('Signing out user');
 		const session = await locals.auth.validate();

src/routes/(auth)/sign-up/+page.server.ts

@@ -1,6 +1,7 @@
-import { fail, redirect, error } from '@sveltejs/kit';
+import {fail, error, type Actions} from '@sveltejs/kit';
 import { superValidate } from 'sveltekit-superforms/server';
 import { LuciaError } from 'lucia';
+import type { PageServerLoad } from './$types';
 import prisma from '$lib/prisma';
 import { auth } from '$lib/server/lucia';
 import { userSchema } from '$lib/config/zod-schemas';
@@ -19,11 +20,6 @@ const signUpSchema = userSchema
 	})
 	.superRefine(({ confirm_password, password }, ctx) => {
 		if (confirm_password !== password) {
-			// ctx.addIssue({
-			// 	code: 'custom',
-			// 	message: 'Password and Confirm Password must match',
-			// 	path: ['password']
-			// });
 			ctx.addIssue({
 				code: 'custom',
 				message: 'Password and Confirm Password must match',
@@ -32,7 +28,7 @@ const signUpSchema = userSchema
 		}
 	});
 
-export const load = async (event) => {
+export const load: PageServerLoad = async (event) => {
 	console.log('sign up load event', event);
 	// const session = await event.locals.auth.validate();
 	// if (session) {
@@ -43,7 +39,7 @@ export const load = async (event) => {
 	};
 };
 
-export const actions = {
+export const actions: Actions = {
 	default: async (event) => {
 		const form = await superValidate<typeof signUpSchema, Message>(event, signUpSchema);
 

src/routes/+layout.svelte

@@ -3,11 +3,13 @@
 	import { onMount } from "svelte";
 	// import { getFlash } from 'sveltekit-flash-message/client';
 	import toast, { Toaster } from 'svelte-french-toast';
-  import { page } from '$app/stores';
 	import { MetaTags } from 'svelte-meta-tags';
 	import 'iconify-icon';
+  import { page } from '$app/stores';
+	import { onNavigate } from "$app/navigation";
 	import Analytics from '$lib/components/analytics.svelte';
 	import { theme } from '$state/theme';
+	import PageLoadingIndicator from '$lib/page_loading_indicator.svelte';
 
 	const dev = process.env.NODE_ENV !== 'production';
 
@@ -70,6 +72,17 @@
 	// 	// be required here to avoid double-toasting.
 	// 	flash.set(undefined);
 	// });
+
+	onNavigate(async (navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((oldStateCaptureResolve) => {
+			document.startViewTransition(async () => {
+				oldStateCaptureResolve();
+				await navigation.complete;
+			})
+		})
+	});
 </script>
 
 {#if !dev}
@@ -78,6 +91,8 @@
 
 <MetaTags {...metaTags} />
 
+<PageLoadingIndicator />
+
 <div class="layout">
 	<slot />
 </div>