Added wrapper for transaction editor action clicks to handle loading state.

web-app/src/pages/transaction-editor/EditTransactionPage.vue

@@ -29,11 +29,13 @@ import {
   loadEditorContextFromRoute,
   NewTransactionEditorContext,
   TransactionEditorContext,
+  type TransactionEditorAction,
   type TransactionEditorContextBase,
   type TransactionEditorFormFields,
 } from './util'
 import ButtonBar from '@/components/common/ButtonBar.vue'
 import AppButton from '@/components/common/AppButton.vue'
+import { showAlert } from '@/util/alert'
 
 const route = useRoute()
 const router = useRouter()
@@ -87,6 +89,18 @@ onMounted(async () => {
   }
   formData.value = editorContext.value.initializeFormFields(route.query)
 })
+
+function onActionClicked(action: TransactionEditorAction) {
+  loading.value = true
+  action
+    .callback(formData.value, route, router)
+    .catch((err) => {
+      showAlert(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
 </script>
 <template>
   <AppPage :title="pageTitle">
@@ -240,7 +254,7 @@ onMounted(async () => {
           v-for="action in editorContext.getActions(formData)"
           :key="action.name"
           :disabled="action.disabled"
-          @click="action.callback(formData, route, router)"
+          @click="onActionClicked(action)"
         >
           {{ action.name }}
         </AppButton>