<div class="demo">
  <div class="profile-card" id="profileCard">
    <div class="skeleton-row">
      <div class="skeleton skeleton-avatar"></div>
      <div class="skeleton-col">
        <div class="skeleton skeleton-line" style="width: 60%"></div>
        <div class="skeleton skeleton-line" style="width: 40%"></div>
      </div>
    </div>

    <div class="posts-section" id="postsSection">
      <div class="posts-placeholder" id="postsPlaceholder">
        <span class="posts-placeholder-text">Waiting for profile before loading posts…</span>
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 360px; max-width: 100%; }

.profile-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }

.skeleton-row { display: flex; align-items: center; gap: 12px; }
.skeleton-col { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.skeleton-line { height: 11px; }

.real-avatar { width: 48px; height: 48px; border-radius: 50%; background: #eef2ff; color: #4338ca; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.real-name { font-size: 14px; font-weight: 800; color: #111827; }
.real-role { font-size: 12px; color: #64748b; }

.posts-section { border-top: 1px solid #f1f5f9; padding-top: 14px; }
.posts-placeholder { display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.posts-placeholder-text { font-size: 11.5px; color: #cbd5e1; text-align: center; }

.post-skeleton { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid #f8fafc; }
.post-skeleton:last-child { border-bottom: none; }

.real-post { padding: 10px 0; border-bottom: 1px solid #f8fafc; }
.real-post:last-child { border-bottom: none; }
.real-post-title { font-size: 12.5px; font-weight: 700; color: #111827; margin-bottom: 3px; }
.real-post-meta { font-size: 11px; color: #94a3b8; }

.section-fade-in { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

const profileCard = document.getElementById('profileCard');
const postsSection = document.getElementById('postsSection');

// This models a real, common data-fetching shape: posts genuinely CANNOT be
// requested until the profile response returns an author id — the two
// requests are not independent, they're a real dependency chain. The
// skeleton UI is built to honestly reflect that: posts show a distinct
// "waiting on profile" placeholder, not a generic skeleton implying their
// own request is already in flight when it structurally can't be yet.
function fetchProfile() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id: 42, name: 'Dana Whitfield', role: 'Product Designer' }), 1100);
  });
}

function fetchPosts(authorId) {
  return new Promise((resolve) => {
    setTimeout(() => resolve([
      { title: 'Redesigning the onboarding flow', meta: '3 days ago · ' + authorId },
      { title: 'Notes from our design system audit', meta: '1 week ago · ' + authorId },
      { title: 'Why we moved to a token-based color system', meta: '2 weeks ago · ' + authorId },
    ]), 900);
  });
}

function renderProfileSkeleton() {
  profileCard.querySelector('.skeleton-row').innerHTML = `
    <div class="skeleton skeleton-avatar"></div>
    <div class="skeleton-col">
      <div class="skeleton skeleton-line" style="width: 60%"></div>
      <div class="skeleton skeleton-line" style="width: 40%"></div>
    </div>
  `;
}

function renderProfile(profile) {
  const initials = profile.name.split(' ').map((p) => p[0]).join('');
  profileCard.querySelector('.skeleton-row').innerHTML = `
    <div class="real-avatar">${initials}</div>
    <div>
      <div class="real-name">${profile.name}</div>
      <div class="real-role">${profile.role}</div>
    </div>
  `;
  profileCard.querySelector('.skeleton-row').classList.add('section-fade-in');
}

// Once the profile resolves, the "waiting" placeholder is replaced with a
// REAL skeleton for posts — this second skeleton is meaningfully different
// from the first: it represents a request that has now actually started,
// whereas the initial placeholder represented a request that structurally
// couldn't start yet at all.
function renderPostsSkeleton() {
  postsSection.innerHTML = Array.from({ length: 3 }, () => `
    <div class="post-skeleton">
      <div class="skeleton skeleton-line" style="width: 75%; height: 12px;"></div>
      <div class="skeleton skeleton-line" style="width: 45%; height: 10px;"></div>
    </div>
  `).join('');
}

function renderPosts(posts) {
  postsSection.innerHTML = posts.map((post) => `
    <div class="real-post">
      <div class="real-post-title">${post.title}</div>
      <div class="real-post-meta">${post.meta}</div>
    </div>
  `).join('');
  postsSection.classList.add('section-fade-in');
}

async function load() {
  renderProfileSkeleton();
  const profile = await fetchProfile();
  renderProfile(profile);

  // Only now, with a real author id in hand, does the posts request
  // actually become possible to make — so only now does its skeleton
  // switch from "waiting" to "in flight."
  renderPostsSkeleton();
  const posts = await fetchPosts(profile.id);
  renderPosts(posts);
}

load();