feat: more fancy loaders

4 files changed, 23 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}
 
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 44a4fd2d..1ef33414 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -14,6 +14,7 @@
 	import settings from '$stores/settings';
 	import root from '$lib/Utility/root';
 	import Skeleton from '$lib/Skeleton.svelte';
+	import Message from '$lib/Loading/Message.svelte';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	let scheduledMediaPromise: Promise<Partial<Media[]>>;
@@ -61,10 +62,14 @@
 <p />
 
 {#await subsPleasePromise}
+	<Message message="Loading subtitle schedule ..." />
+
 	<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 {:then subsPlease}
 	{#if subsPlease}
 		{#await scheduledMediaPromise}
+			<Message message="Loading schedule ..." />
+
 			<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 		{:then scheduledMedia}
 			{#if scheduledMedia}
@@ -80,12 +85,16 @@
 					<Days {subsPlease} {scheduledMedia} {forceListMode} />
 				</div>
 			{:else}
+				<Message message="Loading schedule ..." />
+
 				<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 			{/if}
 		{:catch}
 			<Error type="Media" loginSessionError={false} card list={false} />
 		{/await}
 	{:else}
+		<Message message="Loading subtitle schedule ..." />
+
 		<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 	{/if}
 {:catch}
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 67cb480f..40695f03 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { user, type User } from '$lib/AniList/user';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
+	import Message from '$lib/Loading/Message.svelte';
 	import { estimatedDayReading } from '$lib/Media/Manga/time';
 	import Skeleton from '$lib/Skeleton.svelte';
 	import root from '$lib/Utility/root.js';
@@ -41,6 +42,8 @@
 
 		Does this user exist?
 	{:else if userData === undefined}
+		<Message />
+
 		<Skeleton card={false} count={1} height="224px" />
 	{:else}
 		<div