home.blade.php

<div class="mt-8">
    <h2 class="text-xl font-bold mb-4">Real API Lazy Loading Test</h2>
    <p class="text-sm text-gray-600 mb-4">This test fetches real data from restful-api.dev API, similar to the Discord example. Watch for red skeleton placeholders followed by actual product data.</p>

    <div class="grid grid-cols-1 gap-6">

        {{-- Immediate Lazy Load --}}
        <div class="space-y-3">
            <h3 class="text-lg font-semibold text-green-700">🎬 Immediate Lazy Load</h3>
            <p class="text-sm text-gray-600">Should show red skeleton placeholders, then load movie list immediately</p>
            <livewire:movie-list  wire:key="movie-immediate" />
        </div>

        {{-- Viewport Lazy Load --}}
        <div class="space-y-3">
            <h3 class="text-lg font-semibold text-orange-700">👁️ Real API Lazy Load (Scroll Test)</h3>
            <p class="text-sm text-gray-600">This component fetches from restful-api.dev and only loads when scrolled into view (tests Intersection Observer)</p>
            <div style="margin-top: 100vh; margin-bottom: 20px;">
                <livewire:movie-list lazy wire:key="movie-viewport" />
            </div>
        </div>

        <div class="space-y-3">
            <h3 class="text-lg font-semibold text-orange-700">👁️ Viewport Lazy Load</h3>
            <p class="text-sm text-gray-600">Should load only when scrolled into view (test Intersection Observer)</p>
            <div style="margin-top: 50vh; margin-bottom: 20px;">
                <livewire:movie-list lazy wire:key="movie-viewport"/>
            </div>
        </div>

    </div>
</div>