From 09a7110855806ea98d230d5826af6cd970cc9fe9 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sat, 23 Aug 2025 09:18:54 -0400
Subject: [PATCH] fadeout logo when component ready

---
 frontend/index.html   | 13 +++++++++----
 frontend/src/RomM.vue | 20 ++++++++++++++------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 2b283a5b4..7fa35a7fe 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -33,16 +33,21 @@
       }
 
       #app-loading-logo {
+        position: fixed;
+        top: 0;
+        left: 0;
         display: flex;
-        width: 100vw;
-        height: 100vh;
         justify-content: center;
         align-items: center;
+        width: 100vw;
+        height: 100vh;
+        z-index: 1020 !important;
+        background-color: rgba(13, 17, 23) !important;
       }
 
       #app-loading-logo img {
-        width: 25%;
-        height: 25%;
+        width: 30%;
+        height: 30%;
         opacity: 0.1;
       }
     </style>
diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
index d9915747a..320efb541 100644
--- a/frontend/src/RomM.vue
+++ b/frontend/src/RomM.vue
@@ -20,17 +20,15 @@ storeLanguage.setLanguage(selectedLanguage.value);
   <v-app>
     <v-main id="main" class="no-transition">
       <router-view v-slot="{ Component }">
-        <template v-if="Component">
-          <component :is="Component" />
-        </template>
-        <template v-else>
-          <div id="app-loading-logo">
+        <component :is="Component" />
+        <Transition name="fade" mode="out-in">
+          <div v-if="!Component" id="app-loading-logo">
             <img
               src="/assets/logos/romm_logo_xbox_one_circle_grayscale.svg"
               alt="Romm Logo"
             />
           </div>
-        </template>
+        </Transition>
       </router-view>
     </v-main>
   </v-app>
@@ -40,4 +38,14 @@ storeLanguage.setLanguage(selectedLanguage.value);
 #main.no-transition {
   transition: none;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>