@php
    $loadingTargets = implode(',', \Filament\Tables\Table::LOADING_TARGETS);
@endphp
{{-- Hidden trigger: when loading, Alpine adds table-loading-overlay to the table content so cells show skeleton --}}
<div
    wire:loading.class="table-loading-overlay-active"
    wire:target="{{ $loadingTargets }}"
    x-data="{
        init() {
            const trigger = $el;
            const sync = () => {
                const content = document.querySelector('.fi-ta-content-ctn');
                if (content) {
                    content.classList.toggle('table-loading-overlay', trigger.classList.contains('table-loading-overlay-active'));
                }
            };
            sync();
            const observer = new MutationObserver(sync);
            observer.observe(trigger, { attributes: true, attributeFilter: ['class'] });
        }
    }"
    x-init="init()"
    style="display: none;"
    aria-hidden="true"
></div>
