Shared modals and performance concerns in large tables

[joffreypersia]

Hi,

I’ve been using Wire Elements Pro for quite some time, primarily due to the shared modals feature. I’m surprised that FluxUI doesn’t offer a shared modal out of the box.

I’m also curious why there hasn’t been more discussion around potential performance issues when duplicating modals (such as edit/delete modals) for each row in a large table. Wouldn’t this approach lead to performance bottlenecks?

Thanks in advance for any insights!

[donnyxray]

I'm not familiar with Wire Elements Pro or your exact needs, but I use the Flux modals in a shared manner:

// I call this from the delete buttons in my table
 public function confirmDelete(int $accountId)
    {
        $this->accountToDelete = Account::find($accountId);
        Flux::modal('delete-account')->show();
    }

// I call this from the shared modal
    public function deleteAccount()
    {
        if ($this->accountToDelete) {
            $this->authorize('delete', $this->accountToDelete);
            $this->accountToDelete->delete();
            $this->accountToDelete = null;
            Flux::modal('delete-account')->close();
        }
    }

<flux:modal name="delete-account" class="min-w-[22rem] space-y-6">
        <div wire:key="delete-modal-content-{{ $accountToDelete ? $accountToDelete->id : 'empty' }}">
            <flux:heading size="lg">{{ __('Delete Account?') }}</flux:heading>

            <flux:subheading>
                @if($accountToDelete)
                    <p>{!! __('The account with username <strong>:username</strong> will be deleted.', ['username' => $accountToDelete->username]) !!}</p>
                @endif
                <p>{{ __('This action cannot be reversed.') }}</p>
            </flux:subheading>

            <div class="flex gap-2 mt-4">
                <flux:spacer />

                <flux:modal.close>
                    <flux:button variant="ghost">Cancel</flux:button>
                </flux:modal.close>

                <flux:button type="submit" variant="danger" wire:click="deleteAccount">Delete account</flux:button>
            </div>
        </div>
    </flux:modal>