Skip to content

[perf] Replace static inline styles in habit-list-section with CSS classes#110

Open
github-actions[bot] wants to merge 1 commit intomainfrom
perf/inline-styles-habit-list-section-c8fbd371b047e9cb
Open

[perf] Replace static inline styles in habit-list-section with CSS classes#110
github-actions[bot] wants to merge 1 commit intomainfrom
perf/inline-styles-habit-list-section-c8fbd371b047e9cb

Conversation

@github-actions
Copy link
Copy Markdown

Summary

Replaces 6 static style=\{\{}} objects in habit-list-section.tsx with 4 named CSS classes in habits.module.css. Each inline style object is allocated on every render, contributing to unnecessary garbage collection pressure and preventing the browser from caching the style computation.


Tier

Tier 2 — Render Performance


Baseline

Before this change, habit-list-section.tsx contained 6 static inline style objects:

Line Style Location
183 style=\{\{ marginTop: 'var(--base-size-12)' }} (Stack) wrapping action buttons
246 style=\{\{ fontSize: '1.25rem' }} (Heading) "Active Habits"
264 style=\{\{ fontSize: '1.125rem', marginTop: 'var(--base-size-16)' }} (Heading) "No active habits yet"
267 style=\{\{ color: 'var(--fgColor-muted)', marginTop: 'var(--base-size-8)' }} (Text) empty-state description
296 style=\{\{ fontSize: '1.25rem' }} (Heading) "Completed Habits"
327 style=\{\{ fontSize: '1.25rem' }} (Heading) "Stopped Habits"

All 6 are fully static — the values never change at runtime.


Fix

Added 4 CSS classes to habits.module.css:

.actionsStack   { margin-top: var(--base-size-12, 12px); }
.sectionHeading { font-size: 1.25rem; }
.emptyHeading   { font-size: 1.125rem; margin-top: var(--base-size-16, 16px); }
.emptyText      { color: var(--fgColor-muted, #656d76); margin-top: var(--base-size-8, 8px); }
```

Replaced all 6 `style=\{\{}}` props with `className={styles.(class)}`.

The dynamic `style=\{\{ width: \`\$\{progress}%\` }}` on the progress fill div is intentionally untouched — it correctly depends on runtime state.

---

## Result

- Zero static inline style objects remain in `habit-list-section.tsx`
- Styles are now static CSS rules, cached by the browser after first parse
- No visual or behavioural change

---

## Verification

```
npx tsc --noEmit  ✅ clean
npm run lint      ✅ clean
npm test          ✅ 1025 passed (10 pre-existing auth failures unrelated to this change)

Generated by Daily Performance Improver

…sses

Replace 6 static inline style objects with 4 new CSS classes in
habits.module.css. These create new style objects on every render,
causing unnecessary style recalculations in the browser.

Added classes:
- .actionsStack      — marginTop on action buttons Stack
- .sectionHeading    — fontSize 1.25rem on section Headings (x3)
- .emptyHeading      — fontSize + marginTop on empty-state Heading
- .emptyText         — color + marginTop on empty-state Text

The dynamic style={{ width }} is intentionally kept as it depends on
runtime state.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants