<div class="container py-5 d-flex justify-content-center">
  <div class="card bsskel-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="fw-bold mb-0">Team members</h6>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bsskelReload">Reload data</button>
      </div>
      <table class="table table-sm align-middle mb-0">
        <thead>
          <tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th></tr>
        </thead>
        <tbody id="bsskelBody"></tbody>
      </table>
    </div>
  </div>
</div>

.bsskel-card { width: 480px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsskel-bar {
  display: inline-block; height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, #eceef1 25%, #f5f6f8 37%, #eceef1 63%);
  background-size: 400% 100%;
  animation: bsskel-shimmer 1.4s ease infinite;
}
@keyframes bsskel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

const body = document.getElementById('bsskelBody');
const reloadBtn = document.getElementById('bsskelReload');

const ROWS = [
  ['Dana Reyes', 'dana@acme.co', 'Engineering', 'Active', 'success'],
  ['Marcus Lee', 'marcus@acme.co', 'Design', 'Active', 'success'],
  ['Priya Nair', 'priya@acme.co', 'Product', 'Invited', 'secondary'],
  ['Sofia Chen', 'sofia@acme.co', 'Engineering', 'Active', 'success'],
  ['Wale Adeyemi', 'wale@acme.co', 'Support', 'Suspended', 'warning'],
];

// Column-width hints so the skeleton's bars roughly match the real content's
// shape, instead of five identical rectangles that don't resemble a table.
const WIDTHS = ['70%', '85%', '60%', '50%'];

function renderSkeleton() {
  let rows = '';
  for (let i = 0; i < 5; i++) {
    rows += '<tr>' + WIDTHS.map(w =>
      '<td><span class="bsskel-bar" style="width:' + w + '"></span></td>'
    ).join('') + '</tr>';
  }
  body.innerHTML = rows;
}

function renderData() {
  body.innerHTML = ROWS.map(([name, email, role, status, tone]) =>
    '<tr><td>' + name + '</td><td class="text-muted">' + email + '</td><td>' + role +
    '</td><td><span class="badge text-bg-' + tone + '">' + status + '</span></td></tr>'
  ).join('');
}

function load() {
  renderSkeleton();
  reloadBtn.disabled = true;
  setTimeout(() => {
    renderData();
    reloadBtn.disabled = false;
  }, 1400);
}

reloadBtn.addEventListener('click', load);
load();