Don't render cards when pane not visible

src/components/ha-cards.html

@@ -128,20 +128,27 @@
         type: Object,
       },
 
+      paneVisible: {
+        type: Boolean,
+      },
+
       cards: {
         type: Object,
       },
     },
 
     observers: [
-      'updateCards(columns, states, showIntroduction)',
+      'updateCards(columns, states, showIntroduction, paneVisible)',
     ],
 
-    updateCards: function (columns, states, showIntroduction) {
+    updateCards: function (columns, states, showIntroduction, paneVisible) {
+      if (!paneVisible) {
+        return;
+      }
       this.debounce(
         'updateCards',
-        function () { this.cards = this.computeCards(columns, states, showIntroduction); },
-        0
+        function () { this.cards = this.computeCards(columns, states,
+                                                     showIntroduction); }
       );
     },
 

src/layouts/home-assistant-main.html

@@ -30,6 +30,7 @@
         attr-for-selected='id'
         fallback-selection='panel-resolver'
         selected='[[activePane]]'
+        selected-attribute='pane-visible'
       >
         <partial-cards
           id='states'

src/layouts/partial-cards.html

@@ -54,7 +54,10 @@
 
       <ha-cards
         show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]'
-        states='[[states]]' columns='[[columns]]' hass='[[hass]]'
+        states='[[states]]'
+        columns='[[columns]]'
+        hass='[[hass]]'
+        pane-visible='[[paneVisible]]'
       ></ha-cards>
     </app-header-layout>
   </template>
@@ -77,6 +80,11 @@ Polymer({
       value: false,
     },
 
+    paneVisible: {
+      type: Boolean,
+      value: false,
+    },
+
     isFetching: {
       type: Boolean,
       bindNuclear: function (hass) {