Lazy Load#

Original HTMX Version

Demo#

Explanation#

This example shows how to lazily load an element on a page. We start with an initial state that looks like this:

<div data-on-load="sse('/examples/lazy_load/graph')">
  Loading...
</div>

Which shows a progress indicator as we are loading the graph. The graph is then loaded and faded gently into view via a settling CSS transition:

.datastar-settling {
  opacity: 0;
}