From 86abdf2fd37b8ccc712df91a96691cf1c4ca1008 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 25 Jan 2024 08:45:42 -0800
Subject: feat: more fluid skeleton ui

---
 src/routes/user/[user]/+page.svelte        |  4 +---
 src/routes/user/[user]/badges/+page.svelte | 26 +++++---------------------
 2 files changed, 6 insertions(+), 24 deletions(-)

(limited to 'src/routes/user')

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>
-- 
cgit v1.2.3