From 06b70e2653fc5c6a1da06ba09c042d1c0a93b1a1 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Thu, 21 Mar 2019 12:22:32 -0700
Subject: [PATCH] Fix route changing on every hass change (#2988)

---
 src/layouts/hass-router-page.ts | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts
index 7806defb6a..ffdd0eb3c6 100644
--- a/src/layouts/hass-router-page.ts
+++ b/src/layouts/hass-router-page.ts
@@ -2,6 +2,7 @@ import { UpdatingElement, property, PropertyValues } from "lit-element";
 import "./hass-error-screen";
 import { Route } from "../types";
 import { navigate } from "../common/navigate";
+import memoizeOne from "memoize-one";
 
 const extractPage = (path: string, defaultPage: string) => {
   if (path === "") {
@@ -47,6 +48,18 @@ export class HassRouterPage extends UpdatingElement {
   private _currentPage = "";
   private _currentLoadProm?: Promise<void>;
   private _cache = {};
+  private _computeTail = memoizeOne((route: Route) => {
+    const dividerPos = route.path.indexOf("/", 1);
+    return dividerPos === -1
+      ? {
+          prefix: route.prefix + route.path,
+          path: "",
+        }
+      : {
+          prefix: route.prefix + route.path.substr(0, dividerPos),
+          path: route.path.substr(dividerPos),
+        };
+  });
 
   protected update(changedProps: PropertyValues) {
     super.update(changedProps);
@@ -192,6 +205,10 @@ export class HassRouterPage extends UpdatingElement {
     // default we do nothing
   }
 
+  protected get routeTail(): Route {
+    return this._computeTail(this.route!);
+  }
+
   private _createPanel(
     routerOptions: RouterOptions,
     page: string,
@@ -210,18 +227,4 @@ export class HassRouterPage extends UpdatingElement {
       this._cache[page] = panelEl;
     }
   }
-
-  protected get routeTail(): Route {
-    const route = this.route!;
-    const dividerPos = route.path.indexOf("/", 1);
-    return dividerPos === -1
-      ? {
-          prefix: route.prefix + route.path,
-          path: "",
-        }
-      : {
-          prefix: route.prefix + route.path.substr(0, dividerPos),
-          path: route.path.substr(dividerPos),
-        };
-  }
 }