Feature/reduce impact of loading overlay

src/components/NavbarLayout.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="navbar py-0 mb-4 bg-base-200/70 shadow backdrop-blur sticky top-0 z-30 lg:rounded-xl md:mt-1">
+  <div
+    class="navbar py-0 mb-4 bg-base-200/70 shadow backdrop-blur sticky top-0 z-30 lg:rounded-xl md:mt-1"
+  >
     <div class="navbar-start w-full md:w-[50%]">
       <template v-if="showBackButton">
         <button
@@ -145,7 +147,6 @@ import { useNotificationsStore } from '@/stores/notifications'
 import type { RegistrationRequest } from '@/model/users-management/RegistrationRequest'
 import { onMounted, ref } from 'vue'
 import { getAllRegistrationRequests } from '@/api/users-management/requests/users'
-import { useLoadingOverlayStore } from '@/stores/loading-overlay'
 
 defineProps({
   title: { type: String },
@@ -156,18 +157,12 @@ defineProps({
 })
 
 const userInfo = useUserInfoStore()
-const loadingOverlay = useLoadingOverlayStore()
 const router = useRouter()
 const goBack = () => router.back()
 
 const registrationRequests = ref<RegistrationRequest[]>([])
 
 onMounted(async () => {
-  try {
-    loadingOverlay.startLoading()
-    registrationRequests.value = await getAllRegistrationRequests(userInfo.token)
-  } finally {
-    loadingOverlay.stopLoading()
-  }
+  registrationRequests.value = await getAllRegistrationRequests(userInfo.token)
 })
 </script>

src/views/admin/ManageUsersView.vue

@@ -23,8 +23,10 @@ const unregisteredUsers = ref<RegistrationRequest[]>()
 onMounted(async () => {
   try {
     loadingOverlay.startLoading()
-    registeredUsers.value = await getAllUsers(userInfo.token)
-    unregisteredUsers.value = await getAllRegistrationRequests(userInfo.token)
+    Promise.all([
+      (registeredUsers.value = await getAllUsers(userInfo.token)),
+      (unregisteredUsers.value = await getAllRegistrationRequests(userInfo.token)),
+    ])
   } finally {
     loadingOverlay.stopLoading()
   }
@@ -81,7 +83,10 @@ function showToastMessage(msg: string) {
         <div>
           <ul class="list rounded-box">
             <li class="list-row" v-for="user in registeredUsers" :key="user.email">
-              <span v-if="user.role == Role.Admin" class="fa-solid fa-user-tie text-2xl self-center"></span>
+              <span
+                v-if="user.role == Role.Admin"
+                class="fa-solid fa-user-tie text-2xl self-center"
+              ></span>
               <span v-else class="fa-solid fa-user text-2xl self-center"></span>
               <div class="list-col-grow flex flex-col">
                 <div>{{ user.nickname }}</div>
@@ -103,7 +108,12 @@ function showToastMessage(msg: string) {
       </div>
       <div>
         <hr class="my-4 border-gray-300" />
-        <h1 class="text-2xl dark:text-white text-center" v-if="!!unregisteredUsers && unregisteredUsers?.length > 0">Registration requests</h1>
+        <h1
+          class="text-2xl dark:text-white text-center"
+          v-if="!!unregisteredUsers && unregisteredUsers?.length > 0"
+        >
+          Registration requests
+        </h1>
         <div>
           <ul class="list rounded-box">
             <li class="list-row" v-for="user in unregisteredUsers" :key="user.email">
@@ -128,7 +138,10 @@ function showToastMessage(msg: string) {
               </div>
             </li>
           </ul>
-          <div v-if="unregisteredUsers?.length === 0" class="flex text-center text-gray-500 justify-center items-center min-h-[20vh]">
+          <div
+            v-if="unregisteredUsers?.length === 0"
+            class="flex text-center text-gray-500 justify-center items-center min-h-[20vh]"
+          >
             <p class="text-2xl">No registration requests...</p>
           </div>
         </div>

src/views/automations/AutomationsView.vue

@@ -17,10 +17,8 @@ const loadingOverlay = useLoadingOverlayStore()
 
 onMounted(async () => {
   try {
-    loadingOverlay.startLoading()
     automations.value = await getAllAutomations(userInfo.token)
   } finally {
-    loadingOverlay.stopLoading()
   }
 })
 
@@ -96,8 +94,8 @@ async function toggle(automation: Automation) {
         </p>
         <ul class="list-disc list-inside">
           <li>
-            <span class="font-bold">Execution</span>: When enabled, an automation is executed automatically based
-            on a trigger. Can be disabled from the toggle next to it.
+            <span class="font-bold">Execution</span>: When enabled, an automation is executed
+            automatically based on a trigger. Can be disabled from the toggle next to it.
             <ul class="list-disc list-inside ml-4">
               <li>
                 <span class="font-bold">Device event trigger</span>: Execute the automation if a

src/views/devices/DevicesView.vue

@@ -7,13 +7,11 @@ import { DeviceGroupId, type DeviceGroup } from '@/model/devices-management/Devi
 import type { Device } from '@/model/devices-management/Device'
 import { getAllDeviceGroups } from '@/api/devices-management/requests/device-groups'
 import { getAllDevices } from '@/api/devices-management/requests/devices'
-import { useLoadingOverlayStore } from '@/stores/loading-overlay'
 import NavbarLayout from '@/components/NavbarLayout.vue'
 import router from '@/router'
 import DeviceGroupsButton from '@/components/DeviceGroupsButton.vue'
 
 const userInfo = useUserInfoStore()
-const loadingOverlay = useLoadingOverlayStore()
 const groups = ref<DeviceGroup[] | undefined>(undefined)
 const selectedGroupId = ref<DeviceGroupId | undefined>(getGroupQueryParam())
 const devices = ref<Device[] | undefined>(undefined)
@@ -46,20 +44,10 @@ function closeDropdown() {
 }
 
 onMounted(async () => {
-  loadingOverlay.startLoading()
-  try {
-    groups.value = await getAllDeviceGroups(userInfo.token)
-  } finally {
-    loadingOverlay.stopLoading()
-  }
+  groups.value = await getAllDeviceGroups(userInfo.token)
 })
 onMounted(async () => {
-  loadingOverlay.startLoading()
-  try {
-    devices.value = await getAllDevices(userInfo.token)
-  } finally {
-    loadingOverlay.stopLoading()
-  }
+  devices.value = await getAllDevices(userInfo.token)
 })
 </script>
 

src/views/tasks/TasksView.vue

@@ -16,12 +16,7 @@ const tasks = ref<Task[]>()
 const loadingOverlay = useLoadingOverlayStore()
 
 onMounted(async () => {
-  try {
-    loadingOverlay.startLoading()
-    tasks.value = await getAllTasks(userInfo.token)
-  } finally {
-    loadingOverlay.stopLoading()
-  }
+  tasks.value = await getAllTasks(userInfo.token)
 })
 
 async function startTask(taskId: TaskId) {