leptos-shadcn-ui/docs/components/api/lazy-loading.md

Lazy Loading Component API

A component that defers loading of its children until needed.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-lazy-loading = "0.7"

use shadcn_ui_leptos_lazy_loading::LazyLoading;

---

Component API

LazyLoading

Prop	Type	Default	Description
fallback	Option<Children>	None	Loading placeholder
threshold	MaybeProp<f64>	0.1	Intersection threshold
children	Option<Children>	None	Content to load

---

Usage Examples

Basic Lazy Loading

use leptos::prelude::*;
use shadcn_ui_leptos_lazy_loading::LazyLoading;

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <LazyLoading
            fallback=Some(view! {
                <div class="animate-pulse">"Loading..."</div>
            })
        >
            <div class="p-4">
                "This content loads when visible"
            </div>
        </LazyLoading>
    }
}

---

CSS Classes

.lazy-loading {
    min-h-[100px]
}

---

TypeScript API

interface LazyLoadingProps {
  fallback?: React.ReactNode;
  threshold?: number;
  children?: React.ReactNode;
}

export const LazyLoading: React.FC<LazyLoadingProps>;

---

Source: packages/leptos/lazy-loading/src/default.rs