feat: loading and error cards

3 files changed, 22 insertions, 16 deletions

diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte
index eda5e90e..19509d14 100644
--- a/src/lib/Tools/Birthdays.svelte
+++ b/src/lib/Tools/Birthdays.svelte
@@ -6,6 +6,7 @@
 	import Error from '$lib/Error/RateLimited.svelte';
 	import { onMount } from 'svelte';
 	import { clearAllParameters, parseOrDefault } from '../Utility/parameters';
+	import Loading from '$lib/Loading.svelte';
 
 	interface Birthday {
 		name: string;
@@ -84,10 +85,10 @@
 </script>
 
 {#await acdbBirthdays}
-	Loading 33% ...
+	<Loading type="character birthday data" percent={33} />
 {:then acdbBirthdays}
 	{#await anisearchBirthdays}
-		Loading 66% ...
+		<Loading type="character birthday data" percent={66} />
 	{:then anisearch}
 		{@const birthdays = combineBirthdaySources(acdbBirthdays, anisearch)}
 
@@ -123,10 +124,10 @@
 			{/each}
 		</div>
 	{:catch}
-		<Error type="Character" />
+		<Error type="Character" card />
 	{/await}
 {:catch}
-	<Error type="Character" />
+	<Error type="Character" card />
 {/await}
 
 <style>
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index 349f98d0..bc48e423 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -15,6 +15,7 @@
 	import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover';
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import Crunchyroll from '$lib/Tools/Schedule/Crunchyroll.svelte';
+	import Loading from '$lib/Loading.svelte';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	let scheduledMediaPromise: Promise<Partial<Media[]>>;
@@ -94,11 +95,11 @@
 </blockquote>
 
 {#await subsPleasePromise}
-	Loading subtitle release data ... 49.5%
+	<Loading type="subtitle release data" percent={49.5} />
 {:then subsPlease}
 	{#if subsPlease}
 		{#await scheduledMediaPromise}
-			Loading anime schedule ... 82.5%
+			<Loading type="anime schedule" percent={82.5} />
 		{:then scheduledMedia}
 			{#if scheduledMedia}
 				{@const columnCount = Math.ceil(Object.keys(subsPlease.schedule).length / 2)}
@@ -178,16 +179,16 @@
 					{/each}
 				</div>
 			{:else}
-				Loading anime schedule ... 66%
+				<Loading type="anime schedule" percent={66} />
 			{/if}
 		{:catch}
-			<Error type="Media" loginSessionError={false} />
+			<Error type="Media" loginSessionError={false} card />
 		{/await}
 	{:else}
-		Loading subtitle release data ... 33%
+		<Loading type="subtitle release data" percent={33} />
 	{/if}
 {:catch}
-	<Error type="Schedule" loginSessionError={false} />
+	<Error type="Schedule" loginSessionError={false} card />
 {/await}
 
 <p />
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index d2999de2..e29ddb48 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -29,6 +29,7 @@
 	import MediaExtras from './Wrapped/MediaExtras.svelte';
 	import MediaPanel from './Wrapped/Media.svelte';
 	import Watermark from './Wrapped/Watermark.svelte';
+	import Loading from '$lib/Loading.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -487,14 +488,14 @@
 	<div class="card">Please log in to view this page.</div>
 {:else if currentUserIdentity.id !== -1}
 	{#await selectedYear !== currentYear || useFullActivityHistory || new Date().getMonth() <= 6 ? fullActivityHistory(user, currentUserIdentity, selectedYear) : getActivityHistory(currentUserIdentity)}
-		<div class="card">
+		<Loading>
 			{@html nbsp(`Loading${useFullActivityHistory ? ' full-year' : ''} activity history ...`)}
-		</div>
+		</Loading>
 	{:then activities}
 		{#await wrapped(user, currentUserIdentity, selectedYear)}
-			<div class="card">
+			<Loading>
 				{@html nbsp('Loading user data ...')}
-			</div>
+			</Loading>
 		{:then wrapped}
 			<div id="list-container">
 				<div class="card">
@@ -670,10 +671,11 @@
 				</div>
 			</div>
 		{:catch}
-			<Error type="User" />
+			<Error type="User" card />
 		{/await}
 	{:catch}
 		<Error
+			card
 			type={`${useFullActivityHistory ? 'Full-year activity' : 'Activity'} history`}
 			loginSessionError={!useFullActivityHistory}
 		>
@@ -687,7 +689,9 @@
 		</Error>
 	{/await}
 {:else}
-	{@html nbsp('Loading user identity ...')}
+	<Loading>
+		{@html nbsp('Loading user identity ...')}
+	</Loading>
 {/if}
 
 <style>