feat(badges): use anime rate limit card

3 files changed, 27 insertions, 29 deletions

diff --git a/src/lib/Error/AnimeRateLimited.svelte b/src/lib/Error/AnimeRateLimited.svelte
new file mode 100644
index 00000000..9f206131
--- /dev/null
+++ b/src/lib/Error/AnimeRateLimited.svelte
@@ -0,0 +1,17 @@
+<div class="card popup">
+	<p>
+		<slot />
+	</p>
+
+	<span> It is likely that you have been rate limited by AniList. Please try again later. </span>
+
+	{#await fetch('https://api.waifu.pics/sfw/cry') then response}
+		{#await response.json() then json}
+			<p />
+
+			<a href={`https://trace.moe/?url=${encodeURIComponent(json.url)}`} target="_blank">
+				<img src={json.url} alt="" style="width: 30vw;" />
+			</a>
+		{/await}
+	{/await}
+</div>
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 5ac09aa6..f33ba801 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -9,6 +9,7 @@
 	import { onMount } from 'svelte';
 	import authorisedUsers from '$lib/Data/authorised.json';
 	import tooltip from '$lib/Tooltip/tooltip.js';
+	import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte';
 
 	export let data;
 
@@ -35,24 +36,10 @@
 <HeadTitle route={`${data.username}'s Profile`} path={`/user/${data.username}`} />
 
 {#if error}
-	<div class="card popup">
-		<p>
-			<a href={`https://anilist.co/user/${data.username}`} target="_blank">@{data.username}</a>'s
-			profile could not be loaded.
-		</p>
-
-		<span> It is likely that you have been rate limited by AniList. Please try again later. </span>
-
-		{#await fetch('https://api.waifu.pics/sfw/cry') then response}
-			{#await response.json() then json}
-				<p />
-
-				<a href={`https://trace.moe/?url=${encodeURIComponent(json.url)}`} target="_blank">
-					<img src={json.url} alt="" style="width: 30vw;" />
-				</a>
-			{/await}
-		{/await}
-	</div>
+	<AnimeRateLimited>
+		<a href={`https://anilist.co/user/${data.username}`} target="_blank">@{data.username}</a>'s
+		profile could not be loaded.
+	</AnimeRateLimited>
 {:else}
 	<div class={userData ? 'card card-small' : 'card'} id="user-panel">
 		{#if userData === null}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 36a23f73..dc09c4d3 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -12,9 +12,9 @@
 	import cdn from '$lib/Utility/cdn.js';
 	import locale from '$stores/locale.js';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
-	import RateLimited from '$lib/Error/RateLimited.svelte';
 	import Message from '$lib/Loading/Message.svelte';
 	import Dropdown from '$lib/Dropdown.svelte';
+	import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -287,7 +287,7 @@
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
 
 {#if loadError}
-	<div class="card">
+	<div class="card popup">
 		{loadError}
 	</div>
 {:else}
@@ -533,7 +533,7 @@
 						{/if}
 					</div>
 				{:catch}
-					<div class="card">Could not parse badges</div>
+					<div class="card popup">Could not parse badges</div>
 				{/await}
 			{:else}
 				<Message message="Loading badges ..." />
@@ -541,16 +541,10 @@
 				<Skeleton grid={true} count={100} width="150px" height="170px" />
 			{/if}
 		{:catch}
-			<div class="card">Could not fetch badges</div>
+			<div class="card popup">Could not fetch badges</div>
 		{/await}
 	{:catch}
-		<RateLimited
-			type="Profile"
-			list={false}
-			might={false}
-			loginSessionError={false}
-			contact={false}
-		/>
+		<AnimeRateLimited>This user's badges could not be loaded.</AnimeRateLimited>
 	{/await}
 {/if}