From 41ed9eb62db31ce04eebab4ed44dc61ae7825879 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 1 Feb 2026 15:35:34 -0500
Subject: [PATCH] Make page transitions only animate after navigation, not on
 initial load

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

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 08e74317f..7bb3686c5 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -1599,14 +1599,19 @@
             <div class="mb-10 mt-3">
                 <style>
                     /* Page Transition Styles */
-                    .proxmox-page-content {
-                        animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+                    .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;
                     }
                     
                     @keyframes slideIn {
                         from {
                             opacity: 0;
-                            transform: translateX(20px);
+                            transform: translateX(16px);
                         }
                         to {
                             opacity: 1;
@@ -1621,18 +1626,20 @@
                         }
                         to {
                             opacity: 0;
-                            transform: translateX(-20px);
+                            transform: translateX(-16px);
                         }
                     }
                     
-                    .proxmox-page-exit {
+                    .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-content,
-                        .proxmox-page-exit {
+                        .proxmox-page-wrapper.slide-in,
+                        .proxmox-page-wrapper.slide-out {
                             animation: none;
+                            opacity: 1;
+                            transform: none;
                         }
                     }
                     
@@ -2347,7 +2354,7 @@
                 </div>
             </div>
             <div class="flex-1 flex flex-col">
-                <div class="flex-1 flex flex-col proxmox-page-content" wire:key="proxmox-page-{{ $view }}">
+                <div class="flex-1 flex flex-col proxmox-page-wrapper" wire:key="proxmox-page-{{ $view }}">
                     {{ $slot }}
                 </div>
             </div>
@@ -3258,11 +3265,34 @@ window.saveServerIcon = function() {
 };
 
 // Page transition handling for Livewire navigation
-document.addEventListener('livewire:navigate', () => {
-    const pageContent = document.querySelector('.proxmox-page-content');
-    if (pageContent) {
-        pageContent.classList.remove('proxmox-page-content');
-        pageContent.classList.add('proxmox-page-exit');
-    }
-});
+(function() {
+    let isNavigating = false;
+    
+    // Trigger slide-out when starting navigation
+    document.addEventListener('livewire:navigate', () => {
+        isNavigating = true;
+        const pageWrapper = document.querySelector('.proxmox-page-wrapper');
+        if (pageWrapper) {
+            pageWrapper.classList.add('slide-out');
+        }
+    });
+    
+    // Trigger slide-in after navigation completes and page is loaded
+    document.addEventListener('livewire:navigated', () => {
+        if (isNavigating) {
+            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 });
+                }
+            });
+            isNavigating = false;
+        }
+    });
+})();
 </script>