mount_css: add timeout; use it for external CSS

Refs #4332 (part of it anyway)

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

@@ -109,6 +109,8 @@
 					stylesheet.startsWith("http:") || stylesheet.startsWith("https:");
 				return mount_css(
 					absolute_link ? stylesheet : config.root + "/" + stylesheet,
+					// Wait up to 1.5 seconds for external stylesheets to load before continuing anyway.
+					absolute_link ? 1500 : undefined
 				);
 			})
 		);

js/app/src/css.ts

@@ -1,4 +1,12 @@
-export function mount_css(url: string): 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();
@@ -8,10 +16,17 @@ export function mount_css(url: string): Promise<void> {
 	link.href = url;
 	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;
 }