In the code column — the updated js/views/gallery.js. It now receives { isLoading, error, pictures } and branches: loading → a message; error → a message; empty → a message; and only then — the cards. Four states, four branches.

main.js now tracks two new loose state variables and passes them in:

let isLoading = false;
let error = null;
let pictures = [];

async function load() {
  isLoading = true; error = null;
  renderGallery({ isLoading, error, pictures });      // shows "Loading…"
  try {
    pictures = await fetchPictures(14);
  } catch (e) {
    error = toMessage(e);
    if (e.retryable) offerRetry();                    // a "Retry" button
  } finally {
    isLoading = false;
    renderGallery({ isLoading, error, pictures });
  }
}

(Notice: that's already three loose variables — isLoading, error, pictures. Lesson 7 adds searchQuery; by lesson 8 there are ~ten, and that becomes the problem.)

media_type — the video case. card.js (lessons 2–3) needs a branch:

if (pic.media_type === 'image') {
  const img = document.createElement('img');
  img.src = pic.url; img.alt = pic.title; img.loading = 'lazy';
  header.appendChild(img);
} else {
  const ph = document.createElement('div');
  ph.className = 'video-placeholder';
  ph.textContent = '📹 Video';                        // instead of a broken image
  header.appendChild(ph);
}

Verify. Load 30 days (fetchPictures(30)) — almost certainly at least one video day will appear; it shows "📹 Video", not a broken image. Reload until you hit the rate limit — instead of a blank screen you see a clear message and "Retry".