1 files changed, 39 insertions, 0 deletions
diff --git a/packages/desktop/src/components/spinner.tsx b/packages/desktop/src/components/spinner.tsx
new file mode 100644
index 000000000..5fc4cda64
--- /dev/null
+++ b/packages/desktop/src/components/spinner.tsx
@@ -0,0 +1,39 @@
+import { ComponentProps, For } from "solid-js"
+
+export function Spinner(props: { class?: string; classList?: ComponentProps<"div">["classList"] }) {
+  const squares = Array.from({ length: 16 }, (_, i) => ({
+    id: i,
+    x: (i % 4) * 4,
+    y: Math.floor(i / 4) * 4,
+    delay: Math.random() * 3,
+    duration: 2 + Math.random() * 2,
+  }))
+
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      classList={{
+        "size-4": true,
+        ...(props.classList ?? {}),
+        [props.class ?? ""]: !!props.class,
+      }}
+      fill="currentColor"
+    >
+      <For each={squares}>
+        {(square) => (
+          <rect
+            x={square.x}
+            y={square.y}
+            width="3"
+            height="3"
+            rx="1"
+            style={{
+              animation: `pulse-opacity ${square.duration}s ease-in-out infinite`,
+              "animation-delay": `${square.delay}s`,
+            }}
+          />
+        )}
+      </For>
+    </svg>
+  )
+}