Skip to content

[perf] Replace StatusBadge inline styles with CSS module#118

Draft
github-actions[bot] wants to merge 1 commit intomainfrom
perf/status-badge-css-module-80aa265d388a618c
Draft

[perf] Replace StatusBadge inline styles with CSS module#118
github-actions[bot] wants to merge 1 commit intomainfrom
perf/status-badge-css-module-80aa265d388a618c

Conversation

@github-actions
Copy link
Copy Markdown

Tier 2 — Render Performance: Eliminate per-render style object allocation

Baseline

StatusBadge spread two plain objects on every render:

// Before: creates a new object on every render call
<span className="f6" style=\{\{ ...baseStyles, ...variantStyles[variant] }}>

Two module-level React.CSSProperties objects (baseStyles, variantStyles) were defined as constants but then spread into a new object on every render, which:

  • Allocates heap memory every render cycle
  • Prevents the React reconciler from short-circuiting style diffing (new object reference each time)
  • Keeps inline JS-side style computation when CSS handles it better

StatusBadge is used widely — every AI activity event, TTFT badge, conversation badge, model badge, and MCP tools badge renders it. In the AIActivityPanel (which shows streaming data), this component can re-render many times per second.

Fix

Moved all styles to a CSS module (StatusBadge.module.css) with one base class (.badge) and four variant classes (.success, .warning, .info, .neutral), then replaced the inline style with static class name lookup:

// After: zero object allocation — className string is a static reference
<span className={`\$\{styles.badge} \$\{styles[variant]}`}>
```

**Changes:**
- `src/components/StatusBadge/StatusBadge.module.css` — new CSS module with base + variant styles using Primer CSS custom properties
- `src/components/StatusBadge/index.tsx` — removed `baseStyles`/`variantStyles` constants and the `style` prop; added `styles` import; 30 lines deleted

### Result

- Zero heap object allocation per render in `StatusBadge`
- CSS styles cached by the browser and applied via class lookup (O(1))
- Smaller JS bundle: moved ~20 lines of style data from JS to CSS
- TypeScript clean (`npx tsc --noEmit` — no new errors)
- ESLint clean (`npm run lint` — passes)

### Verification

```
npx tsc --noEmit  ✅ no new errors
npm run lint      ✅ passes

Note: npm test and npm run build fail in this CI environment due to pre-existing issues: missing GITHUB_TOKEN auth for some test cases, and a native module resolution error in @github/copilot-sdk. Neither is related to this change.

Generated by Daily Performance Improver

Replace runtime style object creation in StatusBadge with a static CSS
module. The previous code spread two style objects on every render:
  style={{ ...baseStyles, ...variantStyles[variant] }}
This allocates two new plain objects per render cycle.

With a CSS module, variant styles are defined once in static CSS and
applied via class name lookup — zero object allocation per render.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions
Copy link
Copy Markdown
Author

Pull request created: #118

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants