🐛 fix: optimize the resize observer to only notify when width or heig…

…ht changes of the component (#1559)

fix: optimize the resize observer to only notify when width or height changes of the component

.changeset/itchy-dogs-arrive.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**core**: optimize the resize observer to only notify when width or height changes of the component

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

@@ -6,6 +6,8 @@ import { BalResizeInfo } from './resize.interfaces'
 export class BalResizeListener<TObserver> extends ListenerAbstract<TObserver, BalResizeInfo> {
   private resizeObserver: ResizeObserver | undefined
   private debouncedNotify = debounce(() => this.notify(), 10)
+  private lastWidth = 0
+  private lastHeight = 0
 
   connect(el: HTMLElement): void {
     super.connect(el)
@@ -23,7 +25,14 @@ export class BalResizeListener<TObserver> extends ListenerAbstract<TObserver, Ba
           if (!Array.isArray(entries) || !entries.length) {
             return
           }
-          this.debouncedNotify()
+          const entry = entries[0]
+
+          // only notify if the width or the height of the component has changed
+          if (this.lastWidth !== entry.contentRect.width || this.lastHeight !== entry.contentRect.height) {
+            this.debouncedNotify()
+            this.lastWidth = entry.contentRect.width
+            this.lastHeight = entry.contentRect.height
+          }
         })
       }
     })