Motion examples using showField.svelte do not show/start until in view. (#821)

* Motion examples using showField.svelte do not show/start until in view.

used runed useIntersectionObserver
1 second delay after visibility
fires only once
added wrapping divs for reserved height for simplechart w/comment
removed TODO FIXED.md - old, never used, github takes precedence

* Motion examples using showField.svelte do not show/start until in view.

used runed useIntersectionObserver
1 second delay after visibility
fires only once
added wrapping divs for reserved height for simplechart w/comment
updated MotionPathControls to use showField
gave showfield option for "inline" not absolutely positioning
removed TODO FIXED.md - old, never used, github takes precedence

* Motion examples using showField.svelte do not show/start until in view.

updated multicontrols to use showField.svelte where appropriate.
updated additonal motion examples using those controls.

Author: cycle4passion

docs/ TODO FIXES.md

@@ -3,7 +3,7 @@
 	import ArcPlaygroundControls from '$lib/components/controls/ArcPlaygroundControls.svelte';
 
 	let config = $state({
-		show: true,
+		show: false,
 		value: 60,
 		spring: true,
 		domain: [0, 100] as [number, number],

docs/src/examples/components/Arc/playground.svelte

@@ -3,7 +3,7 @@
 	import { Arc, Chart, Layer } from 'layerchart';
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 
-	let show = $state(true);
+	let show = $state();
 	const data = {
 		arcs: [
 			{ initialValue: 0, value: 40, fillClass: 'fill-red-500', trackClass: 'fill-red-500/10' },

docs/src/examples/components/Arc/tween-value-on-mount.svelte

@@ -9,11 +9,12 @@
 	];
 	export { data };
 
-	let show = $state(true);
+	let show = $state();
 </script>
 
 <ShowField bind:show label="Show Arcs" />
 
+<!-- Note wrapping div is for demo purposes only (Toggling visibility), it is not required in your code. -->
 <div style:height="180px">
 	{#if show}
 		<ArcChart
@@ -31,6 +32,7 @@
 			outerRadius={-25}
 			innerRadius={-20}
 			cornerRadius={10}
+			height={180}
 		/>
 	{/if}
 </div>

docs/src/examples/components/ArcChart/series-motion-spring.svelte

@@ -9,11 +9,12 @@
 	];
 	export { data };
 
-	let show = $state(true);
+	let show = $state();
 </script>
 
 <ShowControl bind:show label="Show Arcs" />
 
+<!-- Note wrapping div is for demo purposes only (Toggling visibility), it is not required in your code. -->
 <div style:height="180px">
 	{#if show}
 		<ArcChart
@@ -31,6 +32,7 @@
 			outerRadius={-25}
 			innerRadius={-20}
 			cornerRadius={10}
+			height={180}
 		/>
 	{/if}
 </div>

docs/src/examples/components/ArcChart/series-motion-tween.svelte

@@ -5,7 +5,7 @@
 
 	import { createDateSeries } from '$lib/utils/data.js';
 
-	let show = $state(true);
+	let show = $state();
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 
 	export { data };

docs/src/examples/components/Area/clip-tween-on-mount.svelte

@@ -3,7 +3,7 @@
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 	import { createDateSeries } from '$lib/utils/data.js';
 
-	let show = $state(true);
+	let show = $state();
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>

docs/src/examples/components/Area/tween-on-mount.svelte

@@ -3,20 +3,23 @@
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 	import { createDateSeries } from '$lib/utils/data.js';
 
-	let show = $state(true);
+	let show = $state();
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
 <ShowControl bind:show label="Show Chart" />
 
-{#if show}
-	<AreaChart
-		{data}
-		x="date"
-		y="value"
-		props={{ area: { motion: 'tween' } }}
-		padding={defaultChartPadding({ right: 10 })}
-		height={300}
-	/>
-{/if}
+<!-- Note wrapping div is for demo purposes only (Toggling visibility), it is not required in your code. -->
+<div style:height="300px">
+	{#if show}
+		<AreaChart
+			{data}
+			x="date"
+			y="value"
+			props={{ area: { motion: 'tween' } }}
+			padding={defaultChartPadding({ right: 10 })}
+			height={300}
+		/>
+	{/if}
+</div>

docs/src/examples/components/AreaChart/motion-tween.svelte

@@ -3,19 +3,22 @@
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 	import { createDateSeries } from '$lib/utils/data.js';
 
-	let show = $state(true);
+	let show = $state();
 	const data = createDateSeries({ count: 10, min: 20, max: 100, value: 'integer' });
 	export { data };
 </script>
 
 <ShowControl bind:show label="Show Chart" />
 
-{#if show}
-	<BarChart
-		{data}
-		x="date"
-		y="value"
-		props={{ bars: { motion: { type: 'tween', duration: 500 } } }}
-		height={300}
-	/>
-{/if}
+<!-- Note wrapping div is for demo purposes only (Toggling visibility), it is not required in your code. -->
+<div style:height="300px">
+	{#if show}
+		<BarChart
+			{data}
+			x="date"
+			y="value"
+			props={{ bars: { motion: { type: 'tween', duration: 500 } } }}
+			height={300}
+		/>
+	{/if}
+</div>

docs/src/examples/components/BarChart/motion-tween.svelte

@@ -13,7 +13,7 @@
 		keys: ['value', 'baseline']
 	});
 
-	let show = $state(true);
+	let show = $state();
 
 	export { data };
 </script>