Loading indicator

[divdax]

Great Livewire component! I think there should be a loading indicator right after you emit openModal (or with a slight delay for 200-300ms to prevent flickering). When you have a slow server response the user knows there is something going on he has to wait for.

[martin-ro]

Have you found a custom solution for this?

[mityukov]

I've done something like this:

    <div
        id="loading_overlay"
        class="absolute inset-0 bg-gray-500/75 backdrop-blur-sm z-50 hidden"
    >Loading…</div>

   ...

    <script>
        Livewire.hook('message.sent', (message, omponent) => {
            if (message.updateQueue[0].payload.event === 'openModal') {
                document.getElementById('loading_overlay').classList.add('flex-center');
            }
            if (message.updateQueue[0].payload.method === 'resetState') {
                document.getElementById('loading_overlay').classList.remove('flex-center');
            }
        });
    </script>

Though, I wish there was a built-in function. Otherwise, when popup is slow, the users think they need to click it few more times =)

[mityukov]

p.s.: flex-center is not a part of tailwindcss. It's defined as @apply flex items-center justify-center