From 19705a9c2b245f31c9db2d08381eb5f38dd1a2b9 Mon Sep 17 00:00:00 2001
From: Andrey <andrey-git@users.noreply.github.com>
Date: Sun, 4 Mar 2018 20:22:53 +0200
Subject: [PATCH] IntersectionObserver fixes (#964)

* IntersectionObserver fixes

* handle 'card -> entities -> card' case

* fix typo
---
 src/cards/ha-card-chooser.html | 51 +++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/cards/ha-card-chooser.html b/src/cards/ha-card-chooser.html
index cfb846629a..19a0305f41 100644
--- a/src/cards/ha-card-chooser.html
+++ b/src/cards/ha-card-chooser.html
@@ -27,6 +27,33 @@ class HaCardChooser extends Polymer.Element {
     );
   }
 
+  createObserver() {
+    this._updatesAllowed = false;
+    this.observer = new IntersectionObserver((entries) => {
+      if (!entries.length) return;
+      if (entries[0].isIntersecting) {
+        this.style.height = '';
+        if (this._detachedChild) {
+          this.appendChild(this._detachedChild);
+          this._detachedChild = null;
+        }
+        this._updateCard(this.cardData); // Don't use 'newData' as it might have changed.
+        this._updatesAllowed = true;
+      } else {
+        // Set the card to be 48px high. Otherwise if the card is kept as 0px height then all
+        // following cards would trigger the observer at once.
+        const offsetHeight = this.offsetHeight;
+        this.style.height = `${offsetHeight || 48}px`;
+        if (this.lastChild) {
+          this._detachedChild = this.lastChild;
+          this.removeChild(this.lastChild);
+        }
+        this._updatesAllowed = false;
+      }
+    });
+    this.observer.observe(this);
+  }
+
   cardDataChanged(newData) {
     if (!newData) return;
     // ha-entities-card is exempt from observer as it doesn't load heavy resources.
@@ -43,29 +70,9 @@ class HaCardChooser extends Polymer.Element {
       return;
     }
     if (!this.observer) {
-      this.observer = new IntersectionObserver((entries) => {
-        if (!entries.length) return;
-        if (entries[0].isIntersecting) {
-          this.style.height = '';
-          if (this._detachedChild) {
-            this.appendChild(this._detachedChild);
-            this._detachedChild = null;
-          }
-          this._updateCard(this.cardData); // Don't use 'newData' as it might have chnaged.
-        } else {
-          // Set the card to be 48px high. Otherwise if the card is kept as 0px height then all
-          // following cards would trigger the observer at once.
-          const offsetHeight = this.offsetHeight;
-          this.style.height = `${offsetHeight || 48}px`;
-          if (this.lastChild) {
-            this._detachedChild = this.lastChild;
-            this.removeChild(this.lastChild);
-          }
-        }
-      });
-      this.observer.observe(this);
+      this.createObserver();
     }
-    if (!this._detachedChild) {
+    if (this._updatesAllowed) {
       this._updateCard(newData);
     }
   }