boredgame/src/routes/+layout.svelte

<script lang="ts">
	import "$lib/styles/app.pcss";
	import { onMount } from "svelte";
	// import { getFlash } from 'sveltekit-flash-message/client';
	import toast, { Toaster } from 'svelte-french-toast';
	import { MetaTags } from 'svelte-meta-tags';
	import 'iconify-icon';
  import { page } from '$app/stores';
	import { onNavigate } from "$app/navigation";
	import { boredState } from '$lib/stores/boredState';
	import Analytics from '$lib/components/analytics.svelte';
	import { theme } from '$state/theme';
	import PageLoadingIndicator from '$lib/page_loading_indicator.svelte';
	import Portal from "$lib/Portal.svelte";
	import Loading from "$components/loading.svelte";

	const dev = process.env.NODE_ENV !== 'production';

	export let data;
	$: ({ user } = data);

	$: metaTags = {
		titleTemplate: '%s | Bored Game',
		description: 'Bored Game, keep track of your games.',
		openGraph: {
			type: 'website',
			titleTemplate: '%s | Bored Game',
			locale: 'en_US',
			description: 'Bored Game, keep track of your games',
		},
		...$page.data.metaTagsChild
	}

	// const flash = getFlash(page, {
	// 	clearAfterMs: 6000
	// });

	// let flashType;
	// let flashMessage;
	// $: flashType = $flash?.type;
	// $: flashMessage = $flash?.message;

	// $: {
	// 	if ($navigating) {
	// 		debounce(() => {
	// 			boredState.update((n) => ({ ...n, loading: true }));
	// 		}, 250);
	// 	}
	// 	if (!$navigating) {
	// 		boredState.update((n) => ({ ...n, loading: false }));
	// 	}
	// }

	// $: isOpen = $boredState?.dialog?.isOpen;
	$: loading = $boredState?.loading;

	onMount(() => {
		// set the theme to the user's active theme
		$theme = user?.theme || 'system';
		document.querySelector('html')?.setAttribute('data-theme', $theme);
	});

	// flash.subscribe(($flash) => {
	// 	if (!$flash) return;

	// 	if ($flash.type == 'success') {
	// 		toast.success($flash.message);
	// 	} else {
	// 		toast.error($flash.message, {
	// 			duration: 5000
	// 		});
	// 	}

	// 	// Clearing the flash message could sometimes
	// 	// 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}
	<Analytics />
{/if}

<MetaTags {...metaTags} />

<PageLoadingIndicator />

<div class="layout">
	<slot />
</div>

{#if loading}
	<Portal>
		<div class="loading">
			<Loading />
			<h3>Loading...</h3>
		</div>
	<div class="background" />
	</Portal>
{/if}

<Toaster />

<style lang="postcss">
	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 101;
		display: grid;
		place-items: center;
		gap: 1rem;

		h3 {
			color: white;
		}
	}

	.background {
		background: black;
		opacity: 0.8;
		cursor: none;
		inset: 0;
		position: fixed;
		z-index: 100;
	}

	.layout {
		display: flex;
		position: relative;
		flex-direction: column;
		min-height: 100vh;
	}
</style>