Lazy Loading
Demonstrates how to lazy load content
This example shows how to lazily load an element on a page. We start with an initial state that looks like this:
```
@app.get
def page():
return Div(hx_get=get_content, hx_trigger="load", cls="container")(
Img(src="/img/bars.svg", alt="Result loading...", cls="htmx-indicator", width="150"),
)
```
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:
```
.htmx-settling img {
opacity: 0;
}
img {
transition: opacity 300ms ease-in !important;
}
```