diff --git a/docs/STYLEGUIDE.md b/docs/STYLEGUIDE.md index e21aaa89228..794e5c4c640 100644 --- a/docs/STYLEGUIDE.md +++ b/docs/STYLEGUIDE.md @@ -264,7 +264,7 @@ Use this rubric when reviewing any Orca IDE screen, screenshot, or prototype. A - **Layout density:** avoid jamming controls together. Preserve breathing room around the primary workflow, reduce competing buttons, and keep toolbar groups visually distinct. Dense screens are acceptable only when grouping, alignment, and hierarchy make scanning faster. - **Cards and containers:** cards must be visually distinct from their parent surface through the existing `card`/`border` treatment. Avoid nesting cards inside cards. If a section is not a repeated item, modal, or framed tool, consider an unframed layout or full-width band instead. - **Side-by-side layouts:** default to row-by-row layouts for complex workflows because they are easier to align and scan. Use side-by-side layouts only when space is constrained or comparison is the point, then polish column widths, baselines, and wrapping states carefully. -- **Animation:** use subtle animation to soften expanding/collapsing content and prevent jumpy layout changes. Animation should clarify continuity, not decorate. Respect reduced-motion settings. +- **Animation:** use subtle animation to soften expanding/collapsing content and prevent jumpy layout changes. Animation should clarify continuity, not decorate. Respect reduced motion element by element: turn movement off with `motion-reduce:` (slides, rotations, size changes); give spinners, pulses and progress indicators a still state that still says "working" (`LoadingSpinner` does this for spinners) instead of freezing them; short opacity fades can stay. - **SSH and latency:** assume actions may run remotely. Disable submit controls immediately, delay visible loading feedback when appropriate, and keep focus stable while remote data arrives. ### 1. Match in-flight feedback to perceived duration diff --git a/src/renderer/src/components/LoadingSpinner.tsx b/src/renderer/src/components/LoadingSpinner.tsx new file mode 100644 index 00000000000..7fa9d17d553 --- /dev/null +++ b/src/renderer/src/components/LoadingSpinner.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { Hourglass, Loader2 } from 'lucide-react' +import { cn } from '@/lib/utils' + +// Why: a spinner frozen by reduced motion reads as stuck, so the still state is +// a different icon that says "working" without moving. +export function LoadingSpinner({ className }: { className?: string }): React.JSX.Element { + return ( + <> +