Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

perf(invoice-generator): fix high Cumulative Layout Shift (CLS) on desktop and mobile

Chiusa
  • Qualcosa non va?
#159 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Saifjafri212213 ci sta già lavorando.

Dal 20/10/2026.

  • #213 di @Saifjafri212213 — integrata

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
66/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
nextjs, react, typescript
Ambito
frontend, performance

Direzione di ricerca

Start in app/(tools)/invoice-generator/InvoiceGeneratorClient.tsx, where the current state begins as null and the Loading… placeholder section renders until the useEffect reads localStorage. Reproduce the shift with a Lighthouse run on the production URL to confirm the FAQ and CTA sections move. Done when the median CLS is at or below 0.1 on both desktop and mobile, with the skeleton matching the toolbar, editor and preview dimensions.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug hacktoberfest help wanted

Problem

During the baseline performance audit (#28), the Invoice Generator page was found to have severe Cumulative Layout Shift (CLS), failing the Core Web Vitals threshold of CLS ≤ 0.1 on both desktop and mobile.

Affected Production URL

https://tools.codercops.com/invoice-generator

Device

Desktop and Mobile

Measured Evidence

Lighthouse performance audit results (median of 3 runs on 2026-10-14, failing threshold is CLS > 0.1):

  • Desktop Median CLS: 0.554 (individual runs: 0.555, 0.554, 0.554) — FAIL
  • Mobile Median CLS: 0.465 (individual runs: 0.465, 0.465, 0.465) — FAIL
Root Cause / Culprit

Lighthouse identifies body.antialiased > main#main-content > section.mx-auto (the FAQ and CTA sections) as shifting by over 1,000px.

In app/(tools)/invoice-generator/InvoiceGeneratorClient.tsx:

  • The client component initializes const [current, setCurrent] = useState<Invoice | null>(null);.
  • During SSR and initial client render when current === null, it renders a small placeholder card: 
    <section className="mx-auto max-w-7xl w-full px-4 sm:px-6 pb-8">
  <div className="card p-10 text-center text-[var(--fg-muted)] text-[13px]">Loading…</div>
</section>
  • In useEffect, it reads localStorage and calls setCurrent(...).
  • Once current is populated, the full toolbar, two-column editor form, and live preview are inserted into the DOM, pushing the FAQ and CTA sections down and triggering a large layout shift score (0.554 desktop, 0.465 mobile).

Concrete Next Step

  1. Refactor InvoiceGeneratorClient.tsx so that initial render does not collapse into a small placeholder card.
  2. Initialize default invoice state or render a layout-preserving skeleton that matches the dimensions of the toolbar, editor, and preview grids during SSR and before hydration.
  3. Re-run Lighthouse mobile and desktop audits to verify median CLS is ≤ 0.1.
Lingua principale
TypeScript
Stelle
1
Fork
9
Merge medio
10h 24m
PR unite (30g)
93

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di codercops/toolbelt

Tutte le issue di codercops/toolbelt

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.