Scenario;
- Single Livewire component.
- Multi-row table, each row with a clickable item for ‘further details’
- On clicking the button, a modal opens with the relevant details for that row, including a reasonable sized image.
- Want to avoid having multiple modals (one per row) so need to insert the selected content into the common modal.
Approach #1. Modal is a livewire component that opens itself and closes itself when asked. Drawback, laggy mouseclicks whilst the request to open/close does the roundtrip. Benefit, when modal opens, it has the right content.
Approach #2. Modal is opened and closed with Alpine. emits an event to Livewire component telling it which content to load into the modal. Drawback, modal shows previous content until new content arrives from Livewire. Advantage, open and close is snappy because it is dealt with locally.
I’m considering the best approach. Ideally #2, but what I would like is to replace the content of the modal with a loading spinner when it is closed, so that when opened the spinner shows not the previous content. Ideally this would be done in-line in the modal and not by calling to separate script which would make packaging as a component more difficult.
Possibly also try and hook in prefetch.
Anyone done this that can share some tips?