intelliwaketssveltekitv25 0.1.135 → 0.1.138

package/dist/TabHeader.svelte

@@ -3,7 +3,7 @@
 	import { DeepEqual, SortCompare } from '@solidbasisventures/intelliwaketsfoundation'
 	import Icon from './Icon.svelte'
 	import { cubicInOut } from 'svelte/easing'
-	import { tick } from 'svelte'
+	import { onMount, tick } from 'svelte'
 	import { fly } from 'svelte/transition'
 
 	let {
@@ -16,6 +16,7 @@
 
 	let openedKeys = $state<string[]>([])
 	let controlElement = $state<HTMLDivElement | null>(null)
+	let isVisible = $state(false)
 
 	let visibleItems = $derived(tabItems.filter(tabItem => !tabItem.hidden))
 
@@ -47,9 +48,31 @@
 		}
 	}
 
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach(entry => {
+					isVisible = entry.isIntersecting
+				})
+			},
+			{ threshold: 0 }
+		)
+
+		if (controlElement) {
+			observer.observe(controlElement)
+		}
+
+		return () => {
+			if (controlElement) {
+				observer.unobserve(controlElement)
+			}
+		}
+	})
+
 	$effect(() => {
-		if (currentKey) {
-			setIndicatorStyle().then(() => {})
+		if (currentKey && isVisible) {
+			setIndicatorStyle().then(() => {
+			})
 		}
 	})
 

package/dist/TabHref.svelte

@@ -5,7 +5,7 @@
 	import { browser } from '$app/environment'
 	import { afterNavigate, goto } from '$app/navigation'
 	import { CoalesceFalsey, ReplaceAll } from '@solidbasisventures/intelliwaketsfoundation'
-	import { tick } from 'svelte'
+	import { onMount, tick } from 'svelte'
 	import Icon from './Icon.svelte'
 	import { cubicInOut } from 'svelte/easing'
 	import { fly } from 'svelte/transition'
@@ -43,9 +43,31 @@
 	let noDigitsBasePath = $derived((basePath ?? '').replace(/\d+/g, ''))
 	let basePathDigits = $derived((basePath ?? '').match(/\d+/g)?.join('') ?? '')
 	let controlElement = $state<HTMLDivElement | null>(null)
+	let isVisible = $state(false)
 
 	let pathAnalyzer = $derived((basePath && browser) ? new PathAnalyzer(page, basePath) : null)
 
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach(entry => {
+					isVisible = entry.isIntersecting
+				})
+			},
+			{ threshold: 0 }
+		)
+
+		if (controlElement) {
+			observer.observe(controlElement)
+		}
+
+		return () => {
+			if (controlElement) {
+				observer.unobserve(controlElement)
+			}
+		}
+	})
+
 	function getSlug(tabItem: ITabHref | null | undefined): string | null | undefined {
 		return !tabItem ? null : (tabItem.href ?? `${tabPrefix}${ReplaceAll(' ', '', tabItem.key)}`)
 	}
@@ -191,8 +213,9 @@
 	}
 
 	$effect(() => {
-		if (pathAnalyzer?.activePageSlug) {
-			setIndicatorStyle().then(() => {})
+		if (pathAnalyzer?.activePageSlug && isVisible) {
+			setIndicatorStyle().then(() => {
+			})
 		}
 	})
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelliwaketssveltekitv25",
-  "version": "0.1.135",
+  "version": "0.1.138",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",