Get Started

Hide a placeholder element until the SDK has finished its first DOM scan.

Mark the Element

Add data-next-skeleton to any element that should be hidden until the SDK is ready.

<div class="product-card" data-next-skeleton>
  <img data-next-display="package.image" alt="">
  <h3 data-next-display="package.name">Loading...</h3>
  <p data-next-display="package.price">$0.00</p>
</div>

The SDK already includes a built-in CSS rule that fades the element out once <html> gets the next-display-ready class:

[data-next-skeleton] {
  transition: opacity 0.3s ease-out;
}

.next-display-ready [data-next-skeleton] {
  opacity: 0;
  pointer-events: none;
}

If you want a different behavior — for example, replace the element rather than fade it — write your own CSS targeting the same selector.

Custom Skeleton CSS

A common pattern is to render the skeleton as an animated background, then hide it once the real content appears.

<div class="product-card">
  <div class="skeleton-block" data-next-skeleton></div>
  <div class="real-content" data-next-display="package.name">Loading...</div>
</div>

/* Animated grey block while loading */
.skeleton-block {
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  height: 24px;
  border-radius: 4px;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Hide the skeleton, show the content once SDK is ready */
.next-display-ready .skeleton-block { display: none; }
.real-content { display: none; }
.next-display-ready .real-content { display: block; }

Verify It Is Working

Open the page with the network throttled in DevTools (Slow 3G). You should see:

The skeleton element on first paint
The skeleton fade out (or be replaced) the moment the SDK finishes initializing
Console: a next-display-ready class added to the <html> element
A next:initialized and next:display-ready event fired on window

If the skeleton never goes away:

Check that <html> has the next-display-ready class after init
Check the network tab for failed campaign API calls — the SDK still adds the class on error, so a permanent skeleton usually means a stylesheet typo

Next Steps

All attributes the SDK reads during loading: Reference → Attributes
All CSS classes managed by the SDK at init time: Reference → CSS

Mark the Element

Custom Skeleton CSS

Verify It Is Working

Next Steps

On this page