From 3cdeb60efff8ffbecf2d62b6f1a6e1b5261fa86f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 24 Jan 2024 23:54:58 -0800
Subject: feat(updates): better list skeleton

---
 src/lib/Skeleton.svelte         |  8 ++++++--
 src/routes/updates/+page.svelte | 36 ++++++++++++++++--------------------
 2 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte
index 7a278429..71078f13 100644
--- a/src/lib/Skeleton.svelte
+++ b/src/lib/Skeleton.svelte
@@ -4,6 +4,7 @@
 	export let height = '100px';
 	export let card = true;
 	export let grid = false;
+	export let list = false;
 </script>
 
 {#if grid}
@@ -18,13 +19,16 @@
 	</div>
 {:else}
 	{#each Array(count) as _, i}
-		<div class={card ? 'card card-small' : ''} style={`width: ${width};`}>
+		<div
+			class={card ? 'card card-small' : ''}
+			style={`width: ${width}; ${list ? 'padding-top: .5rem;' : ''}`}
+		>
 			<div class="skeleton-container">
 				<div class="skeleton" style={`width: ${width}; height: ${height};`} />
 			</div>
 		</div>
 
-		{#if i < count - 1}
+		{#if !list && i < count - 1}
 			<p />
 		{/if}
 	{/each}
diff --git a/src/routes/updates/+page.svelte b/src/routes/updates/+page.svelte
index 45ff6409..6e6fd6a9 100644
--- a/src/routes/updates/+page.svelte
+++ b/src/routes/updates/+page.svelte
@@ -62,10 +62,10 @@
 			<small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
 		</summary>
 
-		<ul>
-			{#if feed === null}
-				<li>Failed to load feed</li>
-			{:else if feed !== undefined}
+		{#if feed === null}
+			Failed to load feed
+		{:else if feed !== undefined}
+			<ul>
 				{#each feed.items as item}
 					<li>
 						{#if directLink}
@@ -84,12 +84,10 @@
 						{/if}
 					</li>
 				{/each}
-			{:else}
-				<p />
-
-				<Skeleton card={false} count={5} height="1rem" />
-			{/if}
-		</ul>
+			</ul>
+		{:else}
+			<Skeleton card={false} count={5} height="0.9rem" list />
+		{/if}
 	</details>
 
 	<details open class="list">
@@ -98,10 +96,10 @@
 			<small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
 		</summary>
 
-		<ul>
-			{#if novelFeed === null}
-				<li>Failed to load feed</li>
-			{:else if novelFeed !== undefined}
+		{#if novelFeed === null}
+			Failed to load feed
+		{:else if novelFeed !== undefined}
+			<ul>
 				{#each novelFeed.data.items as item}
 					<li>
 						{#if directLink}
@@ -119,12 +117,10 @@
 						{/if}
 					</li>
 				{/each}
-			{:else}
-				<p />
-
-				<Skeleton card={false} count={5} height="1rem" />
-			{/if}
-		</ul>
+			</ul>
+		{:else}
+			<Skeleton card={false} count={5} height="0.9rem" list />
+		{/if}
 	</details>
 </div>
 
-- 
cgit v1.2.3