fix: waiting modal flickering when quick response or error

app/src/api/api.ts

@@ -7,7 +7,11 @@ import {
 } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
 import type { Obj } from '@/types/commons'
-import { APIUnauthorizedError, type APIError } from './errors'
+import {
+  APIBadRequestError,
+  APIUnauthorizedError,
+  type APIError,
+} from './errors'
 import { getError, getResponseData, openWebSocket } from './handlers'
 
 export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
@@ -143,8 +147,13 @@ export default {
 
     if (!response.ok) {
       const errorData = await getResponseData<string | APIErrorData>(response)
-      endRequest({ request, success: false })
-      throw getError(request, response, errorData)
+      const err = getError(request, response, errorData)
+      endRequest({
+        request,
+        success: false,
+        isFormError: err instanceof APIBadRequestError,
+      })
+      throw err
     }
 
     const responseData = await getResponseData<T>(response)

app/src/components/modals/ModalOverlay.vue

@@ -30,6 +30,7 @@ defineSlots<{
     no-close-on-backdrop
     no-close-on-esc
     :hide-footer="hideFooter"
+    no-fade
   >
     <template #header>
       <QueryHeader type="overlay" :request="request" tabindex="0" />

app/src/components/modals/ModalWaiting.vue

@@ -26,7 +26,7 @@ const progress = computed(() => {
 <template>
   <ModalOverlay :request="request">
     <h5
-      v-t="messages || progress ? 'api.processing' : 'api.waiting'"
+      v-t="messages || progress ? 'api.processing' : 'api_waiting'"
       class="text-center mt-4"
     />
 

app/src/composables/useRequests.ts

@@ -23,6 +23,7 @@ export type APIRequest = {
   err?: APIError
   action?: APIActionProps
   showModal?: boolean
+  showModalTimeout?: number
 }
 type APIActionProps = {
   messages: RequestMessage[]
@@ -107,12 +108,12 @@ export const useRequests = createGlobalState(() => {
     const r = requests.value[requests.value.length - 1]!
 
     if (showModal) {
-      setTimeout(() => {
+      request.showModalTimeout = setTimeout(() => {
         // Display the waiting modal only if the request takes some time.
         if (r.status === 'pending') {
           r.showModal = true
         }
-      }, 300)
+      }, 300) as unknown as number
     }
 
     return r
@@ -121,12 +122,14 @@ export const useRequests = createGlobalState(() => {
   function endRequest({
     request,
     success,
+    isFormError = false,
   }: {
     request: APIRequest
     success: boolean
+    isFormError?: boolean
   }) {
     let status: RequestStatus = success ? 'success' : 'error'
-    let hideModal = success
+    let hideModal = success || isFormError
 
     if (success && request.action) {
       const { warnings, errors, messages } = request.action
@@ -137,6 +140,12 @@ export const useRequests = createGlobalState(() => {
       if (errors || warnings) status = 'warning'
     }
 
+    if (request.showModalTimeout) {
+      // Clear the timeout to avoid delayed modal to show up
+      clearTimeout(request.showModalTimeout)
+      delete request.showModalTimeout
+    }
+
     setTimeout(() => {
       request.status = status