From f229e4e12a6f32feed42722b1c79f08b01517d5a Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 25 Mar 2021 14:59:21 -0700
Subject: [PATCH] Make iterating ha-timeline efficient (#8721)

---
 src/components/trace/hat-trace.ts | 47 ++++++++++++++++---------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/trace/hat-trace.ts b/src/components/trace/hat-trace.ts
index 8abd33b9d2..1e8b3aed88 100644
--- a/src/components/trace/hat-trace.ts
+++ b/src/components/trace/hat-trace.ts
@@ -6,6 +6,7 @@ import {
   internalProperty,
   LitElement,
   property,
+  PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -449,7 +450,7 @@ export class HaAutomationTracer extends LitElement {
     return html`${entries}`;
   }
 
-  protected updated(props) {
+  protected updated(props: PropertyValues) {
     super.updated(props);
 
     // Pick first path when we load a new trace.
@@ -463,28 +464,30 @@ export class HaAutomationTracer extends LitElement {
       }
     }
 
-    this.shadowRoot!.querySelectorAll<HaTimeline>(
-      "ha-timeline[data-path]"
-    ).forEach((el) => {
-      el.style.setProperty(
-        "--timeline-ball-color",
-        this._selectedPath === el.dataset.path ? "var(--primary-color)" : null
-      );
-      if (el.dataset.upgraded) {
-        return;
-      }
-      el.dataset.upgraded = "1";
-      el.addEventListener("click", () => {
-        this._selectedPath = el.dataset.path;
-        fireEvent(this, "value-changed", { value: el.dataset.path });
+    if (props.has("trace") || props.has("_selectedPath")) {
+      this.shadowRoot!.querySelectorAll<HaTimeline>(
+        "ha-timeline[data-path]"
+      ).forEach((el) => {
+        el.style.setProperty(
+          "--timeline-ball-color",
+          this._selectedPath === el.dataset.path ? "var(--primary-color)" : null
+        );
+        if (el.dataset.upgraded) {
+          return;
+        }
+        el.dataset.upgraded = "1";
+        el.addEventListener("click", () => {
+          this._selectedPath = el.dataset.path;
+          fireEvent(this, "value-changed", { value: el.dataset.path });
+        });
+        el.addEventListener("mouseover", () => {
+          el.raised = true;
+        });
+        el.addEventListener("mouseout", () => {
+          el.raised = false;
+        });
       });
-      el.addEventListener("mouseover", () => {
-        el.raised = true;
-      });
-      el.addEventListener("mouseout", () => {
-        el.raised = false;
-      });
-    });
+    }
   }
 
   static get styles(): CSSResult[] {