Prevent Modal pre open like blink when start to render page

#1

How to prevent pre-openning a modal when start page rendering?

I guess this occurred from modal state property($modalSwitch) didn’t injected and not finished DOM calculating when start rendering.

View

<div wire:click="modalToggle"> //modal toggle
...
</div>
...
<div>
  ...
   <x-jet-dialog-modal wire:model="modalSwitch"> //modal
    ...
      <x-jet-danger-button wire:click="modalToggle">
      {{ __('OK') }}
      </x-jet-danger-button>
   </x-jet-dialog-modal>  
  ...
</div>

Component

...
class ... {

public $modalSwitch = false; //modal state, flase:close, true:open
...
public function modalToggle() // on/off toggle
{
   $this->modalSwitch = !$this->modalSwitch;
}
...
}

So I tried with used @isset($modalSwitch) directive rapping over the modal, but still blinking when I reload this page.

#2

Hey, @alexander

Use x-cloak directive if you are using AlpineJs