Wait for up to 1.5 seconds for external CSS to load

CHANGELOG.md

@@ -6,7 +6,8 @@ No changes to highlight.
 
 ## Bug Fixes:
 
-No changes to highlight.
+- Gradio will no longer hang forever when waiting for external CSS to load by [@akx](https://github.com/akx) in [PR 4335](https://github.com/gradio-app/gradio/pull/4335)
+
 
 ## Other Changes:
 

js/app/src/Index.svelte

@@ -100,7 +100,7 @@
 			style.innerHTML = css_string;
 			target.appendChild(style);
 		}
-		await mount_css(config.root + "/theme.css", document.head);
+		await mount_css(config.root + "/theme.css");
 		if (!config.stylesheets) return;
 
 		await Promise.all(
@@ -109,7 +109,8 @@
 					stylesheet.startsWith("http:") || stylesheet.startsWith("https:");
 				return mount_css(
 					absolute_link ? stylesheet : config.root + "/" + stylesheet,
-					document.head
+					// Wait up to 1.5 seconds for external stylesheets to load before continuing anyway.
+					absolute_link ? 1500 : undefined
 				);
 			})
 		);

js/app/src/css.ts

@@ -1,18 +1,32 @@
-export function mount_css(url: string, target: HTMLElement): Promise<void> {
+/**
+ * Loads a CSS file and appends it to the document head.
+ * The optional timeout parameter will resolve the promise without error
+ * if the CSS file has not loaded after the specified time.
+ *
+ * @param url URL to load.
+ * @param timeout Optional timeout, in milliseconds.
+ */
+export function mount_css(url: string, timeout?: number): Promise<unknown> {
 	const existing_link = document.querySelector(`link[href='${url}']`);
 
 	if (existing_link) return Promise.resolve();
 
 	const link = document.createElement("link");
 	link.rel = "stylesheet";
 	link.href = url;
-	// @ts-ignore
-	target.appendChild(link);
+	document.head.appendChild(link);
 
-	return new Promise((res, rej) => {
-		link.addEventListener("load", () => res());
-		link.addEventListener("error", () =>
-			rej(new Error(`Unable to preload CSS for ${url}`))
-		);
+	const loadPromise = new Promise((res, rej) => {
+		link.addEventListener("load", res);
+		link.addEventListener("error", (err) => {
+			console.error(`load_css: failed to load CSS`, url, err);
+			rej(err);
+		});
 	});
+
+	if (timeout) {
+		const timeoutPromise = new Promise((res) => setTimeout(res, timeout));
+		return Promise.race([loadPromise, timeoutPromise]);
+	}
+	return loadPromise;
 }

js/app/src/main.ts

@@ -20,10 +20,10 @@ function create_custom_element() {
 
 		async connectedCallback() {
 			if (typeof FONTS !== "string") {
-				FONTS.forEach((f) => mount_css(f, document.head));
+				FONTS.forEach(mount_css);
 			}
 
-			await mount_css(ENTRY_CSS, document.head);
+			await mount_css(ENTRY_CSS);
 
 			const event = new CustomEvent("domchange", {
 				bubbles: true,