add transitions in the main loading

frontend/src/App.vue

@@ -6,12 +6,26 @@ import LoadingBars from "./components/LoadingBars.vue";
 <template>
   <RouterView v-slot="{ Component }">
     <template v-if="Component">
-      <Suspense>
-        <component :is="Component" />
-        <template #fallback>
-          <LoadingBars />
-        </template>
-      </Suspense>
+      <Transition name="fade">
+        <Suspense>
+          <component :is="Component" />
+          <template #fallback>
+            <div class="loader">
+              <LoadingBars />
+            </div>
+          </template>
+        </Suspense>
+      </Transition>
     </template>
   </RouterView>
 </template>
+
+<style scoped>
+.loader {
+  display: flex;
+  width: 100dvw;
+  height: 100dvh;
+  align-items: center;
+  justify-content: center;
+}
+</style>

frontend/src/assets/styles/_animations.css

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

frontend/src/assets/styles/main.css

@@ -1,3 +1,4 @@
 @import url("./_reset.css");
 @import url("./_variables.css");
 @import url("./_typography.css");
+@import url("./_animations.css");

frontend/src/main.ts

@@ -1,7 +1,7 @@
 import "./assets/styles/main.css";
 
-import { createApp } from "vue";
 import { createPinia } from "pinia";
+import { createApp } from "vue";
 
 import App from "./App.vue";
 import router from "./router";

frontend/tests/views/dashboard.spec.ts

@@ -1,8 +1,8 @@
-import { describe, it, expect, vi } from "vitest";
-import { useRoute } from "vue-router";
-import { mountSuspens, mockedFecth, createFetchResponse } from "../test.utils";
-import DashboardView from "@/views/DashboardView.vue";
 import FileTree from "@/components/FileTree.vue";
+import DashboardView from "@/views/DashboardView.vue";
+import { describe, expect, it, vi } from "vitest";
+import { useRoute } from "vue-router";
+import { createFetchResponse, mockedFecth, mountSuspens } from "../test.utils";
 
 vi.mock("vue-router", () => ({
   useRoute: vi.fn(),