From 7f1bbc8e5d4304ac8820b2fb0a9529a66dd5ca84 Mon Sep 17 00:00:00 2001
From: abergavenny <abergavenny@protonmail.ch>
Date: Wed, 10 Aug 2022 11:27:06 +0200
Subject: [PATCH] Added visual feedback when loading dynamic imports
---
client/src/components/forms/LoginForm.vue | 11 ++++++-----
client/src/main.js | 4 ++--
2 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/client/src/components/forms/LoginForm.vue b/client/src/components/forms/LoginForm.vue
index d0b0af7..3a9f8f8 100644
--- a/client/src/components/forms/LoginForm.vue
+++ b/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">
diff --git a/client/src/main.js b/client/src/main.js
index 450d891..0592689 100644
--- a/client/src/main.js
+++ b/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)
--
GitLab