From 19ccfaa27f1ca3a1a735bdb1f80a9dea98e6126d Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 1 Feb 2026 15:42:59 -0500
Subject: [PATCH] Fix page transition: only slide-in new content after it loads

---
 .../Proxmox/views/components/layout.blade.php | 60 +++++++------------
 1 file changed, 21 insertions(+), 39 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 7bb3686c5..466364498 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -1598,20 +1598,20 @@
 
             <div class="mb-10 mt-3">
                 <style>
-                    /* Page Transition Styles */
+                    /* Page Transition Styles - Only slide-in for new content */
                     .proxmox-page-wrapper {
                         opacity: 1;
                         transform: translateX(0);
                     }
                     
                     .proxmox-page-wrapper.slide-in {
-                        animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+                        animation: slideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                     }
                     
                     @keyframes slideIn {
                         from {
                             opacity: 0;
-                            transform: translateX(16px);
+                            transform: translateX(20px);
                         }
                         to {
                             opacity: 1;
@@ -1619,24 +1619,8 @@
                         }
                     }
                     
-                    @keyframes slideOut {
-                        from {
-                            opacity: 1;
-                            transform: translateX(0);
-                        }
-                        to {
-                            opacity: 0;
-                            transform: translateX(-16px);
-                        }
-                    }
-                    
-                    .proxmox-page-wrapper.slide-out {
-                        animation: slideOut 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-                    }
-                    
                     @media (prefers-reduced-motion: reduce) {
-                        .proxmox-page-wrapper.slide-in,
-                        .proxmox-page-wrapper.slide-out {
+                        .proxmox-page-wrapper.slide-in {
                             animation: none;
                             opacity: 1;
                             transform: none;
@@ -3266,32 +3250,30 @@ window.saveServerIcon = function() {
 
 // Page transition handling for Livewire navigation
 (function() {
-    let isNavigating = false;
+    let hasNavigated = false;
     
-    // Trigger slide-out when starting navigation
+    // Mark that navigation has started (but don't animate yet)
     document.addEventListener('livewire:navigate', () => {
-        isNavigating = true;
-        const pageWrapper = document.querySelector('.proxmox-page-wrapper');
-        if (pageWrapper) {
-            pageWrapper.classList.add('slide-out');
-        }
+        hasNavigated = true;
     });
     
-    // Trigger slide-in after navigation completes and page is loaded
+    // Only animate AFTER the new page content is fully loaded and swapped in
     document.addEventListener('livewire:navigated', () => {
-        if (isNavigating) {
+        if (hasNavigated) {
+            // Use double requestAnimationFrame to ensure DOM is fully updated
             requestAnimationFrame(() => {
-                const pageWrapper = document.querySelector('.proxmox-page-wrapper');
-                if (pageWrapper) {
-                    pageWrapper.classList.remove('slide-out');
-                    pageWrapper.classList.add('slide-in');
-                    // Clean up class after animation
-                    pageWrapper.addEventListener('animationend', () => {
-                        pageWrapper.classList.remove('slide-in');
-                    }, { once: true });
-                }
+                requestAnimationFrame(() => {
+                    const pageWrapper = document.querySelector('.proxmox-page-wrapper');
+                    if (pageWrapper) {
+                        // Apply slide-in to reveal the NEW content
+                        pageWrapper.classList.add('slide-in');
+                        pageWrapper.addEventListener('animationend', () => {
+                            pageWrapper.classList.remove('slide-in');
+                        }, { once: true });
+                    }
+                });
             });
-            isNavigating = false;
+            hasNavigated = false;
         }
     });
 })();