Fixed livewire script loading issues

resources/views/livewire/lists.blade.php

@@ -18,7 +18,7 @@
                     <input name="list_name" placeholder="List Name"
                            class="flex-1 w-full text-black bg-white p-2 rounded rounded-r-none"
                            type="text"
-                           wire:model="form.name">
+                           wire:model.live="form.name">
                     <button type="submit" class="bg-green-400 text-white px-4 py-2 rounded rounded-l-none">Add</button>
                 </div>
             </form>
@@ -33,4 +33,3 @@
         </ul>
     </x-ui.card>
 </div>
-</div>

resources/views/livewire/movie-list.blade.php

@@ -21,20 +21,27 @@
                 <div class="w-full flex-shrink-0 flex flex-col gap-5">
                     <div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full">
                         <input class="flex bg-white p-2 rounded sm:w-100" type="text" placeholder="Filter movies"
-                               wire:model="filterText"
+                               wire:model.live="filterText"
                                wire:keyup="filterMovies"/>
 
                         <button wire:click="$dispatch('openSearch')" class="bg-green-500 text-white p-2 rounded">
                             Add Movie
                         </button>
                     </div>
-                    <ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
-                        @foreach ($filteredMovies as $movie)
-                            <li class="bg-gray-200">
-                                <x-movie :movie="$movie"/>
-                            </li>
-                        @endforeach
-                    </ul>
+                    @if(!empty($filteredMovies))
+                        <ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
+                            @foreach ($filteredMovies as $movie)
+                                <li class="bg-gray-200">
+                                    <x-movie :movie="$movie"/>
+                                </li>
+                            @endforeach
+                        </ul>
+                    @else
+                        <div class="flex flex-col items-center justify-center  my-10">
+                            <span class="text-center p-5 font-bold text-2xl">"You complete me."</span>
+                            <span class="text-center">Tom Cruise, <i>Jerry Maguire</i></span>
+                        </div>
+                    @endif
                 </div>
 
                 <!-- Settings View -->
@@ -49,7 +56,7 @@
                     <div class="flex flex-col gap-2 w-full">
                         <label for="list-name">List Name</label>
                         <div class="flex flex-row">
-                            <input type="text" wire:model="settingsForm.name" id="list-name"
+                            <input type="text" wire:model.live="settingsForm.name" id="list-name"
                                    class="w-full p-2 rounded rounded-r-none bg-white"/>
                             <button class="bg-green-400 p-2 rounded-r" type="submit" wire:click="saveSettings">Save
                             </button>

resources/views/livewire/search-panel.blade.php

@@ -1,9 +1,9 @@
 <x-ui.slide-over model="showSearch">
-    <form wire:submit.prevent="findMovies" class="flex flex-row">
+    <form wire:submit="findMovies" class="flex flex-row">
         <div class="mb-5">
             <label for="query">Enter a movie title</label>
             <div class="flex flex-row">
-                <input wire:model="query" type="text" name="query" class="bg-white p-2 text-black"/>
+                <input wire:model.live="query" type="text" name="query" class="bg-white p-2 text-black"/>
                 <button class="bg-green-400 p-2" type="submit">Search</button>
             </div>
             @error('query') <span class="error text-red-500">{{ $message }}</span> @enderror