Lazy Loading

import time

from fasthtml.common import Button, Div, Img, NotStr, Style, fast_app

css = """
.htmx-settling img {
  opacity: 0;
}
img {
 transition: opacity 300ms ease-in !important;
}
"""

app, rt = fast_app(hdrs=[Style(css)])


@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"),
    )


@app.get
def get_content():
    time.sleep(2)
    return Div(
        NotStr("<ins>This simple text takes 2s to load!</ins>"),
        Button("Reload", hx_target="body", hx_get=page),
    )

Server Calls