<script>
	import { load } from '@tauri-apps/plugin-store';

	let { loadingState } = $props();
</script>

<div class="splash">
	<div class="spinner">
		<pre class="monospace">
  ▄▄▄▄▄
 ██▀▀▀▀█▄                      █▄ █▄
 ▀██▄  ▄▀ ▄                   ▄██▄██    ▀▀
   ▀██▄▄  ███▄███▄ ▄███▄ ▄███▄ ██ ████▄ ██ ▄█▀█▄
 ▄   ▀██▄ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██▄█▀
 ▀██████▀▄██ ██ ▀█▄▀███▀▄▀███▀▄██▄██ ██▄██▄▀█▄▄▄
			</pre>
	</div>
	<p>{loadingState}</p>
</div>

<style>
	.splash {
		align-items: center;
		justify-content: center;
		flex-direction: column;
		display: flex;
		width: 100%;
		height: 100%;
	}
	.spinner {
	}
	.monospace {
		font-family: monospace;
		color: var(--black);
		letter-spacing: 1px;
	}
</style>
