set app button loading state to true before worker execution (#7493)

frontend/src/lib/components/apps/components/buttons/AppButton.svelte

@@ -167,14 +167,30 @@
 			if (iterContext && listInputs) {
 				listInputs.set(id, inputOutput)
 			}
-			if (preclickAction) {
-				await preclickAction()
+
+			// Set loading state immediately for immediate visual feedback
+			// This ensures the spinner appears right away, even before the API request completes
+			if (runnableComponent) {
+				loading = true
 			}
 
-			if (!runnableComponent) {
-				runnableWrapper?.handleSideEffect(true)
-			} else {
-				await runnableComponent?.runComponent()
+			try {
+				if (preclickAction) {
+					await preclickAction()
+				}
+
+				if (!runnableComponent) {
+					runnableWrapper?.handleSideEffect(true)
+				} else {
+					await runnableComponent?.runComponent()
+				}
+			} catch (error) {
+				// If an error occurs before the job starts, reset loading state
+				// (If the job started, RunnableComponent will handle resetting loading)
+				if (runnableComponent) {
+					loading = false
+				}
+				throw error
 			}
 		}
 

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -557,6 +557,7 @@
 			let error = e?.body ?? e?.message
 			updateResult({ error })
 			$errorByComponent[id] = { error }
+			loading = false // Ensure loading is reset on any error
 		}
 	}