Skeleton Placeholder Patterns

Loaded Replacement

A static loaded-content replacement preview shows Quarterly report title, Mina Patel author, 3 tasks ready summary, and Content loaded preview status.

Program

Loaded content should fit into the same reserved areas so the layout does not jump.

loaded_content_replacement.html
Visuals: captured from real browser rendering
<section class="loaded-preview" aria-labelledby="loaded-preview-title"><h2 id="loaded-preview-title">Loaded content replacement</h2><div class="loaded-card" aria-label="Static loaded content preview"><span class="avatar">MP</span><strong>Quarterly report</strong><span>Mina Patel</span><span>3 tasks ready</span></div><dl>
  <div><dt>Title</dt><dd>Quarterly report</dd></div>
  <div><dt>Author</dt><dd>Mina Patel</dd></div><div><dt>Summary</dt><dd>3 tasks ready</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Content loaded preview</span></dd></div></dl>
  <p class="check">Learner check: the loaded content fits the reserved card spaces.</p>
  <p class="note">Static loaded content replacement only; no fetch, network, API, timer, polling, promise, data loading, content swap, layout measurement, ResizeObserver, animation, shimmer loop, requestAnimationFrame, CSS keyframes, script, event listener, storage, cookie, routing, navigation, object URL, download, service worker, account/session behavior, live loading state, live skeleton swap, or live submission runs.</p></section>
<style>
  .loaded-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .loaded-card { display: grid; grid-template-columns: 52px 1fr; gap: 8px; max-width: 280px; border: 1px solid #0f766e; background: #ffffff; padding: 10px; }
  .loaded-card span, .loaded-card strong { border-radius: 6px; background: #ccfbf1; padding: 8px; }
  .loaded-card .avatar { grid-row: span 3; display: grid; place-items: center; font-weight: 700; }
  .loaded-preview dl { display: grid; gap: 8px; margin: 0; }
  .loaded-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .loaded-preview dt { color: #475569; }
  .loaded-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the loaded content replacement.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show loaded card structure.

    The static card keeps the same basic reserved spaces.
    The static card keeps the same basic reserved spaces.

  3. Show exact loaded-content rows.

    The title, author, and summary are exact pinned data.
    The title, author, and summary are exact pinned data.

  4. Render content-loaded-preview status.

    The status badge says this is a content loaded preview.
    The status badge says this is a content loaded preview.

  5. Check replacement readback.

    The check says the loaded content fits the reserved card spaces.
    The check says the loaded content fits the reserved card spaces.

  6. Check loaded content honesty.

    Loaded structure, exact rows, status, and no live content swap.
    Loaded structure, exact rows, status, and no live content swap.
step flow step(1) labels the source, step(2) shows the browser structure, step(3) shows exact loaded-content rows, step(4) shows content-loaded-preview status, step(5) checks replacement readback, and step(6) checks the honesty note.
replacement readback The section heading names the loaded content replacement surface.
loaded rows Title, Author, Summary, and Status values are exact pinned data.
no live content swap The lesson should not imply fetches, networks, APIs, timers, polling, promises, data loading, content swaps, layout measurement, ResizeObserver, animation, shimmer loops, requestAnimationFrame, CSS keyframes, scripts, event listeners, storage, cookies, routing, navigation, object URLs, downloads, service workers, account/session behavior, live loading states, live skeleton swaps, or live submissions.