Skip to content

[perf] Replace inline style in Providers root wrapper with CSS module#128

Draft
github-actions[bot] wants to merge 1 commit intomainfrom
perf/providers-css-module-56fb189388a1b175
Draft

[perf] Replace inline style in Providers root wrapper with CSS module#128
github-actions[bot] wants to merge 1 commit intomainfrom
perf/providers-css-module-56fb189388a1b175

Conversation

@github-actions
Copy link
Copy Markdown

Tier 2 — Render Performance: Eliminate inline style object on root Providers wrapper

Baseline

src/app/providers.tsx contained this inline style on the root (div) that wraps every page in the application:

(div style=\{\{ minHeight: '100vh', backgroundColor: 'var(--bgColor-default)' }})

Because this is a 'use client' component and the object literal is defined inline, JavaScript creates a new object on every render of the Providers tree. This triggers an inline style recalculation in the browser on each re-render, even though the values never change.

Fix

Created src/app/providers.module.css with a static .appRoot CSS class:

.appRoot {
  min-height: 100vh;
  background-color: var(--bgColor-default);
}

Then replaced the inline style with a CSS class reference:

import styles from './providers.module.css';

// Before:
(div style=\{\{ minHeight: '100vh', backgroundColor: 'var(--bgColor-default)' }})

// After:
(div className={styles.appRoot})
```

### Why this improves performance

- The inline style object `{ minHeight: '100vh', backgroundColor: '...' }` was heap-allocated on every render of the Providers component, which runs for **every page in the app** (it's the root layout wrapper).
- A CSS module class is resolved once at build time and referenced as a static string — zero object allocations at render time.
- Browsers apply CSS classes through the CSSOM without triggering inline style recalculations.

### Result

- TypeScript compilation: ✅ Clean (no errors introduced)
- Tests: ✅ 1025/1035 pass — the 10 failures are pre-existing GitHub auth test failures unrelated to this change (`src/lib/github/client.test.ts`, `profile.test.ts`, `workspace-export.test.ts`)
- Bundle size: No change in JS bundle (CSS module class replaces an inline style — net neutral on bundle, small CSS addition)

### Verification

```
npx tsc --noEmit   No new errors
npm test           1025 passed, 10 pre-existing failures unchanged

Files changed: src/app/providers.tsx, src/app/providers.module.css (new)

Generated by Daily Performance Improver

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

Pull request created: #128

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.

0 participants