Laravel Livewire multiple components not started asyncronously - laravel

Question

I have 4 livewire components, rendered in dashboard as:
#livewire('profits.stats')
#livewire('costs.stats')
#livewire('leads.stats')
#livewire('sales.stats')
However, when page loads they run one after another instead of asyncronously. I put a sleep(3) to test, and each starts after the previous ones 3 second delay. How to get them to all start same time?
toggleShowData below has the sleep method, and sets showData=true. I saw this in a tutorial for now to have a loading for individual components
I don't think its relevant, but here is my template:
<div wire:init="toggleShowData">
<div wire:loading.delay class="align-items-center">
<div class="flex items-center justify-center ">
<div class="w-40 h-40 border-t-4 border-b-4 border-brand-500 rounded-full animate-spin"></div>
</div>
</div>
<div class="flex-auto p-4 bg-brand-300 rounded" wire:loading.remove>
<div class="flex flex-wrap">
<div class="relative w-full pr-4 max-w-full flex-grow flex-1">
<h5 class="text-gray-100 uppercase font-bold text-xs"> Costs</h5>
<span class="font-semibold text-xl text-gray-300">$34,100</span>
</div>
<div class="relative w-auto pl-4 flex-initial">
<div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-red-500">
<i class="fas fa-chart-bar"></i>
</div>
</div>
</div>
<p class="text-sm text-gray-100 mt-4">
<span class="text-emerald-500 mr-2"><i class="fas fa-arrow-up"></i> 2,99% </span>
<span class="whitespace-nowrap"> Since last month </span></p>
</div>
</div>

Answer 1

The first render of the livewire page happens inside the PHP process in the backend.
Blade sees that you are requesting a livewire component and replaces this with the result of your parse() method from your component.
This indeed happens in sync, once the page is rendered the components can render itself async