[perf] Replace repeated inline icon styles with shared CSS class in FocusItem cards#29
Merged
chrisreddington merged 1 commit intomainfrom Feb 24, 2026
Conversation
…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>
Author
|
Pull request created: #29 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tier 2 — Render Performance: Inline Styles → CSS Class
Baseline
GoalCard,TopicCard, andChallengeCardeach contained an identical inline style object on the icon-wrapper<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
.iconInlineclass to the pre-existingFocusItem.module.css(already imported by all three card files):Replaced the three inline style attributes:
Files changed:
src/components/FocusItem/FocusItem.module.css— add.iconInlineclasssrc/components/FocusItem/GoalCard.tsx— usestyles.iconInlinesrc/components/FocusItem/TopicCard.tsx— usestyles.iconInlinesrc/components/FocusItem/ChallengeCard.tsx— usestyles.iconInline