Optimise performance state panel

src/components/ha-cards.html

@@ -128,7 +128,11 @@
         type: Object,
       },
 
-      paneVisible: {
+      panelVisible: {
+        type: Boolean,
+      },
+
+      viewVisible: {
         type: Boolean,
       },
 
@@ -138,13 +142,19 @@
     },
 
     observers: [
-      'updateCards(columns, states, showIntroduction, paneVisible)',
+      'updateCards(columns, states, showIntroduction, panelVisible, viewVisible)',
     ],
 
-    updateCards: function (columns, states, showIntroduction, paneVisible) {
-      if (!paneVisible) {
+    updateCards: function (columns, states, showIntroduction,
+                           panelVisible, viewVisible) {
+      if (!panelVisible || !viewVisible) {
+        console.log('cancelling update cards',
+                    this.getAttribute('data-view') || 'default-view',
+                    panelVisible, viewVisible);
         return;
       }
+      console.log('updateCards', this.getAttribute('data-view') || 'default-view',
+                  panelVisible, viewVisible);
       this.debounce(
         'updateCards',
         function () { this.cards = this.computeCards(columns, states,
@@ -153,6 +163,11 @@
     },
 
     computeCards: function (columns, states, showIntroduction) {
+      // Things might have changed since it got scheduled.
+      if (!this.panelVisible || !this.viewVisible) {
+        return;
+      }
+      console.error('computeCards', this.getAttribute('data-view') || 'default-view', states.size, this.viewVisible)
       var hass = this.hass;
       var byDomain = states.groupBy(function (entity) { return entity.domain; });
       var hasGroup = {};

src/components/ha-view-tabs.html

@@ -1,93 +0,0 @@
-<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
-
-<link rel='import' href='../util/hass-behavior.html'>
-
-<dom-module id="ha-view-tabs">
-  <template>
-    <style>
-      :host {
-        display: block;
-        --paper-tabs-selection-bar-color: #FFF;
-      }
-      paper-tab {
-        text-transform: uppercase;
-      }
-    </style>
-
-    <paper-tabs
-      selected='[[currentView]]'
-      attr-for-selected='data-entity'
-      on-iron-select='viewSelected'
-      scrollable=''
-    >
-        <paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
-        <template is='dom-repeat' items='[[views]]'>
-          <paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
-            <template is='dom-if' if='[[item.attributes.icon]]'>
-              <iron-icon icon='[[item.attributes.icon]]'></iron-icon>
-            </template>
-            <template is='dom-if' if='[[!item.attributes.icon]]'>
-              [[item.entityDisplay]]
-            </template>
-          </paper-tab>
-        </template>
-    </paper-tabs>
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'ha-view-tabs',
-
-  behaviors: [window.hassBehavior],
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    locationName: {
-      type: String,
-      bindNuclear: function (hass) { return hass.configGetters.locationName; },
-    },
-
-    currentView: {
-      type: String,
-      bindNuclear: function (hass) {
-        return [
-          hass.viewGetters.currentView,
-          function (view) { return view || ''; },
-        ];
-      },
-    },
-
-    views: {
-      type: Array,
-      bindNuclear: function (hass) {
-        return [
-          hass.viewGetters.views,
-          function (views) {
-            return views.valueSeq()
-              .sortBy(function (view) { return view.attributes.order; })
-              .toArray();
-          },
-        ];
-      },
-    },
-  },
-
-  viewTapped: function () {
-    this.fire('view-tapped');
-  },
-
-  viewSelected: function (ev) {
-    var view = ev.detail.item.getAttribute('data-entity') || null;
-    var current = this.currentView || null;
-    if (view !== current) {
-      this.async(function () {
-        this.hass.viewActions.selectView(view);
-      }.bind(this), 0);
-    }
-  },
-});
-</script>