LazyPanel

A Panel component that only loads its content when it becomes visible in the viewport. Built on top of the Panel component with intersection observer for lazy loading.

Usage

LazyPanel is perfect for content that is expensive to render or requires data fetching, especially when that content might be off-screen initially.

Examples

Basic LazyPanel

Custom Loading State

Props

Prop	Type	Default	Description
`expanded`	`boolean`	`true`	Whether the panel is expanded initially
`class`	`string`	`''`	Additional CSS classes
`rootMargin`	`string`	`'50px'`	Root margin for intersection observer
`threshold`	`number`	`0`	Threshold for intersection observer

Slots

Name	Description
`default`	Content to be loaded lazily
`header`	Panel header content
`loading`	Content to show while loading

Best Practices

Use LazyPanel for content that is expensive to render or requires data fetching
Always provide a loading state to improve user experience
Consider the rootMargin to start loading content before it becomes visible
Use multiple LazyPanels for long lists of content to improve initial page load

Accessibility

Inherits all accessibility features from the base Panel component
Loading states are properly announced to screen readers
Content updates are announced when lazy loading completes