Add small and inline Spinner variants.

[michelinewu]

Shared Spinner Inline and Small Variants

Stack: master ← mw_fix_ss ← mw_ms_toggle_1

Issues

There was no way to render the spinner in flow. .container is position: absolute with width/height at 100% and a background colour, so every <Spinner /> covers its positioning parent. There was no variant that sits inline next to other content and takes only the space it needs.

Size was fixed at the stylesheet level.

.s-spinner--small existed but did nothing. The shared spinnerSvg constant in Spinner.tsx has always rendered class="s-spinner--small" on its <svg>, and loader.less defined .s-spinner--large (80×56) but never a matching --small rule.

Fixes

inline prop adds a .inline class that undoes the overlay.

width and height props are applied to the container's inline style.

.s-spinner--small gets its rule

Files changed: app/components-react/shared/Spinner.tsx, app/components-react/shared/Spinner.m.less, app/styles/loader.less

Performance Implications

None.

[Copilot]

Pull request overview

Adds new rendering options for the shared React <Spinner /> so it can be used inline (non-overlay) and introduces a “small” size rule for the underlying SVG class used by the spinner markup.

Changes:

• Add inline, width, and height props to app/components-react/shared/Spinner.tsx and apply .inline styling.
• Add .inline container styling in Spinner.m.less to undo the overlay behavior.
• Add missing .s-spinner--small sizing rule in app/styles/loader.less.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
app/styles/loader.less	Adds missing .s-spinner--small dimensions (and minor formatting change to import).
app/components-react/shared/Spinner.tsx	Adds inline and size-related props and applies them to the outer spinner container.
app/components-react/shared/Spinner.m.less	Adds an .inline variant to make the spinner participate in normal flow instead of overlaying its parent.

Suppressed comments (1)

app/components-react/shared/Spinner.tsx:72

• Setting width/height on the outer container doesn’t actually resize the spinner graphic because the injected SVG is always class="s-spinner--small" and loader.less now fixes that class to 15×15. If the goal is to make spinner size configurable, the sizing needs to apply to the SVG (or its class) rather than just the container; otherwise width/height is likely to be surprising/misleading to callers.

        <div
          className={classNames}
          key="spinner"
          style={{ transitionDelay: `${p.delay}ms`, width: p.width, height: p.height }}
        >

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[bundlemon]

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	renderer.(hash).js	10.32MB (+580B +0.01%)	-

Unchanged files (3)

Status	Path	Size	Limits
✅	vendors~renderer.(hash).js	4.67MB	-
✅	updater.js	115.29KB	-
✅	guest-api.js	40.23KB	-

Total files change +580B 0%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.