chore:loading animation

SureshPradhana · May 4, 2024 · 9d71937 · 9d71937
1 parent cd75477
commit 9d71937
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
 		"clsx": "^2.1.0",
 		"feather-icons": "^4.29.1",
 		"javascript-time-ago": "^2.5.9",
+		"svelte-loading-animation": "^0.0.1",
 		"tailwind-merge": "^2.2.2",
 		"tailwind-variants": "^0.2.1",
 		"time-difference-js": "^1.0.1"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import { onMount } from 'svelte';
 	import type { NewsItem } from '$lib/types';
 	import { getIds, getItems } from '$lib/utils/utils';
+	import { LoadBars } from 'svelte-loading-animation';
 	let items: NewsItem[] = [];
 
 	let nextIndex = 15;
@@ -22,11 +23,16 @@
 	}
 </script>
 
-{#each items as item, i}
-	<News key={i} {item} />
-{/each}
-
-<button on:click={loadMoreItems}>More</button>
+{#if items.length === 0}
+	<div class="flex justify-center content-center">
+		<LoadBars size="32px" color="red" class="mx-auto" />
+	</div>
+{:else}
+	{#each items as item, i}
+		<News key={i} {item} />
+	{/each}
+	<button on:click={loadMoreItems}>More</button>
+{/if}
 
 <style lang="postcss">
 	:global(html) {