feat(badges): websocket loading

6 files changed, 53 insertions, 20 deletions

diff --git a/bun.lockb b/bun.lockb
index 1d6760f7..cf38e675 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 465629fd..a63f8a8e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
     "dexie": "^4.0.1-alpha.25",
     "dom-to-image": "^2.6.0",
     "html2canvas": "^1.4.1",
-    "rss-parser": "^3.13.0"
+    "rss-parser": "^3.13.0",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2"
   }
 }
diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts
new file mode 100644
index 00000000..f78d3903
--- /dev/null
+++ b/src/lib/websocket.ts
@@ -0,0 +1,21 @@
+import type { ViteDevServer } from 'vite';
+import { Server } from 'socket.io';
+import { getUserBadges } from '$lib/userBadgesDatabase';
+import { userIdentity } from '$lib/AniList/identity';
+
+export const webSocketServer = {
+	name: 'webSocketServer',
+	configureServer(server: ViteDevServer) {
+		if (!server.httpServer) return;
+
+		const io = new Server(server.httpServer);
+
+		io.on('connection', (socket) => {
+			socket.on('badges', async (data) => {
+				userIdentity(data).then((identity) => {
+					socket.emit('badges', getUserBadges(identity.id));
+				});
+			});
+		});
+	}
+};
diff --git a/src/routes/user/[user]/badges/+page.server.ts b/src/routes/user/[user]/badges/+page.server.ts
index 4be5bcd2..f18892a7 100644
--- a/src/routes/user/[user]/badges/+page.server.ts
+++ b/src/routes/user/[user]/badges/+page.server.ts
@@ -1,11 +1,5 @@
-import { user } from '$lib/AniList/user.js';
-import { getUserBadges } from '$lib/userBadgesDatabase.js';
-
 export const load = async ({ params }) => {
-	const badges = getUserBadges((await user(params.user)).id);
-
 	return {
-		username: params.user,
-		badges
+		username: params.user
 	};
 };
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index fb5f5e29..dbf8d21c 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -2,16 +2,25 @@
 	import { userIdentity } from '$lib/AniList/identity.js';
 	import type { Badge } from '$lib/userBadgesDatabase.js';
 	import { onMount } from 'svelte';
+	import { io } from 'socket.io-client';
 
 	export let data;
 
 	let editMode = false;
 	let currentUserIdentity: ReturnType<typeof userIdentity>;
 	let error: null | string;
+	const socket = io();
+	let badges: Badge[] | null = null;
 
 	onMount(async () => {
+		socket.on('badges', (message) => {
+			badges = message;
+		});
+
 		if (data.user) {
 			currentUserIdentity = userIdentity(data.user);
+
+			socket.emit('badges', data.user);
 		} else {
 			currentUserIdentity = new Promise((resolve) =>
 				resolve({
@@ -108,17 +117,23 @@
 	{/if}
 
 	<div id="badges">
-		{#each data.badges as badge}
-			{#if editMode}
-				<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
-					<img src={badge.image} alt={badge.description} />
-				</a>
-			{:else}
-				<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
-					<img src={badge.image} alt={badge.description} />
-				</a>
-			{/if}
-		{/each}
+		{#if badges === null}
+			<p>Loading&nbsp;...</p>
+		{:else if badges.length === 0}
+			No badges found for this user.
+		{:else}
+			{#each badges as badge}
+				{#if editMode}
+					<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
+						<img src={badge.image} alt={badge.description} />
+					</a>
+				{:else}
+					<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
+						<img src={badge.image} alt={badge.description} />
+					</a>
+				{/if}
+			{/each}
+		{/if}
 	</div>
 {/await}
 
diff --git a/vite.config.ts b/vite.config.ts
index bbf8c7da..887adf2e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { webSocketServer } from '$lib/websocket';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit(), webSocketServer]
 });