ux improvements

2026-01-11 20:32:34 +01:00
parent f24e8fc1e9
commit e7fede576c
10 changed files with 595 additions and 115 deletions
@@ -0,0 +1,28 @@
+export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
+  const sizeMap = {
+    small: "16px",
+    medium: "24px",
+    large: "32px"
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
+      <div
+        style={{
+          width: sizeMap[size],
+          height: sizeMap[size],
+          border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite"
+        }}
+      ></div>
+      {text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}