fiz about and depecrated api

frontend/src/lib/About.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
+	import LoadingIcon from './Icons/LoadingIcon.svelte';
 	export let classList = '';
+	export let loading = false;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -9,9 +11,15 @@
 	class="fixed {classList} w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll"
 >
 	<div class="max-w-md">
+		{#if loading}
+			<div class="text-4xl text-white flex items-center mb-4">
+				<LoadingIcon classList={'inline-block animate-spin p-1 mr-2'} />
+				<h1 class="font-bold inline-block">Loading...</h1>
+			</div>
+		{/if}
 		<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
 		<p>
-			Hugging Face face GPU Spaces <a
+			Powered by Hugging Face face GPU Spaces <a
 				href="https://huggingface.co/docs/hub/spaces-gpus"
 				class="text-blue-400 hover:text-blue-600 underline"
 				>https://huggingface.co/docs/hub/spaces-gpus</a

frontend/src/lib/App.svelte

@@ -14,28 +14,10 @@
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
 	import { base64ToBlob, uploadImage } from '$lib/utils';
 	import { nanoid } from 'nanoid';
-	import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
-
-	/**
-	 * The main Liveblocks code for the example.
-	 * Check in src/routes/index.svelte to see the setup code.
-	 */
 
 	const myPresence = useMyPresence();
 	const others = useOthers();
 
-	// Set a default value for presence
-	const initialPresence: Presence = {
-		cursor: null,
-		frame: {
-			x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
-			y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
-		},
-		status: Status.dragging,
-		currentPrompt: ''
-	};
-	myPresence.update(initialPresence);
-
 	function getKey(position: { x: number; y: number }): PromptImgKey {
 		return `${position.x}_${position.y}`;
 	}

frontend/src/lib/liveblocks/RoomProvider.svelte

@@ -3,29 +3,30 @@
   https://liveblocks.io/docs/api-reference/liveblocks-react#RoomProvider
 -->
 <script lang="ts">
-  // @ts-nocheck
-  import { clientSymbol, roomSymbol } from "./symbols";
-  import type { Client, Room } from "@liveblocks/client";
-  import { getContext, onDestroy, setContext } from "svelte";
+	// @ts-nocheck
+	import { clientSymbol, roomSymbol } from './symbols';
+	import type { Client, Room } from '@liveblocks/client';
+	import { getContext, onDestroy, setContext } from 'svelte';
+	import type { Presence } from '$lib/types';
 
-  export let id: string;
-  export let defaultPresence = () => ({});
+	export let id: string;
+	export let initialPresence: Presence = {};
 
-  if (!id) {
-    throw new Error("RoomProvider requires an id");
-  }
+	if (!id) {
+		throw new Error('RoomProvider requires an id');
+	}
 
-  const client = getContext<Client>(clientSymbol);
+	const client = getContext<Client>(clientSymbol);
 
-  if (client) {
-    const room = client.enter(id, defaultPresence());
+	if (client) {
+		const room = client.enter(id, { initialPresence });
 
-    setContext<Room>(roomSymbol, room);
+		setContext<Room>(roomSymbol, room);
 
-    onDestroy(() => {
-      client.leave(id);
-    });
-  }
+		onDestroy(() => {
+			client.leave(id);
+		});
+	}
 </script>
 
 <slot />

frontend/src/routes/+/+page.svelte

@@ -9,7 +9,8 @@
 	import { PUBLIC_API_BASE } from '$env/static/public';
 	import { selectedRoomID, toggleAbout } from '$lib/store';
 	import type { RoomResponse } from '$lib/types';
-	import { MAX_CAPACITY } from '$lib/constants';
+	import { MAX_CAPACITY, CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
+	import { Status } from '$lib/types';
 
 	let loading = true;
 	let client: Client;
@@ -24,6 +25,7 @@
 
 		updateRooms();
 	});
+
 	async function updateRooms() {
 		loading = true;
 		const roomidParam = new URLSearchParams(window.location.search).get('roomid');
@@ -42,14 +44,27 @@
 		loading = false;
 		return { rooms };
 	}
+	const initialPresence = {
+		cursor: null,
+		frame: {
+			x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
+			y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
+		},
+		status: Status.dragging,
+		currentPrompt: ''
+	};
 </script>
 
-<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
+<About
+	classList={$toggleAbout || loading ? 'flex' : 'hidden'}
+	on:click={() => ($toggleAbout = false)}
+	{loading}
+/>
 
 {#if !loading}
 	<LiveblocksProvider {client}>
 		{#if roomId}
-			<RoomProvider id={roomId}>
+			<RoomProvider id={roomId} {initialPresence}>
 				<App />
 			</RoomProvider>
 		{:else}
@@ -59,8 +74,4 @@
 			</div>
 		{/if}
 	</LiveblocksProvider>
-{:else}
-	<div class="flex flex-col items-center justify-center h-full">
-		<h1 class="text-2xl font-bold">Loading...</h1>
-	</div>
 {/if}

frontend/src/routes/+page.svelte

@@ -9,7 +9,8 @@
 	import { PUBLIC_API_BASE } from '$env/static/public';
 	import { selectedRoomID, toggleAbout } from '$lib/store';
 	import type { RoomResponse } from '$lib/types';
-	import { MAX_CAPACITY } from '$lib/constants';
+	import { MAX_CAPACITY, CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
+	import { Status } from '$lib/types';
 
 	let loading = true;
 	let client: Client;
@@ -24,6 +25,7 @@
 
 		updateRooms();
 	});
+
 	async function updateRooms() {
 		loading = true;
 		const roomidParam = new URLSearchParams(window.location.search).get('roomid');
@@ -42,14 +44,27 @@
 		loading = false;
 		return { rooms };
 	}
+	const initialPresence = {
+		cursor: null,
+		frame: {
+			x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
+			y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
+		},
+		status: Status.dragging,
+		currentPrompt: ''
+	};
 </script>
 
-<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
+<About
+	classList={$toggleAbout || loading ? 'flex' : 'hidden'}
+	on:click={() => ($toggleAbout = false)}
+	{loading}
+/>
 
 {#if !loading}
 	<LiveblocksProvider {client}>
 		{#if roomId}
-			<RoomProvider id={roomId}>
+			<RoomProvider id={roomId} {initialPresence}>
 				<App />
 			</RoomProvider>
 		{:else}
@@ -59,8 +74,4 @@
 			</div>
 		{/if}
 	</LiveblocksProvider>
-{:else}
-	<div class="flex flex-col items-center justify-center h-full">
-		<h1 class="text-2xl font-bold">Loading...</h1>
-	</div>
 {/if}