From e3124b1905447198c11e655edad9166ea0197269 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Tue, 4 Feb 2025 11:31:00 +0400
Subject: [PATCH] refactor: use _onResize instead of IntersectionObserver
 (#8620) (#8629)

---
 .../form-layout/src/vaadin-form-layout.js     | 38 +++++--------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/packages/form-layout/src/vaadin-form-layout.js b/packages/form-layout/src/vaadin-form-layout.js
index faef8e4ea0f..867358567aa 100644
--- a/packages/form-layout/src/vaadin-form-layout.js
+++ b/packages/form-layout/src/vaadin-form-layout.js
@@ -240,11 +240,6 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
       _labelsOnTop: {
         type: Boolean,
       },
-
-      /** @private */
-      __isVisible: {
-        type: Boolean,
-      },
     };
   }
 
@@ -269,27 +264,6 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
     this.addEventListener('animationend', this.__onAnimationEnd);
   }
 
-  constructor() {
-    super();
-
-    this.__intersectionObserver = new IntersectionObserver((entries) => {
-      // If the browser is busy (e.g. due to slow rendering), multiple entries can
-      // be queued and then passed to the callback invocation at once. Make sure we
-      // use the most recent entry to detect whether the layout is visible or not.
-      // See https://github.com/vaadin/web-components/issues/8564
-      const entry = [...entries].pop();
-      if (!entry.isIntersecting) {
-        // Prevent possible jump when layout becomes visible
-        this.$.layout.style.opacity = 0;
-      }
-      if (!this.__isVisible && entry.isIntersecting) {
-        this._updateLayout();
-        this.$.layout.style.opacity = '';
-      }
-      this.__isVisible = entry.isIntersecting;
-    });
-  }
-
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
@@ -298,7 +272,6 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
     requestAnimationFrame(() => this._updateLayout());
 
     this._observeChildrenColspanChange();
-    this.__intersectionObserver.observe(this.$.layout);
   }
 
   /** @protected */
@@ -307,7 +280,6 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
 
     this.__mutationObserver.disconnect();
     this.__childObserver.disconnect();
-    this.__intersectionObserver.disconnect();
   }
 
   /** @private */
@@ -580,8 +552,16 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
    * @protected
    * @override
    */
-  _onResize() {
+  _onResize(contentRect) {
+    if (contentRect.width === 0 && contentRect.height === 0) {
+      this.$.layout.style.opacity = '0';
+      return;
+    }
+
     this._selectResponsiveStep();
+    this._updateLayout();
+
+    this.$.layout.style.opacity = '';
   }
 }