From cee693b9764a1a13c4d39c01c537ea2356af50dd Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 5 Jul 2023 08:39:40 -0400
Subject: [PATCH] Fix initial loading state

---
 web/src/App.vue                  | 12 +++++++-----
 web/src/layouts/default/View.vue |  2 +-
 web/src/store/appStore.ts        |  3 +++
 web/src/views/Home.vue           |  6 ------
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 9f35181..70523a6 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="alpha-banner py-1 px-3 bg-amber text-black">
-    <v-icon size="small" icon="mdi-bug" />
-    Em desenvolvimento! Versão 0.0.0.½ Alpha Gambiarra
+    <v-icon size="small" icon="mdi-bug" start />
+    <small>Em desenvolvimento! Versão 0.0.0.½ Alpha Gambiarra</small>
   </div>
   <v-app>
     <v-main>
@@ -17,12 +17,12 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useAppStore } from './store/appStore'
-import { onMounted } from 'vue'
+import { onBeforeMount } from 'vue'
 
 const router = useRouter()
 const appStore = useAppStore()
 
-onMounted(async () => {
+onBeforeMount(async () => {
   await appStore.fetchMe()
 
   if (!appStore.me) {
@@ -31,6 +31,8 @@ onMounted(async () => {
   }
 
   appStore.selectedCampus = appStore.me?.campus || ''
+
+  await appStore.fetchPrinters()
 })
 </script>
 
@@ -40,7 +42,7 @@ onMounted(async () => {
   bottom: 5px;
   right: 5px;
   z-index: 99999;
-  opacity: 0.7;
+  opacity: 0.5;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
     0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
     0 16px 16px rgba(0, 0, 0, 0.12);
diff --git a/web/src/layouts/default/View.vue b/web/src/layouts/default/View.vue
index 443548b..e7ceb35 100644
--- a/web/src/layouts/default/View.vue
+++ b/web/src/layouts/default/View.vue
@@ -11,7 +11,7 @@
         class="ml-2"
         :items="campiSelectItems"
         v-model="appStore.selectedCampus"
-        @update:model-value="appStore.fetchPrinters"
+        @update:menu="appStore.fetchPrinters"
         hide-details
         center-affix
         variant="solo"
diff --git a/web/src/store/appStore.ts b/web/src/store/appStore.ts
index cbf7f52..2991e85 100644
--- a/web/src/store/appStore.ts
+++ b/web/src/store/appStore.ts
@@ -15,7 +15,10 @@ export const useAppStore = defineStore('app', {
 
   actions: {
     async fetchPrinters(force = false) {
+      if (this.loadingPrinters) return
+
       this.loadingPrinters = true
+
       try {
         this.printers = await api<any[]>(
           `printer?${new URLSearchParams({
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 8b691d0..264462d 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -26,11 +26,5 @@
 import PrinterCard from '@/components/PrinterCard.vue'
 import { useAppStore } from '@/store/appStore'
 
-import { onMounted } from 'vue'
-
 const appStore = useAppStore()
-
-onMounted(async () => {
-  await appStore.fetchPrinters()
-})
 </script>