Mobile queue fixes

CHANGELOG.md

@@ -52,6 +52,7 @@
 - Better errors when you define two Blocks and reference components in one Blocks from the events in the other Blocks [@abidlabs](https://github.com/abidlabs) in [PR 4738](https://github.com/gradio-app/gradio/pull/4738).
 - Better message when share link is not created by [@abidlabs](https://github.com/abidlabs) in [PR 4773](https://github.com/gradio-app/gradio/pull/4773).
 - Improve accessibility around selected images in gr.Gallery component by [@hannahblair](https://github.com/hannahblair) in [PR 4790](https://github.com/gradio-app/gradio/pull/4790)
+- Warning on mobile that if a user leaves the tab, websocket connection may break. On broken connection, tries to rejoin queue and displays error conveying connection broke. By [@aliabid94](https://github.com/aliabid94) in [PR 4742](https://github.com/gradio-app/gradio/pull/4742)
 
 ## Breaking Changes:
 

client/js/src/client.ts

@@ -478,6 +478,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 								fire_event({
 									type: "status",
 									stage: "error",
+									broken: true,
 									message: BROKEN_CONNECTION_MSG,
 									queue: true,
 									endpoint: _endpoint,

client/js/src/types.ts

@@ -41,6 +41,7 @@ export interface Status {
 	code?: string;
 	success?: boolean;
 	stage: "pending" | "error" | "complete" | "generating";
+	broken?: boolean;
 	size?: number;
 	position?: number;
 	eta?: number;

js/app/src/Blocks.svelte

@@ -240,12 +240,30 @@
 		id: ++_error_id
 	});
 	let _error_id = -1;
+
+	let user_left_page: boolean = false;
+	document.addEventListener("visibilitychange", function () {
+		if (document.visibilityState === "hidden") {
+			user_left_page = true;
+		}
+	});
+
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 	const DUPLICATE_MESSAGE =
 		"There is a long queue of requests pending. Duplicate this Space to skip.";
+	const MOBILE_QUEUE_WARNING =
+		"On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.";
+	const MOBILE_RECONNECT_MESSAGE =
+		"Lost connection due to leaving page. Rejoining queue...";
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
+	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
+	const is_mobile_device =
+		/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+			navigator.userAgent
+		);
 	let showed_duplicate_message = false;
+	let showed_mobile_warning = false;
 
 	const trigger_api_call = async (
 		dep_index: number,
@@ -322,6 +340,18 @@
 							...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) => {
@@ -332,8 +362,16 @@
 
 						submission.destroy();
 					}
-
-					if (status.stage === "error") {
+					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,