Jump to another example:
Basics
Store
Composables
Events
Forms
Features
Feature Showcase: Lazy Loading
Defer expensive component mounts and render placeholders first.
How it works
The demo component is marked with #[Lazy(onLoad: true)],
so the page renders immediately with a placeholder and mounts the heavy component right after first paint.
app/LiVue/LazyInsightsDemo.php
#[Lazy(onLoad: true, placeholder: 'livue.lazy-insights-placeholder')]
class LazyInsightsDemo extends Component
{
public function mount(): void
{
usleep(650000);
}
}
resources/views/livue/lazy-insights-placeholder.blade.php
<div class="animate-pulse">
<div class="h-4 w-40 bg-gray-700"></div>
<div class="h-3 w-full bg-gray-800"></div>
</div>