MovieList.php

<?php

namespace App\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Http;

class MovieList extends Component
{
    public $products = [];
    public $loaded = false;
    public $error = null;

    public function mount()
    {
        try {
            // Fetch real data from REST API
            $response = Http::timeout(10)->get('https://api.restful-api.dev/objects');

            if ($response->successful()) {
                $this->products = collect($response->json())
                    ->take(6) // Only show first 6 items
                    ->map(function ($item) {
                        return [
                            'id' => $item['id'],
                            'name' => $item['name'],
                            'data' => $item['data'] ?? [],
                        ];
                    })
                    ->toArray();

                $this->loaded = true;
            } else {
                $this->error = 'API request failed: ' . $response->status();
            }
        } catch (\Exception $e) {
            $this->error = 'Network error: ' . $e->getMessage();
        }
    }

    public function placeholder()
    {
        return <<<'HTML'
        <div class="space-y-4">
            <h3 class="text-lg font-semibold mb-4 bg-gray-200 h-6 rounded animate-pulse"></h3>
            <!-- Product skeleton loaders -->
            <div class="animate-pulse">
                <div class="flex space-x-4 p-3 border rounded-lg">
                    <div class="w-16 h-16 bg-red-200 rounded"></div>
                    <div class="flex-1 space-y-2 py-1">
                        <div class="h-4 bg-red-200 rounded w-3/4"></div>
                        <div class="flex space-x-2 mt-2">
                            <div class="h-3 bg-red-200 rounded w-16"></div>
                            <div class="h-3 bg-red-200 rounded w-20"></div>
                            <div class="h-3 bg-red-200 rounded w-12"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="animate-pulse">
                <div class="flex space-x-4 p-3 border rounded-lg">
                    <div class="w-16 h-16 bg-red-200 rounded"></div>
                    <div class="flex-1 space-y-2 py-1">
                        <div class="h-4 bg-red-200 rounded w-2/3"></div>
                        <div class="flex space-x-2 mt-2">
                            <div class="h-3 bg-red-200 rounded w-20"></div>
                            <div class="h-3 bg-red-200 rounded w-16"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="animate-pulse">
                <div class="flex space-x-4 p-3 border rounded-lg">
                    <div class="w-16 h-16 bg-red-200 rounded"></div>
                    <div class="flex-1 space-y-2 py-1">
                        <div class="h-4 bg-red-200 rounded w-4/5"></div>
                        <div class="flex space-x-2 mt-2">
                            <div class="h-3 bg-red-200 rounded w-14"></div>
                            <div class="h-3 bg-red-200 rounded w-18"></div>
                            <div class="h-3 bg-red-200 rounded w-10"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center text-red-400 mt-4">
                🔄 Loading from API...
            </div>
        </div>
        HTML;
    }

    public function render()
    {
        return view('livewire.movie-list');
    }
}