Extension popup renders meaningful content within 200ms of activation

A popup that shows nothing until an async operation resolves trains users to distrust the extension — or abandon it. Chrome's ISO 25010:2011 performance-efficiency.time-behaviour benchmark treats 200ms as the threshold for perceived responsiveness. Blank popups during storage reads or API calls regularly cause 1-star reviews citing "laggy" or "broken" extensions; those reviews cannot be retracted once published to the Chrome Web Store.

Render a skeleton or cached state synchronously from popup.html or initial useState, then populate with real data once async operations resolve. Never gate the first paint on chrome.storage.get, fetch, or any useEffect that must complete before UI is shown.

function Popup() {
  const [data, setData] = useState<CachedData | null>(null);

  useEffect(() => {
    chrome.storage.local.get(['cachedData'], (result) => {
      setData(result.cachedData ?? DEFAULT_DATA);
    });
  }, []);

  if (!data) return <SkeletonUI />; // Renders immediately
  return <PopupContent data={data} />;
}

For vanilla JS, pre-populate popup.html with placeholder content and update via textContent after data arrives — never leave <body> empty.