feat(user): error alert

1 files changed, 95 insertions, 71 deletions

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 761ba1ee..5ac09aa6 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -13,6 +13,7 @@
 	export let data;
 
 	let userData: User | undefined = undefined;
+	let error = false;
 
 	$: displayBadges = (username: string, badges: number | string) =>
 		$locale({
@@ -23,9 +24,9 @@
 		}).user.profile.badges;
 
 	onMount(() => {
-		user(data.username).then((profile) => {
-			userData = profile;
-		});
+		user(data.username)
+			.then((profile) => (userData = profile))
+			.catch(() => (error = true));
 	});
 
 	// 8.5827814569536423841e0
@@ -33,87 +34,110 @@
 
 <HeadTitle route={`${data.username}'s Profile`} path={`/user/${data.username}`} />
 
-<div class={userData ? 'card card-small' : 'card'} id="user-panel">
-	{#if userData === null}
-		Could not load user profile for <a
-			href={`https://anilist.co/user/${data.username}`}
-			target="_blank">@{data.username}</a
-		>.
-
-		<p />
-
-		Does this user exist?
-	{:else if userData === undefined}
-		<Message />
-
-		<Skeleton card={false} count={1} height="224px" />
-	{:else}
-		<div
-			class="card"
-			id="user-grid"
-			style={`background-image: ${userData ? `url(${userData.bannerImage})` : 'none'}; padding: 0;`}
-		>
-			{#if userData}
-				<img src={userData.bannerImage} alt="" id="cover-image" />
-			{/if}
-
-			<div class="card" id="user-grid-content">
-				<div id="user-grid-avatar">
-					<a
-						href={`https://anilist.co/user/${userData.name}`}
-						target="_blank"
-						title={String(userData.id)}
-					>
-						<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
-					</a>
-				</div>
-
-				<div id="user-grid-content-text">
-					<p>
+{#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>
+{:else}
+	<div class={userData ? 'card card-small' : 'card'} id="user-panel">
+		{#if userData === null}
+			Could not load user profile for <a
+				href={`https://anilist.co/user/${data.username}`}
+				target="_blank">@{data.username}</a
+			>.
+
+			<p />
+
+			Does this user exist?
+		{:else if userData === undefined}
+			<Message />
+
+			<Skeleton card={false} count={1} height="224px" />
+		{:else}
+			<div
+				class="card"
+				id="user-grid"
+				style={`background-image: ${
+					userData ? `url(${userData.bannerImage})` : 'none'
+				}; padding: 0;`}
+			>
+				{#if userData}
+					<img src={userData.bannerImage} alt="" id="cover-image" />
+				{/if}
+
+				<div class="card" id="user-grid-content">
+					<div id="user-grid-avatar">
 						<a
 							href={`https://anilist.co/user/${userData.name}`}
 							target="_blank"
 							title={String(userData.id)}
-							use:tooltip
 						>
-							@{userData.name}
+							<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
 						</a>
-						{#if userData && authorisedUsers.includes(userData.id)}
-							&#8204;
-							<button class="unclickable-button button-badge badge-rainbow">Owner</button>
-						{/if}
-						<span class="click-item">•</span>
-						<a href={root(`/user/${userData.name}/badges`)}>Badge Wall</a>
-					</p>
-
-					{$locale({
-						values: {
-							username: data.username,
-							anime: (userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1),
-							manga: estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)
-						}
-					}).user.profile.statistics}
-
-					<p />
-
-					{#await fetch(root(`/api/badges?id=${userData.id}`))}
-						{displayBadges(userData.name, '...')}
-					{:then badges}
-						{#await badges.json()}
+					</div>
+
+					<div id="user-grid-content-text">
+						<p>
+							<a
+								href={`https://anilist.co/user/${userData.name}`}
+								target="_blank"
+								title={String(userData.id)}
+								use:tooltip
+							>
+								@{userData.name}
+							</a>
+							{#if userData && authorisedUsers.includes(userData.id)}
+								&#8204;
+								<button class="unclickable-button button-badge badge-rainbow">Owner</button>
+							{/if}
+							<span class="click-item">•</span>
+							<a href={root(`/user/${userData.name}/badges`)}>Badge Wall</a>
+						</p>
+
+						{$locale({
+							values: {
+								username: data.username,
+								anime: (userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1),
+								manga: estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)
+							}
+						}).user.profile.statistics}
+
+						<p />
+
+						{#await fetch(root(`/api/badges?id=${userData.id}`))}
 							{displayBadges(userData.name, '...')}
 						{:then badges}
-							{displayBadges(userData.name, badges.length)}
+							{#await badges.json()}
+								{displayBadges(userData.name, '...')}
+							{:then badges}
+								{displayBadges(userData.name, badges.length)}
+							{:catch}
+								{displayBadges(userData.name, '?')}
+							{/await}
 						{:catch}
 							{displayBadges(userData.name, '?')}
 						{/await}
-					{:catch}
-						{displayBadges(userData.name, '?')}
-					{/await}
+					</div>
 				</div>
 			</div>
-		</div>
-	{/if}
-</div>
+		{/if}
+	</div>
+{/if}
 
 <style>
 	#user-grid-content {