Popup layout stabilizes without cumulative layout shift during loading

Layout shift during popup load is visually jarring and causes accidental clicks — a user aiming at a button hits a link when content loads and pushes the layout down. ISO 25010:2011 performance-efficiency.time-behaviour covers stability of the rendered interface, not just load time. Cumulative layout shift in extension popups is harder to measure than in web pages but its user impact is identical: misclicks on the wrong interactive element after a reflow.

Reserve space for every dynamic element before data arrives using fixed dimensions or skeleton containers. Images must always declare explicit width and height.

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eee; /* Placeholder until image loads */
}

.stats-section {
  min-height: 60px; /* Holds space before async data populates */
}

Skeleton screen dimensions must match the final rendered content so no reflow occurs when real content replaces the placeholder. Avoid patterns where the popup grows in height after opening.

• ID: extension-ux-performance.popup-responsiveness.popup-no-cls

• Severity: medium

• What to look for: Examine the popup's layout and loading sequence. Look for elements that are added to the DOM after initial render without reserved space — images without explicit dimensions, content that pushes other elements down when it loads, dynamically injected components that cause reflows. Check whether asynchronously loaded data causes the popup dimensions to change noticeably after opening. Count all instances found and enumerate each.

• Pass criteria: The popup opens at a stable size. If dynamic content loads, reserved space (skeleton elements, placeholder containers with fixed dimensions) prevents jarring shifts. Icons and images have explicit width and height set. The popup's overall height and width do not change significantly once the user is interacting. At least 1 implementation must be confirmed.

• Fail criteria: The popup visibly jumps or shifts layout after opening — e.g., a user name loads and pushes the action button down, an image loads without reserved space and reflows surrounding text, or the popup resizes after data populates.

• Skip (N/A) when: The extension has no popup.

• Cross-reference: The popup-loads-under-200ms check verifies the popup loads fast enough that layout shifts would be noticeable to users.

• Detail on fail: Describe the shift. Example: "Avatar image loads 300ms after popup open and causes the entire button row to shift down by 40px" or "User stats section loads asynchronously and expands popup height, shifting footer links out of view."

• Remediation: Reserve space for dynamic content:

  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eee;  /* Placeholder while loading */
  }
  
  .stats-section {
    min-height: 60px;  /* Reserve space before data arrives */
  }
  

  Use skeleton screens that match the final content dimensions rather than collapsing to zero height.