@gradio/tabs 0.5.10 → 0.5.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gradio/tabs
 
+## 0.5.11
+
+### Fixes
+
+- [#13240](https://github.com/gradio-app/gradio/pull/13240) [`0d670ad`](https://github.com/gradio-app/gradio/commit/0d670adf41a0b510f7fd745495dce1664d38f0e5) - Fix browser freeze when a dataframe's value is set (e.g. via a tab select event), and only dispatch the tabs select event when the selected tab actually changes.  Thanks @freddyaboulton!
+
 ## 0.5.10
 
 ### Fixes

package/Index.svelte

@@ -7,24 +7,26 @@
 	import Tabs from "./shared/Tabs.svelte";
 	import Walkthrough from "./shared/Walkthrough.svelte";
 	import type { TabsProps, TabsEvents } from "./types";
-	import { untrack } from "svelte";
 
 	let props = $props();
 	const gradio = new Gradio<TabsEvents, TabsProps>(props);
 
+	let old_selected = gradio.props.selected;
+
 	$effect(() => {
-		if (gradio.props.selected) {
-			untrack(() => {
-				const i = gradio.props.initial_tabs.findIndex(
-					(t) => t.id === gradio.props.selected
-				);
+		if (old_selected !== gradio.props.selected) {
+			const i = gradio.props.initial_tabs.findIndex(
+				(t) => t.id === gradio.props.selected
+			);
+			if (i >= 0) {
 				gradio.dispatch("gradio_tab_select", {
 					value: gradio.props.initial_tabs[i].label,
 					index: i,
 					id: gradio.props.initial_tabs[i].id,
 					component_id: gradio.props.initial_tabs[i].component_id
 				});
-			});
+			}
+			old_selected = gradio.props.selected;
 		}
 	});
 </script>

package/dist/Index.svelte

@@ -7,24 +7,26 @@
 	import Tabs from "./shared/Tabs.svelte";
 	import Walkthrough from "./shared/Walkthrough.svelte";
 	import type { TabsProps, TabsEvents } from "./types";
-	import { untrack } from "svelte";
 
 	let props = $props();
 	const gradio = new Gradio<TabsEvents, TabsProps>(props);
 
+	let old_selected = gradio.props.selected;
+
 	$effect(() => {
-		if (gradio.props.selected) {
-			untrack(() => {
-				const i = gradio.props.initial_tabs.findIndex(
-					(t) => t.id === gradio.props.selected
-				);
+		if (old_selected !== gradio.props.selected) {
+			const i = gradio.props.initial_tabs.findIndex(
+				(t) => t.id === gradio.props.selected
+			);
+			if (i >= 0) {
 				gradio.dispatch("gradio_tab_select", {
 					value: gradio.props.initial_tabs[i].label,
 					index: i,
 					id: gradio.props.initial_tabs[i].id,
 					component_id: gradio.props.initial_tabs[i].component_id
 				});
-			});
+			}
+			old_selected = gradio.props.selected;
 		}
 	});
 </script>

package/dist/shared/Tabs.svelte

@@ -37,16 +37,20 @@
 
 	// When initial_tabs changes (e.g. a non-mounted tab's props were updated),
 	// sync the internal tabs array so the tab buttons reflect the new state.
-	// Using a function call so the $: dependency is only on initial_tabs,
-	// not on tabs (which would cause a loop with register_tab).
+	// The tabs mutation is deferred via tick() because in Svelte 5 legacy mode
+	// $: effects track all reads inside called functions — writing tabs[i]
+	// through the $state proxy would track `tabs` as a dependency, creating
+	// an infinite self-triggering loop.
 	$: _sync_tabs(initial_tabs);
 
 	function _sync_tabs(new_tabs: Tab[]): void {
-		for (let i = 0; i < new_tabs.length; i++) {
-			if (new_tabs[i] && !mounted_tab_orders.has(i)) {
-				tabs[i] = new_tabs[i];
+		tick().then(() => {
+			for (let i = 0; i < new_tabs.length; i++) {
+				if (new_tabs[i] && !mounted_tab_orders.has(i)) {
+					tabs[i] = new_tabs[i];
+				}
 			}
-		}
+		});
 	}
 
 	$: has_tabs = tabs.length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",

package/shared/Tabs.svelte

@@ -37,16 +37,20 @@
 
 	// When initial_tabs changes (e.g. a non-mounted tab's props were updated),
 	// sync the internal tabs array so the tab buttons reflect the new state.
-	// Using a function call so the $: dependency is only on initial_tabs,
-	// not on tabs (which would cause a loop with register_tab).
+	// The tabs mutation is deferred via tick() because in Svelte 5 legacy mode
+	// $: effects track all reads inside called functions — writing tabs[i]
+	// through the $state proxy would track `tabs` as a dependency, creating
+	// an infinite self-triggering loop.
 	$: _sync_tabs(initial_tabs);
 
 	function _sync_tabs(new_tabs: Tab[]): void {
-		for (let i = 0; i < new_tabs.length; i++) {
-			if (new_tabs[i] && !mounted_tab_orders.has(i)) {
-				tabs[i] = new_tabs[i];
+		tick().then(() => {
+			for (let i = 0; i < new_tabs.length; i++) {
+				if (new_tabs[i] && !mounted_tab_orders.has(i)) {
+					tabs[i] = new_tabs[i];
+				}
 			}
-		}
+		});
 	}
 
 	$: has_tabs = tabs.length > 0;