fix: css fixes

web/src/lib/components/kit/SchemaResultTile.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import SchemaTextResult from "./SchemaTextResult.svelte";
 	import { toDataUrl } from "$lib/core/io";
 	import type { PixelImage } from "$lib/core/types";
-	import { Check } from "@lucide/svelte";
+	import { Check, RefreshCw } from "@lucide/svelte";
+	import SchemaTextResult from "./SchemaTextResult.svelte";
 
 	interface Props {
 		resultKind?: "image" | "text" | "verdict";
@@ -27,7 +27,14 @@
 </script>
 
 <figure class="tile" style:grid-column={wide ? "1 / -1" : undefined}>
-	<figcaption><span>RESULT {running ? "…" : ""}</span></figcaption>
+	<figcaption>
+		<span>
+			RESULT
+			{#if running}
+				<RefreshCw class="rotating" size="16" />
+			{/if}
+		</span>
+	</figcaption>
 	<div class="canvas" class:checker={resultKind === "image"}>
 		{#if resultKind === "text" && textResult}
 			<div class="text-result-wrap">
@@ -65,6 +72,9 @@
 		margin-bottom: var(--space-m);
 		font: var(--font-size-s) var(--font-mono);
 		color: var(--color-text-muted);
+		& :global(.rotating) {
+			animation: rotate var(--duration-l) linear infinite;
+		}
 	}
 	.canvas {
 		display: flex;
@@ -72,7 +82,7 @@
 		justify-content: center;
 		min-height: clamp(var(--space-brand), 30vh, 60vh);
 		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius-m);
+		border-radius: var(--radius-s);
 		overflow: hidden;
 		background: var(--color-background-muted);
 		color: var(--color-text-muted);
@@ -98,4 +108,13 @@
 		padding: var(--space-l);
 		box-sizing: border-box;
 	}
+
+	@keyframes rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 </style>