Use the brand loading mark instead of lucide's spinner

Copies index/frontend's FluksioLoader component and its `.fluksio-loader-line` rule into the app (the shadcn duplication model, so the CSS travels with the component) and swaps every Loader2 pending state over: the router's pending screen, the flow dock's Run and Publish, the dashboard editor's Publish, the overview toolbar's Publish-all and LoadingButton. One loading mark across both shells. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01K1moruzue2kTJd3uVisgNk
2026-08-28 15:36:54 +02:00
parent 565d6d2433
commit 498c2eb221
7 changed files with 90 additions and 19 deletions
@@ -0,0 +1,44 @@
+/**
+ * FluksioLoader: the app's shared loading mark.
+ *
+ * The brand mark — four neurons in a ring — drawn as one continuous stroke
+ * that traces itself and wipes away in a loop (see the `.fluksio-loader-line`
+ * rule + `fluksio-draw` keyframes in index.css, which also guard
+ * `prefers-reduced-motion`: `MotionConfig` covers JS animations, not CSS ones).
+ * Renders a bare <svg> so it drops in for a lucide icon: size it with a
+ * Tailwind `size-*` class and color it via a `text-*` class (everything is
+ * currentColor).
+ */
+
+/**
+ * The ring, clockwise from the top node: a 45° connector, then 270° around the
+ * node it lands on, four times over. Geometry from `assets/fluksio-light.svg`
+ * — same node centres and radius, with the connectors pulled onto the circles
+ * so the whole mark is a single subpath and the dash traces it in one lap.
+ *
+ * Stroke weight is the mark's own 1.5 rather than the weight 2 of the glyphs in
+ * `components/icons/`: at 2 the node rings close up into dots.
+ */
+const RING =
+  "M 13.71 5.84 L 18.16 10.29 A 2.424 2.424 0 1 1 18.16 13.71 L 13.71 18.16 A 2.424 2.424 0 1 1 10.29 18.16 L 5.84 13.71 A 2.424 2.424 0 1 1 5.84 10.29 L 10.29 5.84 A 2.424 2.424 0 1 1 13.71 5.84 Z"
+
+export function FluksioLoader({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      className={className}
+      role="status"
+      aria-label="Loading"
+      {...props}
+    >
+      <path className="fluksio-loader-line" pathLength={1} d={RING} />
+    </svg>
+  )
+}