From 115a4c8ed804bc7b7e2eb8c343eb2127c9826463 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 22:50:56 -0500
Subject: [PATCH] refactor: streamline onboarding modal initialization and
 transition effects for enhanced user experience

---
 .../resources/views/modal.blade.php           | 75 +++++++++++--------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 831410fac..dc1ce0474 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -1,45 +1,53 @@
 @php use Illuminate\Support\Facades\Storage; @endphp
 <div>
 @if($showModal && count($slides) > 0)
-{{-- 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;">
+<div id="onboarding-modal-wrapper" 
+     style="opacity: 0; visibility: hidden;"
+     x-data="{ 
+         open: @entangle('showModal'), 
+         currentSlide: @entangle('currentSlide'),
+         init() {
+             // Small delay to ensure DOM is settled before showing
+             setTimeout(() => {
+                 this.$el.style.opacity = '1';
+                 this.$el.style.visibility = 'visible';
+             }, 50);
+             this.$watch('open', value => { 
+                 if(value) { 
+                     document.documentElement.style.overflow = 'hidden'; 
+                 } else { 
+                     document.documentElement.style.overflow = ''; 
+                 } 
+             });
+         }
+     }">
     
-    {{-- 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 && ready"
+    {{-- Modal Container --}}
+    <div x-show="open"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0"
          x-transition:enter-end="opacity-100"
-         x-transition:leave="transition ease-in duration-300"
+         x-transition:leave="transition ease-in duration-200"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
-         wire:click="finish"></div>
-    @endif
-    
-    {{-- 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 && 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"
-         x-transition:leave="transition ease-in duration-300"
-         x-transition:leave-start="opacity-100 scale-100"
-         x-transition:leave-end="opacity-0 scale-90">
+         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"
+             style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
+             wire:click="finish"></div>
+        @endif
+        
+        {{-- 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-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0 scale-90"
+             x-transition:enter-end="opacity-100 scale-100"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100 scale-100"
+             x-transition:leave-end="opacity-0 scale-90">
 
         {{-- Slides --}}
         @foreach($slides as $index => $slide)
@@ -108,6 +116,7 @@
                 </div>
             </div>
         @endforeach
+        </div>
     </div>
 </div>
 @endif