diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 18b9a0e9a5..547fff4723 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/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
 			}
 		}
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index c4f2a7b063..0cba4bca16 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/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
 		}
 	}