wait render and clean mask

frontend/src/lib/App.svelte

@@ -10,7 +10,13 @@
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
 	import type { PromptImgKey } from '$lib/types';
 	import { Status } from '$lib/types';
-	import { loadingState, currZoomTransform, maskEl, selectedRoomID } from '$lib/store';
+	import {
+		loadingState,
+		currZoomTransform,
+		maskEl,
+		selectedRoomID,
+		isRenderingCanvas
+	} from '$lib/store';
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
 	import { base64ToBlob, uploadImage } from '$lib/utils';
 	import { nanoid } from 'nanoid';
@@ -26,7 +32,7 @@
 
 	let showModal = false;
 
-	$: isLoading = $myPresence?.status === Status.loading || false;
+	$: isLoading = $myPresence?.status === Status.loading || $isRenderingCanvas || false;
 
 	function onPrompt() {
 		if (!isLoading && !showModal) {

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -59,7 +59,7 @@
 							<People />
 							<span> players </span>
 						</li>
-						{#each $rooms as room, i}
+						{#each $rooms as room}
 							<li>
 								<!-- svelte-ignore a11y-invalid-attribute -->
 								<a
@@ -73,7 +73,7 @@
 											<Pin />
 										{/if}
 									</span>
-									<span>room {room.room_id.split('-')[3]} </span>
+									<span>{room.room_id} </span>
 									<span />
 									<span />
 									<span>{room.users_count} / {MAX_CAPACITY}</span>
@@ -93,7 +93,7 @@
 					<div class="grid-row gap-2">
 						<Room />
 						<span>
-							room {selectedRoom?.room_id.split('-')[3]}
+							{selectedRoom?.room_id}
 						</span>
 						<span />
 						<People />

frontend/src/lib/PaintCanvas.svelte

@@ -4,7 +4,7 @@
 	import { select } from 'd3-selection';
 	import { onMount } from 'svelte';
 	import { PUBLIC_UPLOADS } from '$env/static/public';
-	import { currZoomTransform, canvasEl } from '$lib/store';
+	import { currZoomTransform, canvasEl, isRenderingCanvas } from '$lib/store';
 
 	import { useMyPresence, useObject } from '$lib/liveblocks';
 	import type { PromptImgObject } from '$lib/types';
@@ -138,10 +138,11 @@
 		id: string;
 	};
 	function renderImages(promptImgList: PromptImgObject[]) {
-		Promise.all(
+		$isRenderingCanvas = true;
+		Promise.allSettled(
 			promptImgList.map(
 				({ imgURL, position, id }) =>
-					new Promise<ImageRendered>((resolve) => {
+					new Promise<ImageRendered>((resolve, reject) => {
 						const img = new Image();
 						img.crossOrigin = 'anonymous';
 						img.onload = () => {
@@ -149,16 +150,23 @@
 							canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
 							resolve(res);
 						};
+						img.onerror = (err) => {
+							reject(err);
+						};
 						img.src = `${PUBLIC_UPLOADS}/${imgURL}`;
 					})
 			)
-		).then((images) => {
+		).then((values) => {
+			const images = values
+				.filter((v) => v.status === 'fulfilled')
+				.map((v) => (v as PromiseFulfilledResult<ImageRendered>).value);
 			images.forEach(({ img, position, id }) => {
 				// keep track of images already rendered
 				//re draw in order
 				imagesOnCanvas.add(id);
 				canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
 			});
+			$isRenderingCanvas = false;
 		});
 	}
 	function zoomed(e: Event) {

frontend/src/lib/PaintFrame.svelte

@@ -10,7 +10,7 @@
 	import { onMount, createEventDispatcher } from 'svelte';
 
 	import { useMyPresence } from '$lib/liveblocks';
-	import { canvasEl, maskEl, loadingState } from '$lib/store';
+	import { canvasEl, maskEl, loadingState, isRenderingCanvas } from '$lib/store';
 
 	import { Status } from './types';
 	const myPresence = useMyPresence({ addToHistory: true });
@@ -42,6 +42,9 @@
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
 	};
+	$: if (!$isRenderingCanvas) {
+		cleanMask();
+	}
 
 	$: if ($loadingState === 'Complete' && !dragEnabled) {
 		cleanMask();
@@ -293,7 +296,8 @@
 	<div
 		bind:this={frameElement}
 		class="absolute top-0 left-0 ring-8 hand
-		{dragEnabled ? 'block cursor-move' : 'hidden cursor-pointer'}"
+		{dragEnabled ? 'block' : 'hidden'}
+		{isLoading ? 'cursor-wait' : dragEnabled ? 'block cursor-move' : 'hidden cursor-pointer'}"
 		style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 	/>
 </div>

frontend/src/lib/store.ts

@@ -6,4 +6,5 @@ export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
 export const canvasEl = writable<HTMLCanvasElement>();
 export const maskEl = writable<HTMLCanvasElement>();
 export const selectedRoomID = writable<string | null>();
-export const toggleAbout = writable<boolean>(false);
+export const toggleAbout = writable<boolean>(false);
+export const isRenderingCanvas = writable<boolean>(true);