feat: add loading component

src/components/Loader.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="container-loader">
+		<div class="loader" aria-label="Loading"></div>
+	</div>
+</template>
+<style>
+body,
+html,
+#app {
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+.container-loader {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+	background: #081023;
+}
+
+.loader {
+	width: 64px;
+	height: 64px;
+	background: conic-gradient(from 0turn,
+			transparent 10%,
+			#71bedb 50%,
+			#f4f468 80%,
+			transparent 100%);
+	border-radius: 50%;
+	-webkit-mask: radial-gradient(circle 52% at 50% 50%,
+			transparent 46%,
+			#000 47%);
+	mask: radial-gradient(circle 52% at 50% 50%, transparent 46%, #000 47%);
+	animation: spin 1.1s linear infinite;
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(1turn);
+	}
+}
+</style>

src/views/Auth.vue

@@ -2,15 +2,12 @@
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 
-// importa do remote (escopo + nome exposto)
-// Tipos opcionais; funcionará mesmo sem .d.ts
 let unmount: (() => void) | undefined;
 const mountPoint = ref<HTMLElement | null>(null);
 
 onMounted(async () => {
-	// importa o módulo remoto via MF
 	const mod = await import('auth/AuthApp');
-	// esperamos que ele exponha a função mount(el)
+
 	if (typeof mod.mount === 'function' && mountPoint.value) {
 		unmount = mod.mount(mountPoint.value);
 	} else {

src/views/Catalog.vue

@@ -2,19 +2,15 @@
 import { shallowRef, onMounted, h, defineComponent } from "vue";
 import { applyDocumentMeta } from "../utils/applyDocumentMeta";
 import { createRemoteAppComponent } from "@module-federation/bridge-vue3";
+import Loader from "../components/Loader.vue";
 
 const innerComp = shallowRef<any>(null);
 
 onMounted(() => {
   const remoteModule = createRemoteAppComponent({
     loader: () => import("catalog/Catalog"),
     asyncComponentOptions: {
-      loadingComponent: defineComponent({
-        name: "LoadingComponent",
-        setup() {
-          return () => h("div", "Loading catalog...");
-        },
-      }),
+      loadingComponent: Loader,
     }
   });
 

src/views/Landing.vue

@@ -2,19 +2,15 @@
 import { shallowRef, onMounted, h, defineComponent } from "vue";
 import { applyDocumentMeta } from "../utils/applyDocumentMeta";
 import { createRemoteAppComponent } from "@module-federation/bridge-vue3";
+import Loader from "../components/Loader.vue";
 
 const innerComp = shallowRef<any>(null);
 
 onMounted(() => {
 	const remoteModule = createRemoteAppComponent({
 		loader: () => import("landing/Landing"),
 		asyncComponentOptions: {
-			loadingComponent: defineComponent({
-				name: "LoadingComponent",
-				setup() {
-					return () => h("div", "Loading landing...");
-				},
-			}),
+			loadingComponent: Loader,
 		}
 	});
 

src/views/Player.vue

@@ -2,19 +2,15 @@
 import { shallowRef, onMounted, h, defineComponent } from "vue";
 import { applyDocumentMeta } from "../utils/applyDocumentMeta";
 import { createRemoteAppComponent } from "@module-federation/bridge-vue3";
+import Loader from "../components/Loader.vue";
 
 const innerComp = shallowRef<any>(null);
 
 onMounted(() => {
 	const remoteModule = createRemoteAppComponent({
 		loader: () => import("player/Player"),
 		asyncComponentOptions: {
-			loadingComponent: defineComponent({
-				name: "LoadingComponent",
-				setup() {
-					return () => h("div", "Loading player...");
-				},
-			}),
+			loadingComponent: Loader,
 		}
 	});