Load visible components in 6.0 (#12491)

Author: freddyaboulton

.changeset/hot-coins-deny.md

@@ -0,0 +1,10 @@
+---
+"@gradio/accordion": patch
+"@gradio/colorpicker": patch
+"@gradio/core": patch
+"@gradio/tabitem": patch
+"@gradio/tabs": patch
+"gradio": patch
+---
+
+fix:Load visible components in 6.0

demo/invisible_textbox/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: invisible_textbox"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    textbox = gr.Textbox(visible=False, interactive=True, elem_id=\"test-textbox\")\n", "\n", "    make_visible_btn = gr.Button(\"Show\")\n", "    hide = gr.Button(\"Hide\")\n", "    def show():\n", "        return gr.Textbox(visible=True)\n", "    make_visible_btn.click(fn=show, outputs=textbox)\n", "    hide.click(lambda: gr.Textbox(visible=False), outputs=textbox)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/invisible_textbox/run.py

@@ -0,0 +1,14 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    textbox = gr.Textbox(visible=False, interactive=True, elem_id="test-textbox")
+
+    make_visible_btn = gr.Button("Show")
+    hide = gr.Button("Hide")
+    def show():
+        return gr.Textbox(visible=True)
+    make_visible_btn.click(fn=show, outputs=textbox)
+    hide.click(lambda: gr.Textbox(visible=False), outputs=textbox)
+
+if __name__ == "__main__":
+    demo.launch()

js/accordion/Index.svelte

@@ -31,7 +31,10 @@
 	<Accordion
 		{label}
 		open={gradio.props.open}
-		on:expand={() => gradio.dispatch("expand")}
+		on:expand={() => {
+			gradio.dispatch("expand");
+			gradio.dispatch("gradio_expand");
+		}}
 		on:collapse={() => gradio.dispatch("collapse")}
 	>
 		<BaseColumn>

js/colorpicker/Index.svelte

@@ -14,8 +14,9 @@
 	import type { ColorPickerProps, ColorPickerEvents } from "./types";
 
 	let props = $props();
-	const gradio = new Gradio<ColorPickerEvents, ColorPickerProps>(props);
-	gradio.props.value = gradio.props.value ?? "#000000";
+	const gradio = new Gradio<ColorPickerEvents, ColorPickerProps>(props, {
+		value: "#000000"
+	});
 	let old_value = $state(gradio.props.value);
 	let label = $derived(
 		gradio.shared.label || gradio.i18n("color_picker.color_picker")

js/core/src/Blocks.svelte

@@ -104,27 +104,6 @@
 		}
 	});
 
-	let app_tree = new AppTree(
-		components,
-		layout,
-		dependencies,
-		{
-			root,
-			theme: theme_mode,
-			version,
-			api_prefix,
-			max_file_size,
-			autoscroll
-		},
-		app,
-		$reactive_formatter
-	);
-
-	setContext(GRADIO_ROOT, {
-		register: app_tree.register_component.bind(app_tree),
-		dispatcher: gradio_event_dispatcher
-	});
-
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
 
 	function gradio_event_dispatcher(
@@ -142,6 +121,12 @@
 			new_message("Warning", data as string, -1, event, 10, true);
 		} else if (event === "info") {
 			new_message("Info", data as string, -1, event, 10, true);
+		} else if (event === "gradio_expand" || event === "gradio_tab_select") {
+			const id_ =
+				event === "gradio_expand"
+					? id
+					: (data as { component_id: number }).component_id;
+			app_tree.render_previously_invisible_children(id_);
 		} else if (event == "clear_status") {
 			app_tree.update_state(
 				id,
@@ -173,6 +158,28 @@
 		}
 	}
 
+	let app_tree = new AppTree(
+		components,
+		layout,
+		dependencies,
+		{
+			root,
+			theme: theme_mode,
+			version,
+			api_prefix,
+			max_file_size,
+			autoscroll
+		},
+		app,
+		$reactive_formatter,
+		gradio_event_dispatcher
+	);
+
+	setContext(GRADIO_ROOT, {
+		register: app_tree.register_component.bind(app_tree),
+		dispatcher: gradio_event_dispatcher
+	});
+
 	let api_calls: Payload[] = $state([]);
 	let last_api_call: Payload | null = $state(null);
 	// We need a callback to add to api_calls from the DependencyManager

js/core/src/dependency.ts

@@ -320,7 +320,6 @@ export class DependencyManager {
 				`${event_meta.event_name}-${event_meta.target_id}`
 			);
 		}
-
 		for (let i = 0; i < (deps?.length || 0); i++) {
 			const dep = deps ? deps[i] : undefined;
 			if (dep) {