From c81cfed88405c0050c6673097187bb128d248998 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 20 May 2024 15:10:30 -0700
Subject: feat(skeleton): animation delay

---
 src/lib/Loading/Skeleton.svelte  | 4 ++--
 src/routes/settings/+page.svelte | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte
index 9293a3a6..3849b24d 100644
--- a/src/lib/Loading/Skeleton.svelte
+++ b/src/lib/Loading/Skeleton.svelte
@@ -23,7 +23,7 @@
 	{#each Array(count) as _, i}
 		<div
 			class={card ? `${bigCard ? 'card' : ''} card-small` : ''}
-			style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}`}
+			style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`}
 		>
 			<div class="skeleton-container">
 				<div class="skeleton" style={`width: ${width}; height: ${height};`} />
@@ -53,7 +53,7 @@
 		background-size: 200px 100%;
 		background-repeat: no-repeat;
 		border-radius: 8px;
-		/* animation-delay: calc(var(--i) * 0.01s); */
+		animation-delay: calc(var(--i) * 0.025s);
 	}
 
 	.skeleton {
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index b507eeca..7d892a31 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -14,6 +14,7 @@
 	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
 	import SettingSync from '$lib/Settings/Categories/SettingSync.svelte';
 	import RssFeeds from '$lib/Settings/Categories/RSSFeeds.svelte';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
 
 	export let data;
 
-- 
cgit v1.2.3