From 1b94aac0a58023a1b04fba9d9288b1bf8b8bbe15 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Thu, 12 Mar 2026 14:08:27 -0500
Subject: [PATCH] perf(ui): Optimize transport tabs to use hardware-accelerated
 CSS transform

---
 frontend/src/views/TransporteLayout.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/TransporteLayout.vue b/frontend/src/views/TransporteLayout.vue
index 5482511..130281e 100644
--- a/frontend/src/views/TransporteLayout.vue
+++ b/frontend/src/views/TransporteLayout.vue
@@ -41,7 +41,7 @@ onMounted(async () => {
             <span class="material-icons">directions_bus</span>
             {{ t('taxi.tabIntercity') }}
           </router-link>
-          <div class="tab-slider" :style="{ left: route.path.includes('taxis') ? '4px' : 'calc(50% + 2px)' }"></div>
+          <div class="tab-slider" :class="{ 'slide-right': !route.path.includes('taxis') }"></div>
         </div>
       </div>
     </header>
@@ -158,12 +158,18 @@ onMounted(async () => {
   position: absolute;
   top: 4px;
   bottom: 4px;
+  left: 4px;
   width: calc(50% - 6px);
   background: #FEE715;
   border-radius: 12px;
-  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 1;
   box-shadow: 0 4px 20px rgba(254, 231, 21, 0.4);
+  will-change: transform;
+}
+
+.tab-slider.slide-right {
+  transform: translateX(calc(100% + 4px));
 }
 
 .fade-enter-active,