Header UserMenu defer-skeleton causes a brief layout shift (CLS) #78

Nytt ärende

Stängd

öppnade 2026-07-21 06:51:03 +00:00 av supernaut · 0 kommentarer

supernaut kommenterad

2026-07-21 06:51:03 +00:00

Ägare

Severity: LOW (CWV / polish). The <UserMenu server:defer /> fallback skeleton in the header (src/components/secondary-navigation.astro, added as #65 item M9 to prevent header CLS) itself causes a brief layout shift while loading: when the deferred UserMenu resolves and replaces the skeleton, the box changes size/position slightly, so the header jumps.

Root cause is a dimension mismatch — the skeleton's reserved box (height/width/padding/border/gap) doesn't exactly equal the resolved UserMenu's box, so the swap isn't seamless.

Ask

Make the slot="fallback" skeleton's box pixel-match the loaded UserMenu: same height, min-width, padding, border, border-radius, and flex alignment/gap, so server:defer hydration produces zero layout shift. Verify no CLS on load (e.g. measure the fallback vs resolved bounding boxes, or Lighthouse/PerformanceObserver CLS ~0).

**Severity: LOW (CWV / polish).** The `<UserMenu server:defer />` fallback skeleton in the header (`src/components/secondary-navigation.astro`, added as #65 item M9 to *prevent* header CLS) itself causes a **brief layout shift** while loading: when the deferred `UserMenu` resolves and replaces the skeleton, the box changes size/position slightly, so the header jumps. Root cause is a dimension mismatch — the skeleton's reserved box (height/width/padding/border/gap) doesn't exactly equal the resolved `UserMenu`'s box, so the swap isn't seamless. ### Ask Make the `slot="fallback"` skeleton's box **pixel-match** the loaded `UserMenu`: same height, min-width, padding, border, border-radius, and flex alignment/gap, so `server:defer` hydration produces zero layout shift. Verify no CLS on load (e.g. measure the fallback vs resolved bounding boxes, or Lighthouse/PerformanceObserver CLS ~0).

supernaut refererade till detta ärende från en incheckning

2026-07-21 07:00:32 +00:00

fix(web): eliminate header usermenu skeleton layout shift

supernaut hänvisade till detta ärende från en ändringsförfrågan som kommer att stänga det

2026-07-21 07:01:18 +00:00

fix: eliminate header UserMenu skeleton layout shift #79

supernaut refererade till detta ärende från en incheckning

2026-07-21 11:10:14 +00:00

fix(web): eliminate header usermenu skeleton layout shift

supernaut stängde ärendet

2026-07-21 11:11:53 +00:00

supernaut refererade till detta ärende från en incheckning