From 27194a987fa7ba1234b5fc0ce8bf7fabef7033a9 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Wed, 1 Nov 2023 15:54:51 +0000
Subject: [PATCH] Ensure the statustracker for `gr.Image` displays in static
 mode (#6213)

* fix image statustracker

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/curly-radios-battle.md |  7 +++++++
 js/app/src/Blocks.svelte          | 23 ++++++++++++++++-------
 js/image/Index.svelte             |  2 --
 3 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/curly-radios-battle.md

diff --git a/.changeset/curly-radios-battle.md b/.changeset/curly-radios-battle.md
new file mode 100644
index 0000000000..71c10b6f3c
--- /dev/null
+++ b/.changeset/curly-radios-battle.md
@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/image": patch
+"gradio": patch
+---
+
+fix:Ensure the statustracker for `gr.Image` displays in static mode
diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte
index 5d58f95dc9..6e4fced920 100644
--- a/js/app/src/Blocks.svelte
+++ b/js/app/src/Blocks.svelte
@@ -433,10 +433,16 @@
 					tick().then(() => {
 						const outputs = dependencies[fn_index].outputs;
 						outputs.forEach((id) => {
-							if (instance_map[id].props.interactive && status.stage === "pending") {
-								pending_outputs.push(id)
+							if (
+								instance_map[id].props.interactive &&
+								status.stage === "pending"
+							) {
+								pending_outputs.push(id);
 								instance_map[id].props.interactive = false;
-							} else if (status.stage === "complete" && pending_outputs.includes(id)) {
+							} else if (
+								status.stage === "complete" &&
+								pending_outputs.includes(id)
+							) {
 								instance_map[id].props.interactive = true;
 							}
 						});
@@ -564,11 +570,14 @@
 		{} as Record<number, Record<string, number[]>>
 	);
 	async function handle_mount(): Promise<void> {
-		let blocks_frontend_fn = new AsyncFunction(
-			`let result = await (${js})();
+		if (js) {
+			let blocks_frontend_fn = new AsyncFunction(
+				`let result = await (${js})();
 					return (!Array.isArray(result)) ? [result] : result;`
-		);
-		blocks_frontend_fn();
+			);
+			blocks_frontend_fn();
+		}
+
 		await tick();
 
 		var a = target.getElementsByTagName("a");
diff --git a/js/image/Index.svelte b/js/image/Index.svelte
index 44995ec4c1..a1b0c89b9c 100644
--- a/js/image/Index.svelte
+++ b/js/image/Index.svelte
@@ -82,11 +82,9 @@
 		{min_width}
 	>
 		<StatusTracker
-			translucent={true}
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
-			show_progress="hidden"
 		/>
 		<StaticImage
 			on:select={({ detail }) => gradio.dispatch("select", detail)}