From a425a29347f8a80d475ba25eb9cca3b38158443b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 25 Jan 2024 08:51:16 -0800
Subject: feat: move everything to skeletion loading ui

---
 src/lib/List/Anime/AnimeListTemplate.svelte     |  4 ----
 src/lib/List/Manga/CleanMangaList.svelte        |  6 +++---
 src/lib/Tools/ActivityHistory/Grid.svelte       |  3 ++-
 src/lib/Tools/ActivityHistory/Tool.svelte       |  5 +++--
 src/lib/Tools/DumpProfile.svelte                |  3 ++-
 src/lib/Tools/EpisodeDiscussionCollector.svelte |  3 ++-
 src/lib/Tools/Likes.svelte                      |  3 ++-
 src/lib/Tools/RandomFollower.svelte             |  3 ++-
 src/lib/Tools/SequelSpy.svelte                  |  3 ++-
 src/lib/Tools/Wrapped/Tool.svelte               | 18 +-----------------
 10 files changed, 19 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index e6f942f8..9e95267b 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -35,8 +35,6 @@
 {#await fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)).then( (r) => r.json() )}
 	<ListTitle {title} />
 
-	<!-- <ul><li>Loading subtitle release data ... 33%</li></ul> -->
-
 	<Skeleton
 		card={false}
 		count={8}
@@ -66,8 +64,6 @@
 		{:else}
 			<ListTitle {title} />
 
-			<!-- <ul><li>Loading anime lists ... 66%</li></ul> -->
-
 			<Skeleton
 				card={false}
 				count={8}
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index e14e03f0..399ae68e 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -15,9 +15,9 @@
 	} from '$lib/Media/Cover/hoverCover';
 	import { onMount } from 'svelte';
 	import proxy from '$lib/Utility/proxy';
-	import Loading from '$lib/Utility/Loading.svelte';
 	import root from '$lib/Utility/root';
 	import locale from '$stores/locale';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -58,7 +58,7 @@
 
 {#if rateLimited}
 	{#await serviceStatusResponse}
-		<Loading type="service status" percent={33} card={false} />
+		<Skeleton card={false} count={1} height="0.9rem" list />
 	{:then status}
 		{#if status}
 			{#if status.status === 503}
@@ -71,7 +71,7 @@
 				<Error />
 			{/if}
 		{:else}
-			<Loading type="service status" percent={66} card={false} />
+			<Skeleton card={false} count={1} height="0.9rem" list />
 		{/if}
 	{:catch}
 		<a href="https://due.moe">due.moe</a>'s manga data source is currently unreachable. Please check
diff --git a/src/lib/Tools/ActivityHistory/Grid.svelte b/src/lib/Tools/ActivityHistory/Grid.svelte
index 7f75c104..809521c6 100644
--- a/src/lib/Tools/ActivityHistory/Grid.svelte
+++ b/src/lib/Tools/ActivityHistory/Grid.svelte
@@ -8,6 +8,7 @@
 	import userIdentity from '$stores/identity';
 	import type { AniListAuthorisation } from '$lib/AniList/identity';
 	import { clearAllParameters } from '../../Utility/parameters';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let user: AniListAuthorisation;
 	export let activityData: ActivityHistoryEntry[] | null = null;
@@ -32,7 +33,7 @@
 {#if user === undefined}
 	Please log in to view this page.
 {:else if activityHistoryData === undefined}
-	Loading activity history ... 50%
+	<Skeleton card={false} count={1} height="150px" />
 {:else}
 	{@const filledActivities = fillMissingDays(activityHistoryData, false, currentYear)}
 	{@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index 6728f9c6..bf29cc20 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -11,6 +11,7 @@
 	import { domToBlob } from 'modern-screenshot';
 	import ActivityHistoryGrid from './Grid.svelte';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -67,10 +68,10 @@
 	Please log in to view this page.
 {:else}
 	{#await activityHistoryData}
-		Loading activity history ... 33%
+		<Skeleton card={false} count={5} height="0.9rem" list />
 	{:then activities}
 		{#if activities === undefined}
-			Loading activities ... 66%
+			<Skeleton card={false} count={5} height="0.9rem" list />
 		{:else}
 			{@const filledActivities = fillMissingDays(activities)}
 
diff --git a/src/lib/Tools/DumpProfile.svelte b/src/lib/Tools/DumpProfile.svelte
index 1f0eba7e..db5156f7 100644
--- a/src/lib/Tools/DumpProfile.svelte
+++ b/src/lib/Tools/DumpProfile.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { dumpUser } from '$lib/AniList/user';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
+	import Skeleton from '$lib/Skeleton.svelte';
 	import InputTemplate from './InputTemplate.svelte';
 	import LZString from 'lz-string';
 
@@ -28,7 +29,7 @@
 <!-- svelte-ignore missing-declaration -->
 <InputTemplate field="Username" bind:submission event="Dump User" submitText="Dump">
 	{#await dumpUser(submission)}
-		Loading user ... 50%
+		<Skeleton card={false} count={1} height="500px" />
 	{:then dump}
 		{@const decoded = decodeJSON(dump.about)}
 
diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index 33f63c0e..d6076c12 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -9,6 +9,7 @@
 		onMouseMove,
 		type HoverCoverResponse
 	} from '$lib/Media/Cover/hoverCover';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	let searchInput = '';
 	let searchInputFinal = '';
@@ -45,7 +46,7 @@
 
 	{#if searchInputFinal !== ''}
 		{#await threads(searchInputFinal)}
-			Loading forum threads ... 50%
+			<Skeleton card={false} count={5} height="0.9rem" list />
 		{:then threads}
 			<ul>
 				{#each threads
diff --git a/src/lib/Tools/Likes.svelte b/src/lib/Tools/Likes.svelte
index e54923bb..859c8182 100644
--- a/src/lib/Tools/Likes.svelte
+++ b/src/lib/Tools/Likes.svelte
@@ -2,6 +2,7 @@
 	import { activityLikes } from '$lib/AniList/activity';
 	import { threadLikes } from '$lib/AniList/forum';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
+	import Skeleton from '$lib/Skeleton.svelte';
 	import InputTemplate from './InputTemplate.svelte';
 
 	let submission = '';
@@ -22,7 +23,7 @@
 >
 	{#if submission.match(/https:\/\/anilist.co\/(activity|forum\/thread)\/\d+/)}
 		{#await likesPromise}
-			Loading {submissionType} ... 50%
+			<Skeleton card={false} count={5} height="0.9rem" list />
 		{:then likes}
 			{#if likes && likes.length > 0}
 				<ul>
diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte
index d50cd7d4..844fd74d 100644
--- a/src/lib/Tools/RandomFollower.svelte
+++ b/src/lib/Tools/RandomFollower.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { followers } from '$lib/AniList/following';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
+	import Skeleton from '$lib/Skeleton.svelte';
 	import InputTemplate from './InputTemplate.svelte';
 
 	let submission = '';
@@ -15,7 +16,7 @@
 	onSubmit={() => (randomSeed = Math.random())}
 >
 	{#await followers(submission)}
-		Loading followers ... 50%
+		<Skeleton card={false} count={1} height="0.9rem" list />
 	{:then users}
 		{@const user = users[Math.floor(randomSeed * users.length)]}
 
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index 74ce07fa..f34c1964 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -16,6 +16,7 @@
 		type HoverCoverResponse
 	} from '$lib/Media/Cover/hoverCover';
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -58,7 +59,7 @@
 		</p>
 
 		{#await currentPrequels}
-			<p>Loading prequels ... 50%</p>
+			<Skeleton card={false} count={5} height="0.9rem" list />
 		{:then currentPrequels}
 			<ul>
 				{#each currentPrequels as prequel}
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index 2fb77b5e..fa788d65 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -16,7 +16,6 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { clearAllParameters } from '../../Utility/parameters';
-	import { nbsp } from '../../Utility/html';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import { database } from '$lib/Database/activities';
 	import Activity from './Top/Activity.svelte';
@@ -26,7 +25,6 @@
 	import MediaExtras from './MediaExtras.svelte';
 	import MediaPanel from './Media.svelte';
 	import Watermark from './Watermark.svelte';
-	import Loading from '$lib/Utility/Loading.svelte';
 	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let user: AniListAuthorisation;
@@ -567,21 +565,9 @@
 	<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)}
-		<!-- <Loading>
-			{@html nbsp(`Loading${useFullActivityHistory ? ' full-year' : ''} activity history ...`)}
-		</Loading>
-
-		<p /> -->
-
 		<Skeleton count={2} />
 	{:then activities}
 		{#await wrapped(user, $userIdentity, selectedYear)}
-			<!-- <Loading>
-				{@html nbsp('Loading user data ...')}
-			</Loading>
-
-			<p /> -->
-
 			<Skeleton count={2} />
 		{:then wrapped}
 			<div id="list-container">
@@ -773,9 +759,7 @@
 		</Error>
 	{/await}
 {:else}
-	<Loading>
-		{@html nbsp('Loading user identity ...')}
-	</Loading>
+	<Skeleton count={2} />
 {/if}
 
 <style>
-- 
cgit v1.2.3