From 1af9ad5d863523f15485c43176beec01b8a1e2b1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 08:14:20 +0000
Subject: [PATCH] feat: Add fade transitions to route changes

This commit introduces fade transitions for route changes in the UI.
The main App.vue component has been updated to wrap the RouterView
with a Vue transition component. CSS styles for a simple fade-in/out
effect have been added.

This change aims to make the application feel more consistent and modern
by providing visual feedback during navigation.
---
 ui/src/App.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 5b8edf1..2aeb383 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -65,7 +65,11 @@ watchEffect(() => {
 
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
-      <RouterView class="flex-1 overflow-auto" />
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" class="flex-1 overflow-auto" />
+        </transition>
+      </router-view>
     </main>
   </div>
 </template>
@@ -73,4 +77,19 @@ watchEffect(() => {
 <style scoped>
 /* Scoped styles remain, global styles are in style.css */
 /* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
 </style>