Challenge 1: Dynamically Import a Chart Component — Possible Solution
====================================================================

const chartSection = document.getElementById("chart-section");

const observer = new IntersectionObserver(async (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      const { renderChart } = await import("./chart.js"); // fetched only now
      renderChart(chartSection);
      observer.unobserve(chartSection); // no need to keep watching once loaded
    }
  }
});

observer.observe(chartSection);

WHY THIS WORKS
--------------
- The IntersectionObserver is set up to watch chart-section, exactly
  the same pattern Chapter 5 used for images — the observer's callback
  fires whenever the observed element's intersection status with the
  viewport changes, not on a fixed timer or scroll-event listener.
- entry.isIntersecting confirms the element has actually scrolled into
  (or is near) the viewport before ANY work happens — this is the
  condition that determines "now is the moment to load this," mirroring
  exactly how native loading="lazy" decides when to fetch an image, just
  implemented manually here for a JS module instead.
- The dynamic import("./chart.js") only executes INSIDE this
  conditional, once isIntersecting is true — this is the chapter's core
  mechanism: the chart module's code is not downloaded, parsed, or
  executed at all until this specific moment, keeping it completely out
  of the initial bundle and initial page load cost.
- observer.unobserve(chartSection) is called immediately after loading
  succeeds — once the chart has been loaded and rendered, there's no
  reason to keep receiving intersection callbacks for this element; this
  prevents the import() (and renderChart()) from being triggered
  redundantly if the observer's callback happened to fire again for the
  same element.
- Using await import(...) inside an async callback lets renderChart(...)
  be called only once the module has actually finished loading — the
  chart cannot be rendered with an incomplete or missing renderChart
  function, since the code waits for the import's promise to resolve
  first.