feat(badges): skeleton loading

1 files changed, 13 insertions, 0 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index f02f9c19..6b4b45e1 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -13,6 +13,7 @@
 	import proxy from '$lib/Utility/proxy.js';
 	import cdn from '$lib/Utility/cdn.js';
 	import locale from '$stores/locale.js';
+	import Skeleton from '$lib/Skeleton.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -291,11 +292,19 @@
 {:else}
 	{#await currentUserIdentity}
 		<Loading type="badges" percent={40} />
+
+		<p />
+
+		<Skeleton grid={true} count={100} />
 	{:then identity}
 		{@const isOwner = identity && identity.name === data.username}
 
 		{#await badgesPromise}
 			<Loading type="user identity" percent={60} />
+
+			<p />
+
+			<Skeleton grid={true} count={100} />
 		{:then badgesResponse}
 			{#if badgesResponse}
 				{#await badgesResponse.json()}
@@ -518,6 +527,10 @@
 				{/await}
 			{:else}
 				<Loading type="badges" percent={20} />
+
+				<p />
+
+				<Skeleton grid={true} count={100} />
 			{/if}
 		{:catch}
 			<div class="card">Could not fetch badges</div>