Loading indicators displayed immediately for asynchronous data fetching

A popup that fetches remote data with no visual feedback looks broken. Users click Sync Now, see no change for two seconds while the background script hits the network, and click again — triggering duplicate requests, duplicate writes, or duplicate API billing. Without a spinner, disabled button, or skeleton screen, users cannot distinguish a slow operation from a frozen extension. Perceived performance drops, support tickets spike, and the extension accumulates one-star reviews blaming it for bugs that are actually just unreported async work.

Disable the triggering control and swap its label while the async operation runs, then restore in a finally block so errors still clear the loading state. Place this pattern in every popup handler that touches the network or background script in popup.js:

btn.disabled = true;
btn.textContent = 'Syncing...';
try { await sync(); } finally { btn.disabled = false; btn.textContent = 'Sync Now'; }

• ID: extension-ux-performance.popup-responsiveness.loading-indicators

• Severity: low

• What to look for: Examine how the popup communicates to the user that data is loading. Check for spinner components, skeleton screens, or progress indicators that display before async operations complete. Look at whether buttons trigger loading state (disabled plus visual indicator) during form submission or data refresh. Check for cases where async operations run silently with no UI feedback. Count all instances found and enumerate each.

• Pass criteria: Any operation that may take more than roughly 100ms shows a loading indicator. Buttons that trigger async actions show a loading or disabled state. Data-fetching operations display a skeleton or spinner in the content area while waiting. At least 1 implementation must be confirmed.

• Fail criteria: Async data fetching happens with no visual feedback — the popup appears frozen or empty while operations run. Clicking a button with no response for 1+ seconds with no loading indicator.

• Skip (N/A) when: The extension has no popup, or all popup operations are synchronous and complete instantly.

• Detail on fail: Describe the missing feedback. Example: "'Sync Now' button shows no loading state — freezes for 2-3 seconds while fetching remote data" or "On first load, popup shows empty content area for ~500ms with no skeleton or spinner."

• Remediation: Add loading states to async operations:

  async function syncData() {
    syncButton.disabled = true;
    syncButton.textContent = 'Syncing...';
  
    try {
      const data = await fetchFromBackground();
      renderContent(data);
    } finally {
      syncButton.disabled = false;
      syncButton.textContent = 'Sync Now';
    }
  }
  

  Use CSS animations for spinners — they run off the main thread and remain smooth even when JS is busy.