feat: more fluid skeleton ui

5 files changed, 8 insertions, 45 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 88108de9..df418d37 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -40,8 +40,6 @@
 				{:else}
 					<ListTitle title={$locale().lists.upcoming.episodes} />
 
-					<ul><li>Loading user identity ... 50%</li></ul>
-
 					<Skeleton card={false} count={5} height="0.9rem" list />
 				{/if}
 			</details>
@@ -58,8 +56,6 @@
 				{:else}
 					<ListTitle title={$locale().lists.due.episodes} />
 
-					<ul><li>Loading user identity ... 50%</li></ul>
-
 					<Skeleton card={false} count={5} height="0.9rem" list />
 				{/if}
 			</details>
@@ -81,8 +77,6 @@
 				{:else}
 					<ListTitle title={$locale().lists.due.mangaAndLightNovels} />
 
-					<ul><li>Loading 0% ...</li></ul>
-
 					<Skeleton card={false} count={5} height="0.9rem" list />
 				{/if}
 			</details>
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index 9f493d1e..087b0974 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -30,8 +30,6 @@
 			{:else}
 				<ListTitle title={$locale().lists.completed.anime} />
 
-				<!-- <ul><li>Loading user identity ... 50%</li></ul> -->
-
 				<Skeleton card={false} count={5} height="0.9rem" list />
 			{/if}
 		</details>
@@ -47,8 +45,6 @@
 			{:else}
 				<ListTitle title={$locale().lists.completed.mangaAndLightNovels} />
 
-				<!-- <ul><li>Loading user identity ... 50%</li></ul> -->
-
 				<Skeleton card={false} count={5} height="0.9rem" list />
 			{/if}
 		</details>
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 3b27db12..44a4fd2d 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -9,7 +9,6 @@
 	import { season } from '$lib/Media/Anime/season';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import Crunchyroll from '$lib/Schedule/Crunchyroll.svelte';
-	import Loading from '$lib/Utility/Loading.svelte';
 	import '$lib/Schedule/container.css';
 	import Days from '$lib/Schedule/Days.svelte';
 	import settings from '$stores/settings';
@@ -62,18 +61,10 @@
 <p />
 
 {#await subsPleasePromise}
-	<!-- <Loading type="subtitle release data" percent={49.5} />
-
-	<p /> -->
-
 	<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 {:then subsPlease}
 	{#if subsPlease}
 		{#await scheduledMediaPromise}
-			<!-- <Loading type="anime schedule" percent={82.5} />
-
-			<p /> -->
-
 			<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 		{:then scheduledMedia}
 			{#if scheduledMedia}
@@ -89,13 +80,13 @@
 					<Days {subsPlease} {scheduledMedia} {forceListMode} />
 				</div>
 			{:else}
-				<Loading type="anime schedule" percent={66} />
+				<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 			{/if}
 		{:catch}
 			<Error type="Media" loginSessionError={false} card list={false} />
 		{/await}
 	{:else}
-		<Loading type="subtitle release data" percent={33} />
+		<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 	{/if}
 {:catch}
 	<Error type="Schedule" loginSessionError={false} card list={false} />
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 0fd32101..67cb480f 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -41,9 +41,7 @@
 
 		Does this user exist?
 	{:else if userData === undefined}
-		<p>Loading user ... 50%</p>
-
-		<Skeleton card={false} count={1} />
+		<Skeleton card={false} count={1} height="224px" />
 	{:else}
 		<div
 			class="card"
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 6b4b45e1..e41d294c 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { userIdentity } from '$lib/AniList/identity';
 	import { user } from '$lib/AniList/user';
-	import { nbsp } from '$lib/Utility/html';
 	import type { Badge } from '$lib/Database/badges';
 	// import { domToBlob } from 'modern-screenshot';
 	import { onMount } from 'svelte';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import { databaseTimeToDate, dateToDatabaseTime } from '$lib/Utility/time';
-	import Loading from '$lib/Utility/Loading.svelte';
 	import root from '$lib/Utility/root.js';
 	import tooltip from '$lib/Tooltip/tooltip.js';
 	import proxy from '$lib/Utility/proxy.js';
@@ -291,24 +289,16 @@
 	</div>
 {:else}
 	{#await currentUserIdentity}
-		<Loading type="badges" percent={40} />
-
-		<p />
-
-		<Skeleton grid={true} count={100} />
+		<Skeleton grid={true} count={100} width="150px" height="170px" />
 	{:then identity}
 		{@const isOwner = identity && identity.name === data.username}
 
 		{#await badgesPromise}
-			<Loading type="user identity" percent={60} />
-
-			<p />
-
-			<Skeleton grid={true} count={100} />
+			<Skeleton grid={true} count={100} width="150px" height="170px" />
 		{:then badgesResponse}
 			{#if badgesResponse}
 				{#await badgesResponse.json()}
-					<Loading type="badges" percent={80} />
+					<Skeleton grid={true} count={100} width="150px" height="170px" />
 				{:then ungroupedBadges}
 					<div id="badges">
 						{#await awcPromise then badges}
@@ -349,9 +339,7 @@
 						{/await}
 
 						{#if ungroupedBadges === null}
-							<Loading>
-								{@html nbsp('Loading badges ... 50%')}
-							</Loading>
+							<Skeleton grid={true} count={10} width="150px" height="170px" />
 						{:else if ungroupedBadges.length === 0}
 							<div class="card">
 								No due.moe registered badges found for this user. <a
@@ -526,11 +514,7 @@
 					<div class="card">Could not parse badges</div>
 				{/await}
 			{:else}
-				<Loading type="badges" percent={20} />
-
-				<p />
-
-				<Skeleton grid={true} count={100} />
+				<Skeleton grid={true} count={100} width="150px" height="170px" />
 			{/if}
 		{:catch}
 			<div class="card">Could not fetch badges</div>