loading status

frontend/src/lib/Frame.svelte

@@ -10,6 +10,7 @@
 	export let loadingState = '';
 	export let interactive = false;
 	export let isDragging = false;
+	export let isLoading = false;
 	$: coord = {
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
@@ -17,19 +18,26 @@
 </script>
 
 <div
-	class="frame z-0 flex relative
+	class="frame z-0 relative grid grid-cols-3 grid-rows-3
 	{!interactive ? 'pointer-events-none touch-none' : ''}
 	{isDragging ? 'cursor-grabbing' : 'cursor-grab'}"
 	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); border-color: ${color};`}
 >
 	{#if loadingState}
-		<span class="text-white drop-shadow-lg">{loadingState}</span>
+		<div class="col-span-2 row-start-1">
+			<span class="text-white drop-shadow-lg">{loadingState}</span>
+		</div>
 	{/if}
 	<div class="small-frame z-0 flex relative" />
-	<LoadingIcon />
+	{#if isLoading}
+		<div class="col-start-2 row-start-2">
+			<LoadingIcon />
+		</div>
+	{/if}
+
 	<h2 class="text-lg">Click to paint</h2>
 
-	<div class="absolute bottom-0 font-bold">{prompt}</div>
+	<div class="absolute bottom-0 font-bold text-lg">{prompt}</div>
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/LoadingIcon.svelte

@@ -3,7 +3,7 @@
 	fill="none"
 	width="50"
 	viewBox="0 0 24 24"
-	class="animate-spin max-w-[1rem] inline-block"
+	class="animate-spin block w-full opacity-60"
 >
 	<path
 		fill="currentColor"

frontend/src/lib/PaintFrame.svelte

@@ -23,6 +23,7 @@
 	let frameElement: HTMLDivElement;
 	let isDragging = false;
 	$: prompt = $myPresence?.currentPrompt;
+	$: isLoading = $myPresence?.isLoading || false;
 
 	onMount(() => {
 		function dragstarted() {
@@ -89,6 +90,7 @@
 		loadingState={$loadingState}
 		{prompt}
 		{transform}
+		{isLoading}
 		{isDragging}
 		{interactive}
 	/>