Skip to content

[perf] Replace 3 static inline styles in ExportDialog with CSS classes#53

Merged
chrisreddington merged 1 commit intomainfrom
perf/remove-inline-styles-export-dialog-c3840ec2e8cfe956
Mar 3, 2026
Merged

[perf] Replace 3 static inline styles in ExportDialog with CSS classes#53
chrisreddington merged 1 commit intomainfrom
perf/remove-inline-styles-export-dialog-c3840ec2e8cfe956

Conversation

@github-actions
Copy link

@github-actions github-actions bot commented Mar 3, 2026

Tier 2 — Render Performance: Inline Style Elimination

Baseline

export-dialog.tsx contained 3 static style=\{\{}} objects that created new object literals on every render:

// Loading state wrapper
(Stack style=\{\{ padding: '24px 0' }})

// Visibility label
<span style=\{\{ fontWeight: 600 }}>Repository</span>

// Visibility caption
<p style=\{\{ fontSize: '12px', color: 'var(--fgColor-muted)', margin: 0 }}>
```

### Fix

Moved all 3 static style objects to the existing `ExportDialog.module.css` as named classes:

| Inline style | New CSS class |
|---|---|
| `padding: '24px 0'` | `.loadingContainer` |
| `fontWeight: 600` | `.visibilityLabel` |
| `fontSize: '12px'; color: muted; margin: 0` | `.visibilityCaption` |

### Why This Improves Performance

Static `style=\{\{}}` objects are re-created on every render call, adding GC pressure and bypassing the browser's class-based style cache. CSS module classes are resolved once at parse time and reused across renders with no allocation cost.

### Result

`export-dialog.tsx` now has **zero** inline `style=\{\{}}` props. The `ExportDialog.module.css` module grows by 14 lines (3 new utility classes).

### Verification

```
npx tsc --noEmit    clean
npm run lint        clean
npm test            1041 passed (10 pre-existing failures in client.test.ts unrelated to this change  require gh auth which is unavailable in CI)

Files Changed

  • src/components/ChallengeSandbox/ExportDialog.module.css — 3 new classes added
  • src/components/ChallengeSandbox/export-dialog.tsx — 3 inline styles replaced with className references

Generated by Daily Performance Improver

Move static inline style objects to ExportDialog.module.css:
- Stack padding '24px 0' → .loadingContainer
- span fontWeight 600 → .visibilityLabel
- p fontSize/color/margin → .visibilityCaption

Eliminates per-render object allocations from static style props,
allowing the browser's style system to cache class-based styles.

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

github-actions bot commented Mar 3, 2026

Pull request created: #53

@chrisreddington chrisreddington merged commit a637e98 into main Mar 3, 2026
3 checks passed
@chrisreddington chrisreddington deleted the perf/remove-inline-styles-export-dialog-c3840ec2e8cfe956 branch March 3, 2026 20:28
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.

1 participant