Skeleton Loading States

A skeleton screen draws gray shapes where content will appear. Framework7 572,986 bundles the MIT-licensed Skeleton Elements 159 library (github.com/nolimits4web/skeleton-elements (https://github.com/nolimits4web/skeleton-elements 159 ), 4.0.1 here, by Framework7's author): skeleton-block is a gray box, skeleton-text turns real text into gray bars, and skeleton-effect-wave, -fade or -pulse animates them. The catalog shows four placeholder cards (first screen of the catalog figure in Catalog Page) until a 1.5 s timer, standing in for the network, clears loading:

Placeholder cards in the catalog's scriptJavaScript

const skeletons = () => [1, 2, 3, 4].map(() => $h`
  <div class="card book-card skeleton-effect-wave">
    <div class="cover skeleton-block"></div>
    <div class="card-content card-content-padding skeleton-text">
      <div class="book-title">Book title here</div>
      <div class="book-author">Author name</div>
      <div class="book-meta">00.00 0.0</div>
    </div>
  </div>`);
$onMounted(() => setTimeout(() => { loading = false; $update(); }, 1500));

Reuse the real card's classes for the placeholder, so swapping it for the real card causes no layout shift.

MENU