Added visual feedback when loading dynamic imports

client/src/components/forms/LoginForm.vue

@@ -46,8 +46,6 @@ async function onSubmit() {
       return
     }
 
-    waiting.value = true
-
     const response = await api.login(state)
 
     if (response?.status === ResponseStatus.Success) {
@@ -56,13 +54,13 @@ async function onSubmit() {
 
         session.setUser({ role: payload.role, userId: payload.userId }, true)
 
-        waiting.value = false
-
         if (payload.role === 'administrator') {
+          waiting.value = true
           router.push({
             name: 'buildings'
           })
         } else if (payload.role === 'user') {
+          waiting.value = true
           router.push({
             name: 'apartments'
           })
@@ -95,7 +93,10 @@ async function onSubmit() {
       </div>
       <div class="form-section">
         <MessageBox v-if="message || props.msg" :msg="message || props.msg" :type="props.msg ? 'warning' : 'danger'" />
-        <button class="button primary" type="submit" :disabled="waiting">Anmelden</button>
+        <button class="button primary" type="submit" :disabled="waiting">
+          <span v-if="!waiting">Anmelden</span>
+          <font-awesome-icon v-else icon="fa-solid fa-spinner" />
+        </button>
       </div>
     </form>
     <div class="section center">

client/src/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faBell } from '@fortawesome/free-regular-svg-icons'
-import { faArrowRightFromBracket, faBars, faChevronDown, faChevronUp, faPen, faPlus, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { faArrowRightFromBracket, faBars, faChevronDown, faChevronUp, faPen, faPlus, faSpinner, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import App from './App.vue'
@@ -10,7 +10,7 @@ import router from './router'
 
 import './assets/main.css'
 
-library.add(faArrowRightFromBracket, faBars, faBell, faChevronDown, faChevronUp, faPen, faPlus, faXmark)
+library.add(faArrowRightFromBracket, faBars, faBell, faChevronDown, faChevronUp, faPen, faPlus, faSpinner, faXmark)
 
 const app = createApp(App)