Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đã đóng
  • Có gì không ổn?
#159 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@Saifjafri212213 đang làm issue này rồi.

Từ ngày 20/10/2026.

  • #213 của @Saifjafri212213 — đã merge

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
66/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
nextjs, react, typescript
Lĩnh vực
frontend, performance

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
1
Fork
9
Merge trung bình
10 giờ 24 phút
Pull request đã merge (30 ngày)
93

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codercops/toolbelt

Tất cả issue của codercops/toolbelt

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.