From c3eb4b34f9d874c6d1a2f3d025cd3e71881a73e7 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 12 Mar 2024 16:32:40 -0700
Subject: [PATCH 1/3] Update resize observer to use `borderBoxSize` instead of
 `getBoundingClientRect()`

---
 .../resize_observer/resize_observer.tsx       | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index aa0b040ee14..9eafaea980d 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -28,12 +28,9 @@ export class EuiResizeObserver extends EuiObserver<EuiResizeObserverProps> {
     width: 0,
   };
 
-  onResize: ResizeObserverCallback = () => {
-    // `entry.contentRect` provides incomplete `height` and `width` data.
-    // Use `getBoundingClientRect` to account for padding and border.
-    // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly
-    if (!this.childNode) return;
-    const { height, width } = this.childNode.getBoundingClientRect();
+  onResize: ResizeObserverCallback = ([entry]) => {
+    const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
+
     // Check for actual resize event
     if (this.state.height === height && this.state.width === width) {
       return;
@@ -102,14 +99,11 @@ export const useResizeObserver = (
         height: boundingRect.height,
       });
 
-      const observer = makeResizeObserver(container, () => {
-        // `entry.contentRect` provides incomplete `height` and `width` data.
-        // Use `getBoundingClientRect` to account for padding and border.
-        // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly
-        const { height, width } = container.getBoundingClientRect();
+      const observer = makeResizeObserver(container, ([entry]) => {
+        const { inlineSize, blockSize } = entry.borderBoxSize[0];
         setSize({
-          width,
-          height,
+          width: inlineSize,
+          height: blockSize,
         });
       });
 

From 6df1915a19197598dfe784c8a06e04b4ba37c9fc Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 12 Mar 2024 16:59:43 -0700
Subject: [PATCH 2/3] changelog

---
 changelogs/upcoming/7575.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelogs/upcoming/7575.md

diff --git a/changelogs/upcoming/7575.md b/changelogs/upcoming/7575.md
new file mode 100644
index 00000000000..f41064b874d
--- /dev/null
+++ b/changelogs/upcoming/7575.md
@@ -0,0 +1 @@
+- Enhanced `EuiResizeObserver` and `useResizeObserver`'s performance to not trigger page reflows on resize event

From b5cdda06a6d3f2a23bdef146ef3cdd68e3be5253 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 12 Mar 2024 18:44:21 -0700
Subject: [PATCH 3/3] [hook] Remove initial `getBoundingClientRect` on mount

---
 .../observer/resize_observer/resize_observer.tsx          | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index 9eafaea980d..99af074afd4 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -91,14 +91,6 @@ export const useResizeObserver = (
 
   useEffect(() => {
     if (container != null) {
-      // ResizeObserver's first call to the observation callback is scheduled in the future
-      // so find the container's initial dimensions now
-      const boundingRect = container.getBoundingClientRect();
-      setSize({
-        width: boundingRect.width,
-        height: boundingRect.height,
-      });
-
       const observer = makeResizeObserver(container, ([entry]) => {
         const { inlineSize, blockSize } = entry.borderBoxSize[0];
         setSize({