[perf] Replace 8 inline style objects in daily-focus-section with CSS classes#105
Draft
github-actions[bot] wants to merge 1 commit intomainfrom
Draft
[perf] Replace 8 inline style objects in daily-focus-section with CSS classes#105github-actions[bot] wants to merge 1 commit intomainfrom
github-actions[bot] wants to merge 1 commit intomainfrom
Conversation
…classes
Each inline style={{ ... }} object is allocated on every render, forcing
the browser to diff and reapply the style on every re-render of the
Dashboard — which happens on every habit/challenge/goal state change.
Replace with static CSS classes in Dashboard.module.css:
- .iconInline (marginRight: 4px, display: inline-flex) — AI-Powered label icon
- .skeletonLoadingRow (marginBottom: 8px) — 3 loading state header rows
- .skeletonMbSm (marginBottom: 8px) — challenge skeleton SkeletonBox
- .skeletonMbMd (marginBottom: 16px) — goal skeleton SkeletonBox
- .skeletonFlex (flex: 1) — topic skeleton flex wrapper div
- .skeletonMbXs (marginBottom: 4px) — topic skeleton inner SkeletonBox
No behaviour change. Zero new dependencies.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Author
|
Pull request created: #105 |
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 — Inline Style Elimination
Baseline
daily-focus-section.tsxcontained 8 static inlinestyle=\{\{}}objects in the Dashboard's most frequently rendered component. Every time habit/challenge/goal state changes (including loading transitions), React creates a new object literal for each inline style, forcing the browser to:Since the dashboard re-renders on every focus state change (streamed AI responses, tab switches, skeleton states), these costs compound.
Fix
Added 6 new utility CSS classes to
Dashboard.module.css:.iconInlinemargin-right: 4px; display: inline-flex.skeletonLoadingRowmargin-bottom: 8pxStackrows.skeletonMbSmmargin-bottom: 8pxSkeletonBox.skeletonMbMdmargin-bottom: 16pxSkeletonBox.skeletonFlexflex: 1div.skeletonMbXsmargin-bottom: 4pxSkeletonBoxAll values use Primer CSS custom properties (e.g.
var(--base-size-8, 8px)) for token consistency.Result
style=\{\{}}objects eliminated from the dashboard's hot render pathVerification
No behaviour change. No new dependencies.