From dc760040587dcf9946898a45ef47db2fcde22d6a Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 31 Jan 2024 00:57:18 -0800
Subject: refactor(skeleton): move to loading module

---
 src/lib/Loading/Skeleton.svelte | 69 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/lib/Loading/Skeleton.svelte

(limited to 'src/lib/Loading')

diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte
new file mode 100644
index 00000000..f42e5a75
--- /dev/null
+++ b/src/lib/Loading/Skeleton.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	export let count = 3;
+	export let width = '100%';
+	export let height = '100px';
+	export let card = true;
+	export let grid = false;
+	export let list = false;
+	export let pad = false;
+</script>
+
+{#if grid}
+	<div class="grid" style={pad ? 'padding-top: .75em;' : ''}>
+		{#each Array(count) as _}
+			<div class={card ? 'card card-small' : ''} style={`width: ${width};`}>
+				<div class="skeleton-container">
+					<div class="skeleton" style={`width: ${width}; height: ${height};`} />
+				</div>
+			</div>
+		{/each}
+	</div>
+{:else}
+	{#each Array(count) as _, i}
+		<div
+			class={card ? 'card card-small' : ''}
+			style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}`}
+		>
+			<div class="skeleton-container">
+				<div class="skeleton" style={`width: ${width}; height: ${height};`} />
+			</div>
+		</div>
+
+		{#if !list && i < count - 1}
+			<p />
+		{/if}
+	{/each}
+{/if}
+
+<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 {
+		border-radius: 4px;
+		display: inline-block;
+		line-height: 1;
+	}
+
+	.grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		row-gap: 1em;
+	}
+</style>
-- 
cgit v1.2.3