Alpine.js with Livewire modal - Preloading models slows site down

Hi there!

I have tried to create a modal using Alpine.js and Livewire, together with a simple blade component.

Consider below:

<li x-data="{ open: false }">
      <a x-on:click="open = true" >Open Model</a>
      <div x-show="open" x-cloak>
          <x-modal title="My Modal" livewireView="mymodal"
                      :livewireId="$someId"/>
     </div>
</li>

As you can see, when you click the "Open Modal", it will show the blade component. The blade component looks like this:

<div
    class="fixed bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center" style="z-index:9999">
    <div
        class="fixed inset-0 transition-opacity">
        <div class="absolute inset-0 bg-gray-700 opacity-75" x-on:click="open = false"></div>
    </div>

    <div
        class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all @if($size) {{$size}} @else sm:max-w-lg sm:w-full @endif"
        style="overflow: inherit;">
        <div class="bg-white px-4 pt-5 pb-4 rounded-lg sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
                <div class="mt-3 text-center  text-base sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">
                        {{ $title }}
                    </h3>

                <!-- Content -->
                @livewire($livewireView, $livewireId)

                <!-- End Content -->
                </div>
            </div>
        </div>

    </div>
</div>

So far so good. The modal can open and close. However, as you can see in the above code, the blade component includes a @livewire() view. In my case, it looks like this:

use App\User;
use App\Task;
class AddConsols extends Component
{

    public $user;
    public $tasks;

    public function mount($id)
    {
        $this->user= User::find($carId);
        //Fetch some relationship
        $this->tasks = $this->user->tasks;
    }

    public function render()
    {
        return view('livewire.mymodal');
    }
}

Now consider that you have this set up in a foreach loop in your blade view:

As you can see, it increases the Model count immensely as well as the view count.

Am I missing something here? Anyone got a better approach?

alpinejs / alpine

Alpine.js with Livewire modal - Preloading models slows site down #561