chore: create new observer

packages/core/src/components/bal-carousel/bal-carousel.tsx

@@ -22,7 +22,7 @@ import { BalMutationObserver, ListenToMutation } from '../../utils/mutation'
 import { BalResizeObserver, ListenToResize } from '../../utils/resize'
 import { BalConfigState, BalLanguage, ListenToConfig, defaultConfig } from '../../utils/config'
 import { SwiperChildItem, SwiperInterface, SwiperUtil } from '../../utils/swiper'
-import { isChildOfEventTarget, rIC, waitAfterIdleCallback, waitForRequestIdleCallback } from '../../utils/helpers'
+import { BalVisibilityObserver, ListenToVisibility } from '../../utils/visibility'
 
 @Component({
   tag: 'bal-carousel',
@@ -35,6 +35,7 @@ export class Carousel
     BalSwipeObserver,
     BalMutationObserver,
     BalResizeObserver,
+    BalVisibilityObserver,
     SwiperInterface
 {
   swiper = new SwiperUtil()
@@ -164,10 +165,6 @@ export class Carousel
     this.onValueChange()
   }
 
-  componentDidLoad(): void {
-    this.swiper.componentDidLoad()
-  }
-
   disconnectedCallback(): void {
     this.swiper.disconnectedCallback()
   }
@@ -191,6 +188,11 @@ export class Carousel
     this.swiper.notifyChange()
   }
 
+  @ListenToVisibility()
+  visibilityListener(): void {
+    this.swiper.notifyChange()
+  }
+
   @ListenToSwipe()
   swipeListener({ left, right }: BalSwipeInfo) {
     if (left) {

packages/core/src/components/bal-tabs/bal-tabs.tsx

@@ -41,6 +41,7 @@ import { TabNav } from './components/tab-nav'
 import { toKebabCase } from '../../utils/string'
 import { SwiperChildItem, SwiperInterface, SwiperUtil } from '../../utils/swiper'
 import { BalSwipeInfo, ListenToSwipe } from '../../utils/swipe'
+import { BalVisibilityObserver, ListenToVisibility } from '../../utils/visibility'
 
 @Component({
   tag: 'bal-tabs',
@@ -54,6 +55,7 @@ export class Tabs
     BalMutationObserver,
     BalBreakpointObserver,
     BalResizeObserver,
+    BalVisibilityObserver,
     SwiperInterface
 {
   private tabsId = `bal-tabs-${TabsIds++}`
@@ -273,7 +275,6 @@ export class Tabs
   }
 
   componentDidLoad() {
-    this.swiper.componentDidLoad()
     this.onOptionChange()
     rOnLoad(() => {
       this.enableLineRender = true
@@ -298,6 +299,11 @@ export class Tabs
     this.swiper.notifyChange()
   }
 
+  @ListenToVisibility()
+  visibilityListener(): void {
+    this.swiper.notifyChange()
+  }
+
   @ListenToBreakpoints()
   breakpointListener(breakpoints: BalBreakpoints): void {
     this.isMobile = breakpoints.mobile

packages/core/src/utils/swiper/swiper.util.tsx

@@ -51,28 +51,6 @@ export class SwiperUtil {
     addEventListener(window, 'mousedown', this.pointerDown)
   }
 
-  public componentDidLoad() {
-    const observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            this.notifyChange()
-          }
-        })
-      },
-      {
-        root: null, // Use the viewport as the container
-        threshold: 0.5, // Trigger when 50% of the element is visible
-      },
-    )
-
-    // Target the element you want to observe
-    const targetElement = this.component.el
-    if (targetElement) {
-      observer.observe(targetElement)
-    }
-  }
-
   public disconnectedCallback() {
     removeEventListener(window, 'keydown', this.listenToKeyDown)
     removeEventListener(this.component.el, 'focusin', this.updateFocus)

packages/core/src/utils/visibility/index.ts

@@ -0,0 +1,2 @@
+export * from './visibility.interfaces'
+export * from './visibility.decorator'

packages/core/src/utils/visibility/visibility.decorator.ts

@@ -0,0 +1,36 @@
+import { ComponentInterface } from '@stencil/core'
+import { BalVisibilityObserver } from './visibility.interfaces'
+import { BalVisibilitySubject } from './visibility.subject'
+
+export function ListenToVisibility() {
+  return function (
+    target: ComponentInterface & BalVisibilityObserver,
+    _propertyKey: string,
+    _descriptor: PropertyDescriptor,
+  ) {
+    const { connectedCallback, componentDidLoad, disconnectedCallback } = target
+
+    target.connectedCallback = function () {
+      if (!this._balVisibilitySubject) {
+        this._balVisibilitySubject = new BalVisibilitySubject()
+      }
+
+      return connectedCallback && connectedCallback.call(this)
+    }
+
+    target.componentDidLoad = function () {
+      this._balVisibilitySubject.attach(this)
+
+      return componentDidLoad && componentDidLoad.call(this)
+    }
+
+    target.disconnectedCallback = function () {
+      if (this._balVisibilitySubject) {
+        this._balVisibilitySubject.detach()
+        this._balVisibilitySubject = undefined
+      }
+
+      return disconnectedCallback && disconnectedCallback.call(this)
+    }
+  }
+}

packages/core/src/utils/visibility/visibility.interfaces.ts

@@ -0,0 +1,4 @@
+export interface BalVisibilityObserver {
+  el: HTMLElement
+  visibilityListener(): void
+}

packages/core/src/utils/visibility/visibility.listener.ts

@@ -0,0 +1,43 @@
+import { deepReady, waitAfterFramePaint } from '../helpers'
+import { ListenerAbstract } from '../types/listener'
+
+export class BalVisibilityListener extends ListenerAbstract {
+  private waitAfterFramePrint = false
+  private intersectionObserver: IntersectionObserver | undefined = undefined
+
+  async connect(el: HTMLElement) {
+    super.connect(el)
+    if (typeof IntersectionObserver === 'undefined') {
+      return
+    }
+    if (this.waitAfterFramePrint) {
+      await deepReady(el)
+      await waitAfterFramePaint()
+    }
+    this.destroyMutationObserver()
+    this.intersectionObserver = new IntersectionObserver(this.intersectionCallback, {
+      root: null, // Use the viewport as the container
+      threshold: 0.5, // Trigger when 50% of the element is visible
+    })
+    this.intersectionObserver.observe(el)
+  }
+
+  disconnect(): void {
+    super.disconnect()
+    this.destroyMutationObserver()
+  }
+
+  private intersectionCallback = (records: IntersectionObserverEntry[]) => {
+    const isIntersecting = records.some(record => record.isIntersecting)
+    if (isIntersecting) {
+      this.notify()
+    }
+  }
+
+  private destroyMutationObserver() {
+    if (this.intersectionObserver !== undefined) {
+      this.intersectionObserver.disconnect()
+      this.intersectionObserver = undefined
+    }
+  }
+}

packages/core/src/utils/visibility/visibility.subject.ts

@@ -0,0 +1,27 @@
+import { debounce } from '../helpers'
+import { SingleSubject } from '../types/signal'
+import { BalVisibilityObserver } from './visibility.interfaces'
+import { BalVisibilityListener } from './visibility.listener'
+
+export class BalVisibilitySubject extends SingleSubject<BalVisibilityObserver> {
+  private listener?: BalVisibilityListener
+  private debouncedNotify = debounce(() => this.notify(), 50)
+
+  constructor() {
+    super(observer => {
+      observer.visibilityListener()
+    })
+    this.listener = new BalVisibilityListener()
+  }
+
+  override attach(observer: BalVisibilityObserver): void {
+    super.attach(observer)
+    this.listener?.connect(observer.el)
+    this.listener?.add(() => this.debouncedNotify())
+  }
+
+  override detach(): void {
+    super.detach()
+    this.listener?.disconnect()
+  }
+}