Is there a way to add a loading-spinner during the chart loading?

[morganealemany]

Summary

I have a chart that takes time to appear due to lots of datas. I want to add a loading-spinner during this time of loading.

I try to use the wire:loading directive of livewire but it seems that it doesn't work on an entire component.

I try some things like :
<div style="height:32rem" wire:loading> <div class="loader">Loading...</div> </div> <div style="height:32rem" wire:loading.remove> <livewire:livewire-column-chart key="{{ $columnChartModel->reactiveKey() }}" :column-chart-model="$columnChartModel" /> </div>

or

<div style="height:32rem"> <livewire:livewire-column-chart key="{{ $columnChartModel->reactiveKey() }}" :column-chart-model="$columnChartModel" /> <p wire:loading wire:model="column-chart-model">Loading...</p> </div>

with no success.

Is there a way to use this wire:loading or another way specific to livewire-charts maybe?

Despite my searches I couldn't find any answers.

[lrljoe]

Are you using livewire 3?