fadeout logo when component ready

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>

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>