Lazy Loading

This example shows how to lazily load an element on a page. This lazy loading can be used for loading large images.

• Full Code at GitHub
• Source at htmx.org

The lazy loading functionality is super simple to implement in Ludic. You can create just two function-based endpoints and use the LazyLoader component from the catalog:

from ludic.catalog.headers import H3
from ludic.catalog.layouts import Box, Frame
from ludic.catalog.loaders import LazyLoader
from ludic.web import LudicApp, Request

app = LudicApp()

@app.get("/")
async def index(request: Request) -> LazyLoader:
    return LazyLoader(load_url=request.url_for(load_content))

@app.get("/load/")
async def load_content() -> Box:
    return Box(
        Frame(
            H3("Content Loaded"),
        )
    )