<script>
	import NoteView from "$lib/components/NoteView.svelte"
	import LoadingSpinner from "$lib/components/LoadingSpinner.svelte"
	import { onMount } from "svelte"
	import { fade } from "svelte/transition"

	let isLoading = true

	onMount(() => {
		// Set a small timeout to ensure the loading state shows
		// -> Prevents component flickering during auth checks
		setTimeout(() => {
			isLoading = false
		}, 500)
	})
</script>

{#if isLoading}
	<div class="loading-container" transition:fade={{ duration: 200 }}>
		<LoadingSpinner />
	</div>
{:else}
	<NoteView />
{/if}

<style>
	.loading-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100%;
	}
</style>
