Skip to content

[perf] perf: replace static inline styles in Dashboard loading states with CSS classes#115

Open
github-actions[bot] wants to merge 1 commit intomainfrom
perf/dashboard-loading-css-classes-956800eabd67e31f
Open

[perf] perf: replace static inline styles in Dashboard loading states with CSS classes#115
github-actions[bot] wants to merge 1 commit intomainfrom
perf/dashboard-loading-css-classes-956800eabd67e31f

Conversation

@github-actions
Copy link
Copy Markdown

Summary

Replaces 2 static inline style=\{\{}} objects in Dashboard components with reusable CSS module classes. This is a Tier 2 render performance fix.


Tier: 2 — Render & API Performance

Baseline: Both components had static inline style objects evaluated on every render:

File Location Properties
profile-activity-section.tsx line 50–55 display, alignItems, justifyContent, padding (4 props)
welcome-section.tsx line 21 display, verticalAlign (2 props)

Fix:

Added two new utility classes to Dashboard.module.css:

/* Loading spinner centered in a section */
.sectionLoadingCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

/* Inline skeleton placeholder (e.g. username in welcome heading) */
.skeletonInline {
  display: inline-block;
  vertical-align: middle;
}
```

- `profile-activity-section.tsx`: loading spinner `(div)` uses `.sectionLoadingCenter`
- `welcome-section.tsx`: `(SkeletonBox)` uses `.skeletonInline`

**Why this improves performance:**

Static inline `style=\{\{ }}` object literals create a **new JavaScript object on every render**. React must shallow-compare the old and new style objects, then apply individual style property updates. CSS module classes are parsed once by the browser at stylesheet load time and referenced by class name — no object allocation, no per-property comparison.

**Result:** Eliminated 6 inline style properties across 2 Dashboard components (both on the hot `/` dashboard route) with zero allocation cost at render time.

**Verification:**

```
npx tsc --noEmit  ✅ clean
npm run lint      ✅ clean
npm test          ✅ 60 test files pass (3 pre-existing failures in github/client.test.ts require GITHUB_TOKEN env var, unrelated to this change)

Files changed:

  • src/components/Dashboard/Dashboard.module.css — added .sectionLoadingCenter and .skeletonInline
  • src/components/Dashboard/profile-activity-section.tsx — removed 4-property inline style
  • src/components/Dashboard/welcome-section.tsx — removed 2-property inline style

Generated by Daily Performance Improver

…SS classes

Replace two static inline style objects with reusable CSS classes in Dashboard.module.css:
1. profile-activity-section.tsx: 4-property loading spinner wrapper -> .sectionLoadingCenter
2. welcome-section.tsx: 2-property SkeletonBox inline positioning -> .skeletonInline

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