Challenge 2: Reserve Space for a Lazy-Loaded Placeholder — Possible Solution
====================================================================

.comments-placeholder {
  min-height: 400px;
}

WHY THIS WORKS
--------------
- Setting min-height: 400px on the placeholder element reserves
  approximately the same amount of vertical space the real comments
  section will actually occupy once its code finishes loading and
  renders — so the surrounding page content doesn't need to shift
  downward when the placeholder is eventually replaced with (or filled
  by) the real component.
- This is a direct application of Chapter 3's CLS-prevention principle —
  "reserve space up front" — applied here to a lazy-loaded COMPONENT
  rather than an image. The exact same underlying problem exists in both
  cases: something whose real size isn't known/rendered until later
  needs its eventual footprint reserved immediately, or everything below
  it will visibly jump once it appears.
- This chapter's own concept card makes the connection explicit: "a
  lazy-loaded region needs a placeholder while its code downloads — if
  that placeholder is a different size than the eventual real
  component, it reintroduces exactly the layout shift Chapter 3 covered
  for images, just for a component instead." Using min-height rather
  than a fixed height (matching Chapter 3's own reasoning for ad slots)
  also allows the real content to grow slightly beyond 400px without
  clipping, while still guaranteeing that minimum space is reserved from
  the very first render.
- Note that this fix addresses the SIZE mismatch specifically — it
  doesn't address WHEN the lazy loading itself happens (that's the
  IntersectionObserver/dynamic-import mechanism from Challenge 1); this
  CSS fix is a separate, complementary concern that applies regardless
  of exactly which lazy-loading trigger mechanism is used.