Add route transitions

src/App.vue

@@ -1,20 +1,29 @@
 <script setup lang="ts">
+import { useRoute } from 'vue-router';
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
+
+const route = useRoute();
 </script>
 
 <template>
   <TopBar />
   <RouterView v-slot="{ Component }">
     <template v-if="Component">
-      <Suspense>
+      <Transition name="page" mode="out-in" appear>
-        <component :is="Component"></component>
+        <div :key="route.fullPath">          
-        <template #fallback>
+          <Suspense >
-          <div class="flex w-full h-full justify-center items-center">
+            <template #default >
-            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
+              <component :is="Component" />
-          </div>
+            </template>
-        </template>
+            <template #fallback>
-      </Suspense>
+              <div class="flex w-full h-full justify-center items-center">
+                <SpinnerComponent :width="'16'" :height="'16'" />
+              </div>
+            </template>
+          </Suspense>        
+        </div>
+      </Transition>      
     </template>
   </RouterView>
 </template>

src/assets/transitions.css

@@ -1,4 +1,3 @@
-
 .dropdown-enter-active,
 .dropdown-leave-active {
   transition: all 0.3s ease;
@@ -8,4 +7,15 @@
 .dropdown-leave-to {
   opacity: 0;
   transform: translateY(-10px);
-}
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}