From b1425479d097e7cd48af423cfe20c200c464206f Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Fri, 7 Nov 2025 09:52:25 -0300
Subject: [PATCH] feat: add loading component

---
 src/components/Loader.vue | 47 +++++++++++++++++++++++++++++++++++++++
 src/views/Auth.vue        |  5 +----
 src/views/Catalog.vue     |  8 ++-----
 src/views/Landing.vue     |  8 ++-----
 src/views/Player.vue      |  8 ++-----
 5 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Loader.vue

diff --git a/src/components/Loader.vue b/src/components/Loader.vue
new file mode 100644
index 0000000..567a73a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Auth.vue b/src/views/Auth.vue
index 8c36c01..fd415c5 100644
--- a/src/views/Auth.vue
+++ b/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 {
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index 77c962d..f9a4feb 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -2,6 +2,7 @@
 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);
 
@@ -9,12 +10,7 @@ onMounted(() => {
   const remoteModule = createRemoteAppComponent({
     loader: () => import("catalog/Catalog"),
     asyncComponentOptions: {
-      loadingComponent: defineComponent({
-        name: "LoadingComponent",
-        setup() {
-          return () => h("div", "Loading catalog...");
-        },
-      }),
+      loadingComponent: Loader,
     }
   });
 
diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 0665dfd..33b41f6 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -2,6 +2,7 @@
 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);
 
@@ -9,12 +10,7 @@ onMounted(() => {
 	const remoteModule = createRemoteAppComponent({
 		loader: () => import("landing/Landing"),
 		asyncComponentOptions: {
-			loadingComponent: defineComponent({
-				name: "LoadingComponent",
-				setup() {
-					return () => h("div", "Loading landing...");
-				},
-			}),
+			loadingComponent: Loader,
 		}
 	});
 
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 3a88c39..e4cd0d9 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -2,6 +2,7 @@
 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);
 
@@ -9,12 +10,7 @@ onMounted(() => {
 	const remoteModule = createRemoteAppComponent({
 		loader: () => import("player/Player"),
 		asyncComponentOptions: {
-			loadingComponent: defineComponent({
-				name: "LoadingComponent",
-				setup() {
-					return () => h("div", "Loading player...");
-				},
-			}),
+			loadingComponent: Loader,
 		}
 	});