Maintenance: Desktop - Improve form loading app-specific styles.

app/frontend/apps/desktop/form/index.ts

@@ -9,6 +9,7 @@ import type {
   InitializeAppForm,
 } from '#shared/types/form.ts'
 import type { ImportGlobEagerOutput } from '#shared/types/utils.ts'
+import { initializeFormClasses } from '#shared/components/Form/initializeFormClasses.ts'
 import { initializeToggleClasses } from '#shared/components/Form/fields/FieldToggle/initializeToggleClasses.ts'
 import { getCoreDesktopClasses } from './theme/global/getCoreDesktopClasses.ts'
 
@@ -44,6 +45,10 @@ export const initializeForm: InitializeAppForm = (app: App) => {
 }
 
 export const initializeFormFields = () => {
+  initializeFormClasses({
+    loading: 'my-9 fill-yellow-300',
+  })
+
   initializeToggleClasses({
     track:
       'bg-stone-200 dark:bg-gray-500 ring-1 ring-neutral-100 dark:ring-gray-900 hover:outline hover:outline-1 hover:outline-offset-2 hover:outline-blue-600 dark:hover:outline-blue-900 focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-blue-800 hover:focus:outline-blue-800 dark:hover:focus:outline-blue-800 formkit-invalid:outline formkit-invalid:outline-1 formkit-invalid:outline-offset-2 formkit-invalid:outline-red-500 dark:hover:formkit-invalid:outline-red-500 formkit-errors:outline formkit-errors:outline-1 formkit-errors:outline-offset-2 formkit-errors:outline-red-500 dark:hover:formkit-errors:outline-red-500',

app/frontend/apps/desktop/initializer/desktopIconsAliasesMap.ts

@@ -59,7 +59,7 @@ export default {
 
   // these aliases are used in shared context, but they refer to the same name
   search: 'search',
-  loading: 'loading',
+  loading: 'spinner',
   show: 'eye',
   hide: 'eye-slash',
 }

app/frontend/apps/mobile/form/index.ts

@@ -9,6 +9,7 @@ import type {
   InitializeAppForm,
 } from '#shared/types/form.ts'
 import type { ImportGlobEagerOutput } from '#shared/types/utils.ts'
+import { initializeFormClasses } from '#shared/components/Form/initializeFormClasses.ts'
 import { initializeToggleClasses } from '#shared/components/Form/fields/FieldToggle/initializeToggleClasses.ts'
 import getCoreClasses from './theme/global/getCoreMobileClasses.ts'
 
@@ -32,6 +33,10 @@ export const initializeForm: InitializeAppForm = (app: App) => {
 }
 
 export const initializeFormFields = () => {
+  initializeFormClasses({
+    loading: 'my-4',
+  })
+
   initializeToggleClasses({
     track:
       'bg-gray-300 border border-transparent focus-within:ring-1 focus-within:ring-white focus-within:ring-opacity-75 focus:outline-none formkit-invalid:border-solid formkit-invalid:border-red',

app/frontend/shared/components/Form/Form.vue

@@ -55,6 +55,7 @@ import { cloneAny } from '@formkit/utils'
 import { useFormUpdaterQuery } from './graphql/queries/formUpdater.api.ts'
 import { FormHandlerExecution, FormValidationVisibility } from './types.ts'
 import { getNodeByName as getFormkitFieldNode } from './utils.ts'
+import { getFormClasses } from './initializeFormClasses.ts'
 import type {
   ChangedField,
   FormSubmitData,
@@ -1174,6 +1175,8 @@ if (props.schema) {
     initializeFormSchema()
   }
 }
+
+const classMap = getFormClasses()
 </script>
 
 <script lang="ts">
@@ -1187,7 +1190,7 @@ export default {
     v-if="debouncedShowInitialLoadingAnimation"
     class="flex items-center justify-center"
   >
-    <CommonIcon name="loading" animation="spin" />
+    <CommonIcon :class="classMap.loading" name="loading" animation="spin" />
   </div>
   <FormKit
     v-if="

app/frontend/shared/components/Form/initializeFormClasses.ts

@@ -0,0 +1,14 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import type { FormClassMap } from './types.ts'
+
+// Provide your own map with the following keys, the values given here are just examples.
+let formClasses: FormClassMap = {
+  loading: 'form-loading',
+}
+
+export const initializeFormClasses = (classes: FormClassMap) => {
+  formClasses = classes
+}
+
+export const getFormClasses = () => formClasses

app/frontend/shared/components/Form/types.ts

@@ -253,3 +253,6 @@ export interface FormStep {
   disabled: boolean
   completed: boolean
 }
+
+export type FormClass = 'loading'
+export type FormClassMap = Record<FormClass, string>