Skip to main content

Suspense Attribute

The $suspense directive is used to handle conditional rendering based on a loading state

tip

This directive allows you to show a placeholder while content is loading, and then display the content when it's ready. It requires two child elements: one with a placeholder attribute and another with a content attribute.

suspense

Add the $suspense attribute to a container element

~index.html
<div $suspense="isLoading">
  <div placeholder>Loading...</div>
  <div content>Your content here</div>
</div>

Inside the container, include two child elements:

  • One with the placeholder attribute for the loading state
  • One with the content attribute for the loaded content

In your JavaScript, control the loading state:​

<script></script>
const $ = {
  isLoading: true, // Show placeholder
  isLoading: false, // Show content
};