Skip to content

[perf] Replace repeated inline icon styles with shared CSS class in FocusItem cards#29

Merged
chrisreddington merged 1 commit intomainfrom
perf/focusitem-inline-styles-to-css-class-3e9f6410668f3f83
Feb 24, 2026
Merged

[perf] Replace repeated inline icon styles with shared CSS class in FocusItem cards#29
chrisreddington merged 1 commit intomainfrom
perf/focusitem-inline-styles-to-css-class-3e9f6410668f3f83

Conversation

@github-actions
Copy link
Copy Markdown

Tier 2 — Render Performance: Inline Styles → CSS Class

Baseline

GoalCard, TopicCard, and ChallengeCard each contained an identical inline style object on the icon-wrapper <span>:

// GoalCard.tsx & TopicCard.tsx
<span style=\{\{ marginRight: '4px', display: 'inline-flex' }}>(CheckIcon size={12} /)</span>

// ChallengeCard.tsx (note: number literal instead of string)
<span style=\{\{ marginRight: 4, display: 'inline-flex' }}>(ClockIcon size={12} /)</span>

Inline style objects are allocated on every render — even though the values never change. Because these cards are rendered multiple times on the dashboard (one instance per goal / topic / challenge), the cost is multiplied per render cycle.

Fix

Added a single shared .iconInline class to the pre-existing FocusItem.module.css (already imported by all three card files):

.iconInline {
  margin-right: var(--base-size-4);  /* 4px — uses design token */
  display: inline-flex;
}

Replaced the three inline style attributes:

<span className={styles.iconInline}>(CheckIcon size={12} /)</span>
```

As a bonus, `ChallengeCard` was using the number `4` instead of the string `'4px'` — the CSS class uses the correct `var(--base-size-4)` token consistently with the rest of the design system.

### Result

- Three style-object allocations eliminated per render cycle (×number of rendered cards)
- Computed CSS is identical — zero visual change
- Aligns with Primer React guidance: prefer CSS classes over `style=\{\{}}`
- `var(--base-size-4)` design token used instead of magic number

### Verification

```
npx tsc --noEmit    clean
npm test            603 tests pass (10 pre-existing failures in client.test.ts require GITHUB_TOKEN  unrelated to this change)

Files changed:

  • src/components/FocusItem/FocusItem.module.css — add .iconInline class
  • src/components/FocusItem/GoalCard.tsx — use styles.iconInline
  • src/components/FocusItem/TopicCard.tsx — use styles.iconInline
  • src/components/FocusItem/ChallengeCard.tsx — use styles.iconInline

Generated by Daily Performance Improver

…ards

GoalCard, TopicCard and ChallengeCard each had an identical inline style
object `{ marginRight: '4px', display: 'inline-flex' }` on the icon wrapper
span (ChallengeCard used the number 4 instead of '4px').

Inline style objects are allocated on every render pass, so every render
of each card creates a fresh object just to convey two static CSS rules.
Cards are rendered multiple times on the dashboard (once per goal/topic/
challenge), so the allocation cost is multiplied.

Fix: add a shared .iconInline class to the existing FocusItem.module.css
which all three cards already import, then replace the three inline style
attributes with className={styles.iconInline}.

- Zero new dependencies
- Zero behaviour change (same computed styles)
- Eliminates three object allocations per render cycle per card instance

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

Pull request created: #29

@chrisreddington chrisreddington marked this pull request as ready for review February 24, 2026 21:03
@chrisreddington chrisreddington merged commit 334926e into main Feb 24, 2026
3 checks passed
@chrisreddington chrisreddington deleted the perf/focusitem-inline-styles-to-css-class-3e9f6410668f3f83 branch February 24, 2026 21:03
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