refactor(utils): screen loading

packages/app/src/components/utils/LoadingScreen.vue

@@ -0,0 +1,20 @@
+<template>
+  <div
+    class="flex justify-center items-center h-screen w-full z-umax"
+    :style="{ backgroundColor: '#1e293b' }"
+  >
+    <img
+      class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg rounded-xs w-32 md:w-60 opacity-30"
+      alt="Better Write Logo"
+      src="/logo_default.svg"
+    />
+    <p class="md:text-2xl text-lg font-raleway animate-pulse absolute top-1/5 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full text-center">{{ t('landing.loading') }}</p>
+    <Spinner :width="100" :height="100" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n()
+</script>

packages/app/src/pages/Landing.vue

@@ -94,18 +94,7 @@
         </div>
         <AuthMain v-else @close="isNecessaryLogin = false" />
       </div>
-      <div
-        v-else
-        class="flex justify-center items-center h-screen w-full z-umax"
-        :style="{ backgroundColor: '#1e293b' }"
-      >
-        <img
-          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg rounded-xs w-32 md:w-60 opacity-30"
-          alt="Better Write Logo"
-          src="/logo_default.svg"
-        />
-        <Spinner :width="100" :height="100" />
-      </div>
+      <LoadingScreen v-else />
     </section>
   </main>
 </template>

packages/languages/src/en-US/landing.ts

@@ -1,4 +1,5 @@
 export default {
+  loading: 'It may take a few seconds...',
   auth: {
     email: 'Enter a valid email!',
     emailPlaceholder: 'Email...',

packages/languages/src/pt-BR/landing.ts

@@ -1,4 +1,5 @@
 export default {
+  loading: 'Pode demorar alguns segundos...',
   auth: {
     email: 'Insira um email válido!',
     emailPlaceholder: 'Email...',