From 2e2ec9878c7bb71c1a3d6276653a7ae4e193193d Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 24 Jan 2024 21:08:08 -0800
Subject: feat(layout): skeleton ui on load

---
 src/lib/Skeleton.svelte   | 43 +++++++++++++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte |  3 +++
 2 files changed, 46 insertions(+)
 create mode 100644 src/lib/Skeleton.svelte

diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte
new file mode 100644
index 00000000..5db5fb0b
--- /dev/null
+++ b/src/lib/Skeleton.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	export let count = 3;
+</script>
+
+{#each Array(count) as _, i}
+	<div class="card card-small">
+		<div class="skeleton-container">
+			<div class="skeleton" />
+		</div>
+	</div>
+
+	{#if i < count - 1}
+		<p />
+	{/if}
+{/each}
+
+<style>
+	@keyframes progress {
+		0% {
+			background-position: -200px 0;
+		}
+		100% {
+			background-position: calc(200px + 100%) 0;
+		}
+	}
+
+	.skeleton-container {
+		animation: progress 1.2s ease-in-out infinite;
+		background-color: var(--base001);
+		background-image: linear-gradient(90deg, var(--base0011), var(--base01), var(--base0011));
+		background-size: 200px 100%;
+		background-repeat: no-repeat;
+		border-radius: 8px;
+	}
+
+	.skeleton {
+		height: 100px;
+		border-radius: 4px;
+		display: inline-block;
+		line-height: 1;
+		width: 100%;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3b243232..21cb38e3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,6 +18,7 @@
 	import japanese from '$lib/Locale/japanese';
 	import type { LocaleDictionary } from '$lib/Locale/layout';
 	import locale from '$stores/locale';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let data;
 
@@ -114,6 +115,8 @@
 	<Notifications item={Notification} zIndex={5000}>
 		{#if $userIdentity.id !== -1}
 			<Root {data} {way}><slot /></Root>
+		{:else}
+			<Skeleton />
 		{/if}
 	</Notifications>
 </div>
-- 
cgit v1.2.3