有没有办法添加带有 livewire 和 livewire-charts 的加载微调器？

问：

我正在使用 livewire 3.0 和 livewire-charts 3.0。由于数据量很大，我有一些图表显示得很慢。我想添加一个加载微调器，它将出现而不是图表，直到这个出现。 livewire-chart 生成的图表是一个 livewire 组件：

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

我根据文档尝试了一些东西 https://livewire.laravel.com/docs/wire-loading 例如：

        <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>

或

        <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>

但它不起作用。

那么我可以将 wire：loading livewire 指令用于整个组件吗？

或者我应该尝试使用“加载”变量并使用简单的 if 条件简单地调节加载器和图表显示？

你会怎么做？