AlpineJS - Deferred Loading on Livewire Render

#1

Hi all, I’m using the TALL stack (https://github.com/laravel-frontend-presets/tall) and have noticed that AlpineJS’ loading is deferred until Livewire is finished rendering.

This results in AlpineJS based modals and tooltips being visible momentarily on slower page loads.

I am using the following basic format for these elements:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

The following is included in the script of the page source:

/* Make Alpine wait until Livewire is finished rendering to do its thing. */
window.deferLoadingAlpine = function (callback) {
    window.addEventListener('livewire:load', function () {
        callback();
    });
};

I’m wondering whether this deferred loading is in place for a good reason. Would it be worth removing or is there perhaps another work around that will keep these modals hidden during this initial render time.

#2

I’d say keep deferred loading as this will keep your app’s initial loading snappy. For modals and things you don’t want to see initially, apply style="display:none; and that will prevent them from showing on first load.

1 Like
#3

Thanks, shortbrownman. I’ll give it a shot.