mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-16 19:40:40 +00:00
84 lines
1.5 KiB
Markdown
84 lines
1.5 KiB
Markdown
# Lazy Loading Component API
|
|
|
|
A component that defers loading of its children until needed.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-lazy-loading = "0.7"
|
|
```
|
|
|
|
```rust
|
|
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
|
|
|
|
```rust
|
|
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
|
|
|
|
```css
|
|
.lazy-loading {
|
|
min-h-[100px]
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface LazyLoadingProps {
|
|
fallback?: React.ReactNode;
|
|
threshold?: number;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const LazyLoading: React.FC<LazyLoadingProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/lazy-loading/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/lazy-loading/src/default.rs)*
|