From 78e7cf5163e8d205e8999428fce4c02dbdece25f Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Thu, 28 Sep 2023 19:19:59 +0100
Subject: [PATCH] ensure internal data has updated before dispatching `success`
 or `then` events (#5705)

* ensure internal data has updated before dispatching then or success events

* ensure internal data has updated before dispatching then or success events

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
---
 .changeset/rare-lines-show.md |   7 ++
 client/js/src/client.ts       |   2 +-
 js/app/src/Blocks.svelte      | 138 +++++++++++++++++-----------------
 3 files changed, 78 insertions(+), 69 deletions(-)
 create mode 100644 .changeset/rare-lines-show.md

diff --git a/.changeset/rare-lines-show.md b/.changeset/rare-lines-show.md
new file mode 100644
index 0000000000..861146f7d9
--- /dev/null
+++ b/.changeset/rare-lines-show.md
@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/client": patch
+"gradio": patch
+---
+
+fix:ensure internal data has updated before dispatching `success` or `then` events
diff --git a/client/js/src/client.ts b/client/js/src/client.ts
index b5e9e899ee..6df036f54c 100644
--- a/client/js/src/client.ts
+++ b/client/js/src/client.ts
@@ -379,9 +379,9 @@ export function api_factory(fetch_implementation: typeof fetch): Client {
 							if (status.stage === "error") rej(status);
 							if (status.stage === "complete") {
 								status_complete = true;
-								app.destroy();
 								// if complete message comes after data, resolve here
 								if (data_returned) {
+									app.destroy();
 									res(result);
 								}
 							}
diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte
index 2c64904e58..fa37cb3682 100644
--- a/js/app/src/Blocks.svelte
+++ b/js/app/src/Blocks.svelte
@@ -436,80 +436,82 @@
 					handle_update(data, fn_index);
 				})
 				.on("status", ({ fn_index, ...status }) => {
-					//@ts-ignore
-					loading_status.update({
-						...status,
-						status: status.stage,
-						progress: status.progress_data,
-						fn_index
-					});
-					if (
-						!showed_duplicate_message &&
-						space_id !== null &&
-						status.position !== undefined &&
-						status.position >= 2 &&
-						status.eta !== undefined &&
-						status.eta > SHOW_DUPLICATE_MESSAGE_ON_ETA
-					) {
-						showed_duplicate_message = true;
-						messages = [
-							new_message(DUPLICATE_MESSAGE, fn_index, "warning"),
-							...messages
-						];
-					}
-					if (
-						!showed_mobile_warning &&
-						is_mobile_device &&
-						status.eta !== undefined &&
-						status.eta > SHOW_MOBILE_QUEUE_WARNING_ON_ETA
-					) {
-						showed_mobile_warning = true;
-						messages = [
-							new_message(MOBILE_QUEUE_WARNING, fn_index, "warning"),
-							...messages
-						];
-					}
-
-					if (status.stage === "complete") {
-						dependencies.map(async (dep, i) => {
-							if (dep.trigger_after === fn_index) {
-								trigger_api_call(i);
-							}
+					tick().then(() => {
+						//@ts-ignore
+						loading_status.update({
+							...status,
+							status: status.stage,
+							progress: status.progress_data,
+							fn_index
 						});
-
-						submission.destroy();
-					}
-					if (status.broken && is_mobile_device && user_left_page) {
-						window.setTimeout(() => {
+						if (
+							!showed_duplicate_message &&
+							space_id !== null &&
+							status.position !== undefined &&
+							status.position >= 2 &&
+							status.eta !== undefined &&
+							status.eta > SHOW_DUPLICATE_MESSAGE_ON_ETA
+						) {
+							showed_duplicate_message = true;
 							messages = [
-								new_message(MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
-								...messages
-							];
-						}, 0);
-						trigger_api_call(dep_index, event_data);
-						user_left_page = false;
-					} else if (status.stage === "error") {
-						if (status.message) {
-							const _message = status.message.replace(
-								MESSAGE_QUOTE_RE,
-								(_, b) => b
-							);
-							messages = [
-								new_message(_message, fn_index, "error"),
+								new_message(DUPLICATE_MESSAGE, fn_index, "warning"),
+								...messages
+							];
+						}
+						if (
+							!showed_mobile_warning &&
+							is_mobile_device &&
+							status.eta !== undefined &&
+							status.eta > SHOW_MOBILE_QUEUE_WARNING_ON_ETA
+						) {
+							showed_mobile_warning = true;
+							messages = [
+								new_message(MOBILE_QUEUE_WARNING, fn_index, "warning"),
 								...messages
 							];
 						}
-						dependencies.map(async (dep, i) => {
-							if (
-								dep.trigger_after === fn_index &&
-								!dep.trigger_only_on_success
-							) {
-								trigger_api_call(i);
-							}
-						});
 
-						submission.destroy();
-					}
+						if (status.stage === "complete") {
+							dependencies.map(async (dep, i) => {
+								if (dep.trigger_after === fn_index) {
+									trigger_api_call(i);
+								}
+							});
+
+							submission.destroy();
+						}
+						if (status.broken && is_mobile_device && user_left_page) {
+							window.setTimeout(() => {
+								messages = [
+									new_message(MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
+									...messages
+								];
+							}, 0);
+							trigger_api_call(dep_index, event_data);
+							user_left_page = false;
+						} else if (status.stage === "error") {
+							if (status.message) {
+								const _message = status.message.replace(
+									MESSAGE_QUOTE_RE,
+									(_, b) => b
+								);
+								messages = [
+									new_message(_message, fn_index, "error"),
+									...messages
+								];
+							}
+							dependencies.map(async (dep, i) => {
+								if (
+									dep.trigger_after === fn_index &&
+									!dep.trigger_only_on_success
+								) {
+									trigger_api_call(i);
+								}
+							});
+
+							submission.destroy();
+						}
+					});
 				})
 				.on("log", ({ log, fn_index, level }) => {
 					messages = [new_message(log, fn_index, level), ...messages];