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 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/lib/Skeleton.svelte

(limited to 'src/lib')

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>
-- 
cgit v1.2.3