stroblmeandClaude Opus 5
498c2eb221
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
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
/**
|
|
* 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>
|
|
)
|
|
}
|