diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts
index 737346c6f4..f935abe1d9 100644
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,4 +1,5 @@
import "@polymer/paper-spinner/paper-spinner-lite";
+import "@polymer/paper-button/paper-button";
import {
LitElement,
@@ -8,9 +9,6 @@ import {
css,
} from "lit-element";
-/*
- * @appliesMixin LocalizeMixin
- */
class HaInitPage extends LitElement {
public error?: boolean;
@@ -37,15 +35,14 @@ class HaInitPage extends LitElement {
`;
}
+ private _retry() {
+ location.reload();
+ }
+
static get styles(): CSSResult {
return css`
div {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-
+ height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@@ -60,17 +57,6 @@ class HaInitPage extends LitElement {
}
`;
}
-
- protected updated(changedProps) {
- super.updated(changedProps);
- if (changedProps.has("error") && this.error) {
- import(/* webpackChunkName: "paper-button" */ "@polymer/paper-button/paper-button");
- }
- }
-
- private _retry() {
- location.reload();
- }
}
customElements.define("ha-init-page", HaInitPage);
diff --git a/src/layouts/hass-error-screen.js b/src/layouts/hass-error-screen.js
deleted file mode 100644
index 9c326c0e90..0000000000
--- a/src/layouts/hass-error-screen.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HassErrorScreen extends PolymerElement {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- title: {
- type: String,
- value: "Home Assistant",
- },
-
- error: {
- type: String,
- value: "Oops! It looks like something went wrong.",
- },
- };
- }
-
- backTapped() {
- history.back();
- }
-}
-
-customElements.define("hass-error-screen", HassErrorScreen);
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
new file mode 100644
index 0000000000..db5138b38c
--- /dev/null
+++ b/src/layouts/hass-error-screen.ts
@@ -0,0 +1,58 @@
+import {
+ LitElement,
+ CSSResultArray,
+ css,
+ TemplateResult,
+ html,
+ property,
+ customElement,
+} from "lit-element";
+import "./hass-subpage";
+
+@customElement("hass-error-screen")
+class HassErrorScreen extends LitElement {
+ @property()
+ public error?: string;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+
${this.error}
+
+ go back
+
+
+
+ `;
+ }
+
+ private _backTapped(): void {
+ history.back();
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ css`
+ .content {
+ height: calc(100% - 64px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+
+ paper-button {
+ font-weight: bold;
+ color: var(--primary-color);
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-error-screen": HassErrorScreen;
+ }
+}
diff --git a/src/layouts/hass-loading-screen.js b/src/layouts/hass-loading-screen.js
deleted file mode 100644
index d97813833b..0000000000
--- a/src/layouts/hass-loading-screen.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-spinner/paper-spinner-lite";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/ha-menu-button";
-
-class HassLoadingScreen extends PolymerElement {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- narrow: {
- type: Boolean,
- value: false,
- },
-
- showMenu: {
- type: Boolean,
- value: false,
- },
-
- title: {
- type: String,
- value: "",
- },
- };
- }
-}
-
-customElements.define("hass-loading-screen", HassLoadingScreen);
diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
new file mode 100644
index 0000000000..6c96a88026
--- /dev/null
+++ b/src/layouts/hass-loading-screen.ts
@@ -0,0 +1,56 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+ LitElement,
+ TemplateResult,
+ html,
+ property,
+ CSSResultArray,
+ css,
+ customElement,
+} from "lit-element";
+import "../components/ha-menu-button";
+import { haStyle } from "../resources/ha-style";
+
+@customElement("hass-loading-screen")
+class HassLoadingScreen extends LitElement {
+ @property({ type: Boolean })
+ public narrow?: boolean;
+
+ @property({ type: Boolean })
+ public showMenu?: boolean;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+
+
+ `;
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ haStyle,
+ css`
+ .content {
+ height: calc(100% - 64px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-loading-screen": HassLoadingScreen;
+ }
+}
diff --git a/src/layouts/hass-subpage.js b/src/layouts/hass-subpage.js
deleted file mode 100644
index ef3ba4409e..0000000000
--- a/src/layouts/hass-subpage.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HassSubpage extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
-
- [[header]]
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- header: String,
- };
- }
-
- _backTapped() {
- history.back();
- }
-}
-
-customElements.define("hass-subpage", HassSubpage);
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
new file mode 100644
index 0000000000..25b4b5a794
--- /dev/null
+++ b/src/layouts/hass-subpage.ts
@@ -0,0 +1,52 @@
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import {
+ LitElement,
+ property,
+ TemplateResult,
+ html,
+ customElement,
+ CSSResult,
+} from "lit-element";
+import { haStyle } from "../resources/ha-style";
+
+@customElement("hass-subpage")
+class HassSubpage extends LitElement {
+ @property()
+ public header?: string;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+
+
+ ${this.header}
+
+
+
+
+
+
+ `;
+ }
+
+ private _backTapped(): void {
+ history.back();
+ }
+
+ static get styles(): CSSResult {
+ return haStyle;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-subpage": HassSubpage;
+ }
+}
diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index db43495ebb..3503c79a2c 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -1,6 +1,7 @@
import { LitElement, html, PropertyValues, property } from "lit-element";
import "./hass-loading-screen";
+import "./hass-error-screen";
import { HomeAssistant, Panel, PanelElement, Route } from "../types";
// Cache of panel loading promises.
@@ -122,11 +123,10 @@ class PartialPanelResolver extends LitElement {
if (this._error) {
return html`
+ >
`;
}
@@ -144,13 +144,6 @@ class PartialPanelResolver extends LitElement {
`;
}
- protected firstUpdated(changedProps: PropertyValues) {
- super.firstUpdated(changedProps);
- // Load it before it's needed, because it will be shown if user is offline
- // and a panel has to be loaded.
- import(/* webpackChunkName: "hass-error-screen" */ "./hass-error-screen");
- }
-
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (!this.hass) {
@@ -214,6 +207,7 @@ class PartialPanelResolver extends LitElement {
this._cache[panel.component_name] = this._panelEl;
}
+ this._error = false;
this._updatePanel();
},
(err) => {
diff --git a/src/panels/config/ha-panel-config.js b/src/panels/config/ha-panel-config.js
index 8bfd4fdb3e..726e46ae85 100644
--- a/src/panels/config/ha-panel-config.js
+++ b/src/panels/config/ha-panel-config.js
@@ -3,8 +3,6 @@ import "@polymer/iron-media-query/iron-media-query";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../layouts/hass-error-screen";
-
import isComponentLoaded from "../../common/config/is_component_loaded";
import EventsMixin from "../../mixins/events-mixin";
import NavigateMixin from "../../mixins/navigate-mixin";
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 0c7e1f45ae..8d903f96cc 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -172,6 +172,7 @@ documentContainer.innerHTML = `
--google-blue-500: #4285f4;
--google-green-500: #0f9d58;
--google-yellow-500: #f4b400;
+ --paper-spinner-color: var(--primary-color);
/* for paper-slider */
--paper-green-400: #66bb6a;