From ae1996c25f1ba47a121456f8dd20cab28f8c3afe Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 22:49:21 -0500
Subject: [PATCH] refactor: enhance onboarding modal functionality with
 improved x-cloak handling and slide display logic

---
 .../Onboarding/resources/views/modal.blade.php    | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 44086a05c..831410fac 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -1,23 +1,26 @@
 @php use Illuminate\Support\Facades\Storage; @endphp
 <div>
 @if($showModal && count($slides) > 0)
-<div x-data="{ open: @entangle('showModal'), currentSlide: @entangle('currentSlide') }" 
-     x-show="open" 
-     x-cloak
-     x-init="$watch('open', value => { 
+{{-- Inline x-cloak style to prevent flash --}}
+<style>[x-cloak] { display: none !important; }</style>
+
+<div x-data="{ open: @entangle('showModal'), currentSlide: @entangle('currentSlide'), ready: false }" 
+     x-init="$nextTick(() => { ready = true; }); $watch('open', value => { 
          if(value) { 
              document.documentElement.style.overflow = 'hidden'; 
          } else { 
              document.documentElement.style.overflow = ''; 
          } 
      })"
+     x-show="open && ready"
+     x-cloak
      style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
     
     {{-- Backdrop --}}
     @if($this->showBackdrop)
     <div class="bg-black/50 transition-opacity duration-300"
          style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
-         x-show="open"
+         x-show="open && ready"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0"
          x-transition:enter-end="opacity-100"
@@ -30,7 +33,7 @@
     {{-- Modal Dialog --}}
     <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
          style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;"
-         x-show="open"
+         x-show="open && ready"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 scale-90"
          x-transition:enter-end="opacity-100 scale-100"