better status

frontend/src/lib/App.svelte

@@ -221,7 +221,7 @@
 			{#each [...$others] as { connectionId, presence } (connectionId)}
 				{#if (presence?.status === Status.loading || presence?.status === Status.prompting || presence?.status === Status.masking) && presence?.frame}
 					<Frame
-						isLoading={presence?.status === Status.loading}
+						status={presence.status}
 						position={presence?.frame}
 						prompt={presence?.currentPrompt}
 						transform={$currZoomTransform}

frontend/src/lib/Frame.svelte

@@ -2,11 +2,13 @@
 	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
 	import { FRAME_SIZE } from '$lib/constants';
 	import type { ZoomTransform } from 'd3-zoom';
+	import { Status } from '$lib/types';
 
 	export let transform: ZoomTransform;
 	export let position = { x: 0, y: 0 };
 	export let prompt = '';
-	export let isLoading = false;
+	export let status: Status;
+
 	$: coord = {
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
@@ -21,14 +23,17 @@
 >
 	<div class="pointer-events-none touch-none">
 		<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10">
-			{#if isLoading}
+			{#if status === Status.loading || status === Status.processing}
 				<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
 				<p class="text-4xl">Someone is painting:</p>
-			{:else}
+			{:else if status === Status.masking}
+				<p class="text-4xl">Someone is masking</p>
+			{:else if status === Status.prompting}
 				<p class="text-4xl">Someone is typing:</p>
 			{/if}
-
-			<span class="italic font-normal line-clamp-4">"{prompt}"</span>
+			{#if prompt}
+				<span class="italic font-normal line-clamp-4">"{prompt}"</span>
+			{/if}
 		</div>
 	</div>
 </div>