Livewire transition still not working with Alpine

Hi all,

I’m triggering a modal that displays a “loading” screen to the user as a task is being ran in the background.

It’s working fine, with the following code:

<div wire:loading wire:target="submit" x-data="{open: false}" x-show="open" x-transition x-init="setTimeout(() => { open = true })">

However there is no animated transition at all. It just instantly appears on the screen.

I’ve read a lot about this online and suggestions say adding the delay via setTimeout should make it work, but it doesn’t. I’ve even added a 3 second delay and the transition still doesn’t show. I’ve even tried removing the loading from above and wrapping it in a parent <div wire:loading> but it still doesn’t work.

Can anybody help with showing me some code that they’ve found working? I’m lost!

Thanks all