feat: more fancy loaders

2 files changed, 11 insertions, 4 deletions

diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index b00cb386..bdc7556a 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -2,7 +2,7 @@
 	import Ellipsis from './Ellipsis.svelte';
 	import Ripple from './Ripple.svelte';
 
-	export let message = 'Loading ...';
+	export let message: string | undefined = undefined;
 	export let loader: 'ellipsis' | 'ripple' = 'ellipsis';
 </script>
 
@@ -13,10 +13,10 @@
 		<Ripple />
 	{/if}
 
-	<p />
-
 	{#if message}
-		<p>{message}</p>
+		<p />
+
+		{message}
 	{/if}
 </div>
 
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index fa788d65..8d0c7945 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -26,6 +26,7 @@
 	import MediaPanel from './Media.svelte';
 	import Watermark from './Watermark.svelte';
 	import Skeleton from '$lib/Skeleton.svelte';
+	import Message from '$lib/Loading/Message.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -565,9 +566,13 @@
 	<div class="card">Please log in to view this page.</div>
 {:else if $userIdentity.id !== -1}
 	{#await selectedYear !== currentYear || useFullActivityHistory || new Date().getMonth() <= 6 ? fullActivityHistory(user, $userIdentity, selectedYear) : getActivityHistory($userIdentity)}
+		<Message message="Loading activity history ..." />
+
 		<Skeleton count={2} />
 	{:then activities}
 		{#await wrapped(user, $userIdentity, selectedYear)}
+			<Message message="Loading user data ..." />
+
 			<Skeleton count={2} />
 		{:then wrapped}
 			<div id="list-container">
@@ -759,6 +764,8 @@
 		</Error>
 	{/await}
 {:else}
+	<Message message="Loading user ..." />
+
 	<Skeleton count={2} />
 {/if}