Add app alias

2025-09-30 15:29:43 +00:00 · 2020-06-21 12:37:12 -07:00
108 changed files with 356 additions and 1489 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -66,11 +66,7 @@
    "import/prefer-default-export": 0,
    "import/no-unresolved": 0,
    "import/no-cycle": 0,
-    "import/extensions": [
-      2,
-      "ignorePackages",
-      { "ts": "never", "js": "never" }
-    ],
+    "import/extensions": 0,
    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
    "object-curly-newline": 0,
    "default-case": 0,
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -34,8 +34,10 @@ jobs:
        run: yarn install
        env:
          CI: true
-      - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
+      - name: Build icons
+        run: ./node_modules/.bin/gulp gen-icons-json
+      - name: Build translations
+        run: ./node_modules/.bin/gulp build-translations
      - name: Run eslint
        run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
      - name: Run tsc
--- a/.gitignore
+++ b/.gitignore
@@ -24,7 +24,7 @@ dist
 .vscode/*
 !.vscode/extensions.json

-# Cast dev settings
+# Cast dev settings 
 src/cast/dev_const.ts

 # Secrets
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -57,7 +57,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
  ].filter(Boolean),
  plugins: [
    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    !latestBuild && [
+    [
      "@babel/plugin-proposal-object-rest-spread",
      { loose: true, useBuiltIns: true },
    ],
@@ -73,7 +73,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
      require("@babel/plugin-proposal-class-properties").default,
      { loose: true },
    ],
-  ].filter(Boolean),
+  ],
 });

 // Are already ES5, cause warnings when babelified.
--- a/build-scripts/gulp/gallery.js
+++ b/build-scripts/gulp/gallery.js
@@ -1,10 +1,7 @@
 // Run demo develop mode
 const gulp = require("gulp");
-const fs = require("fs");
-const path = require("path");

 const env = require("../env");
-const paths = require("../paths");

 require("./clean.js");
 require("./translations.js");
@@ -15,31 +12,6 @@ require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");

-gulp.task("gather-gallery-demos", async function gatherDemos() {
-  const files = await fs.promises.readdir(
-    path.resolve(paths.gallery_dir, "src/demos")
-  );
-
-  let content = "export const DEMOS = {\n";
-
-  for (const file of files) {
-    const demoId = path.basename(file, ".ts");
-    const demoPath = "../src/demos/" + demoId;
-    content += `  "${demoId}": () => import("${demoPath}"),\n`;
-  }
-
-  content += "};";
-
-  const galleryBuild = path.resolve(paths.gallery_dir, "build");
-
-  fs.mkdirSync(galleryBuild, { recursive: true });
-  fs.writeFileSync(
-    path.resolve(galleryBuild, "import-demos.ts"),
-    content,
-    "utf-8"
-  );
-});
-
 gulp.task(
  "develop-gallery",
  gulp.series(
@@ -48,11 +20,7 @@ gulp.task(
    },
    "clean-gallery",
    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "gather-gallery-demos"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static-gallery",
    "gen-index-gallery-dev",
    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
@@ -67,11 +35,7 @@ gulp.task(
    },
    "clean-gallery",
    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "gather-gallery-demos"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static-gallery",
    env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
    "gen-index-gallery-prod"
--- a/cast/src/html/launcher-faq.html.template
+++ b/cast/src/html/launcher-faq.html.template
@@ -37,21 +37,23 @@
  <body>
    <%= renderTemplate('_js_base') %>

-    <script>
-      import("<%= latestLauncherJS %>");
-      window.latestJS = true;
+    <script type="module" crossorigin="use-credentials">
+      import "<%= latestLauncherJS %>";
    </script>

-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5LauncherJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5LauncherJS %>");
+          <% } %>
+        }
+      })();
    </script>

    <hc-layout subtitle="FAQ">
@@ -251,7 +253,7 @@ http:

    <script>
      var _gaq = [["_setAccount", "UA-57927901-9"], ["_trackPageview"]];
-      (function (d, t) {
+      (function(d, t) {
        var g = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
        g.src =
--- a/cast/src/html/launcher.html.template
+++ b/cast/src/html/launcher.html.template
@@ -28,21 +28,23 @@

    <hc-connect></hc-connect>

-    <script>
-      import("<%= latestLauncherJS %>");
-      window.latestJS = true;
+    <script type="module" crossorigin="use-credentials">
+      import "<%= latestLauncherJS %>";
    </script>

-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5LauncherJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5LauncherJS %>");
+          <% } %>
+        }
+      })();
    </script>
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
--- a/cast/src/launcher/entrypoint.ts
+++ b/cast/src/launcher/entrypoint.ts
@@ -1,3 +1,3 @@
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
+import "~app/resources/ha-style";
+import "~app/resources/roboto";
 import "./layout/hc-connect";
--- a/cast/src/receiver/entrypoint.ts
+++ b/cast/src/receiver/entrypoint.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
-import { CAST_NS } from "../../../src/cast/const";
-import { HassMessage } from "../../../src/cast/receiver_messages";
-import "../../../src/resources/custom-card-support";
+import { CAST_NS } from "~app/cast/const";
+import { HassMessage } from "~app/cast/receiver_messages";
+import "~app/resources/custom-card-support";
 import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
--- a/demo/src/custom-cards/ha-demo-card.ts
+++ b/demo/src/custom-cards/ha-demo-card.ts
@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -9,7 +10,6 @@ import {
 } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-circular-progress";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
@@ -49,7 +49,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
        <div class="picker">
          <div class="label">
            ${this._switching
-              ? html`<ha-circular-progress active></ha-circular-progress>`
+              ? html` <paper-spinner-lite active></paper-spinner-lite> `
              : until(
                  selectedDemoConfig.then(
                    (conf) => html`
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -86,26 +86,26 @@
    <%= renderTemplate('_js_base') %>
    <%= renderTemplate('_preload_roboto') %>

-    <script>
-      import("<%= latestDemoJS %>");
-      window.latestJS = true;
-    </script>
+    <script type="module" src="<%= latestDemoJS %>"></script>

-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5DemoJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5DemoJS %>");
-        <% } %>
-      }
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5DemoJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5DemoJS %>");
+          <% } %>
+        }
+      })();
    </script>

    <script>
      var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
-      (function (d, t) {
+      (function(d, t) {
        var g = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
        g.src =
--- a/gallery/src/components/demo-cards.js
+++ b/gallery/src/components/demo-cards.js
@@ -2,8 +2,8 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../src/components/ha-switch";
-import "../../../src/components/ha-formfield";
+import "~app/components/ha-switch";
+import "~app/components/ha-formfield";
 import "./demo-card";

 class DemoCards extends PolymerElement {
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -11,7 +11,9 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../src/components/ha-card";
 import "../../src/managers/notification-manager";
 import "../../src/styles/polymer-ha-style";
-import { DEMOS } from "../build/import-demos";
+
+// eslint-disable-next-line no-undef
+const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);

 const fixPath = (path) => path.substr(2, path.length - 5);

@@ -161,7 +163,7 @@ class HaGallery extends PolymerElement {
      },
      _demos: {
        type: Array,
-        value: Object.keys(DEMOS),
+        value: DEMOS.keys().map(fixPath),
      },
      _lovelaceDemos: {
        type: Array,
@@ -208,7 +210,7 @@ class HaGallery extends PolymerElement {
    while (root.lastChild) root.removeChild(root.lastChild);

    if (demo) {
-      DEMOS[demo]();
+      DEMOS(`./${demo}.ts`);
      const el = document.createElement(demo);
      root.appendChild(el);
    }
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -22,7 +22,7 @@ import "../../../src/layouts/hass-tabs-subpage";
 import "../../../src/layouts/loading-screen";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addon-repository";

 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
--- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts
@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -11,7 +12,6 @@ import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
-import "../../../../src/components/ha-circular-progress";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-network";
@@ -24,7 +24,7 @@ class HassioAddonConfigDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    return html`
      <div class="content">
--- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
+++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -13,7 +14,6 @@ import {
  HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
 import "../../../../src/layouts/loading-screen";
-import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -35,7 +35,7 @@ class HassioAddonDocumentationDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    return html`
      <div class="content">
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -4,6 +4,7 @@ import {
  mdiInformationVariant,
  mdiMathLog,
 } from "@mdi/js";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -19,7 +20,6 @@ import {
  HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/hass-tabs-subpage";
-import "../../../src/components/ha-circular-progress";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -56,7 +56,7 @@ class HassioAddonDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }

    const addonTabs: PageNavigation[] = [
--- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts
@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -8,7 +9,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -24,7 +24,7 @@ class HassioAddonInfoDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }

    return html`
--- a/hassio/src/addon-view/log/hassio-addon-log-tab.ts
+++ b/hassio/src/addon-view/log/hassio-addon-log-tab.ts
@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -8,7 +9,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -22,7 +22,7 @@ class HassioAddonLogDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html` <ha-circular-progress active></ha-circular-progress> `;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    return html`
      <div class="content">
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -15,7 +15,7 @@ import {
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addons";
 import "./hassio-update";

--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../src/components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -108,7 +108,7 @@ class HassioRepositoriesDialog extends LitElement {
            ></paper-input>
            <mwc-button @click=${this._addRepository}>
              ${this._prosessing
-                ? html`<ha-circular-progress active></ha-circular-progress>`
+                ? html`<paper-spinner active></paper-spinner>`
                : "Add"}
            </mwc-button>
          </div>
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -1,5 +1,5 @@
-import "../../src/resources/compatibility";
-import "../../src/resources/roboto";
+import "~app/resources/compatibility";
+import "~app/resources/roboto";
 import "./hassio-main";

 const styleEl = document.createElement("style");
--- a/hassio/src/hassio-panel.ts
+++ b/hassio/src/hassio-panel.ts
@@ -1,3 +1,4 @@
+import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
 import {
  customElement,
  html,
@@ -11,9 +12,33 @@ import {
  HassioSupervisorInfo,
  HassioInfo,
 } from "../../src/data/hassio/supervisor";
+import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";

+export const supervisorTabs: PageNavigation[] = [
+  {
+    name: "Dashboard",
+    path: `/hassio/dashboard`,
+    iconPath: mdiViewDashboard,
+  },
+  {
+    name: "Add-on store",
+    path: `/hassio/store`,
+    iconPath: mdiStore,
+  },
+  {
+    name: "Snapshots",
+    path: `/hassio/snapshots`,
+    iconPath: mdiBackupRestore,
+  },
+  {
+    name: "System",
+    path: `/hassio/system`,
+    iconPath: mdiCogs,
+  },
+];
+
@customElement("hassio-panel")
 class HassioPanel extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
--- a/hassio/src/hassio-tabs.ts
+++ b/hassio/src/hassio-tabs.ts
@@ -1,25 +0,0 @@
-import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
-import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-
-export const supervisorTabs: PageNavigation[] = [
-  {
-    name: "Dashboard",
-    path: `/hassio/dashboard`,
-    iconPath: mdiViewDashboard,
-  },
-  {
-    name: "Add-on store",
-    path: `/hassio/store`,
-    iconPath: mdiStore,
-  },
-  {
-    name: "Snapshots",
-    path: `/hassio/snapshots`,
-    iconPath: mdiBackupRestore,
-  },
-  {
-    name: "System",
-    path: `/hassio/system`,
-    iconPath: mdiCogs,
-  },
-];
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -37,7 +37,7 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import "../components/hassio-card-content";
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import { hassioStyle } from "../resources/hassio-style";

 interface CheckboxItem {
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -18,7 +18,7 @@ import {
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-host-info";
 import "./hassio-supervisor-info";
--- a/package.json
+++ b/package.json
@@ -22,11 +22,11 @@
  "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
  "license": "Apache-2.0",
  "dependencies": {
+    "~app": "file:./src",
    "@formatjs/intl-pluralrules": "^1.5.8",
    "@fullcalendar/core": "^5.0.0-beta.2",
    "@fullcalendar/daygrid": "^5.0.0-beta.2",
    "@material/chips": "7.0.0-canary.d92d8c93e.0",
-    "@material/circular-progress": "7.0.0-canary.d92d8c93e.0",
    "@material/mwc-button": "^0.15.0",
    "@material/mwc-checkbox": "^0.15.0",
    "@material/mwc-dialog": "^0.15.0",
@@ -48,6 +48,7 @@
    "@polymer/iron-image": "^3.0.1",
    "@polymer/iron-input": "^3.0.1",
    "@polymer/iron-label": "^3.0.1",
+    "@polymer/iron-media-query": "^3.0.1",
    "@polymer/iron-overlay-behavior": "^3.0.2",
    "@polymer/iron-resizable-behavior": "^3.0.1",
    "@polymer/paper-card": "^3.0.1",
@@ -65,6 +66,7 @@
    "@polymer/paper-radio-group": "^3.0.1",
    "@polymer/paper-ripple": "^3.0.1",
    "@polymer/paper-slider": "^3.0.1",
+    "@polymer/paper-spinner": "^3.0.2",
    "@polymer/paper-styles": "^3.0.1",
    "@polymer/paper-tabs": "^3.0.1",
    "@polymer/paper-toast": "^3.0.1",
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20200623.1",
+    version="20200620.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/home-assistant-polymer",
    author="The Home Assistant Authors",
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -37,7 +37,6 @@ export const DOMAINS_WITH_MORE_INFO = [
  "fan",
  "group",
  "history_graph",
-  "humidifier",
  "input_datetime",
  "light",
  "lock",
@@ -80,7 +79,6 @@ export const DOMAINS_TOGGLE = new Set([
  "switch",
  "group",
  "automation",
-  "humidifier",
 ]);

 /** Temperature units. */
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -55,12 +55,6 @@ export const computeStateDisplay = (
    return formatDateTime(date, language);
  }

-  if (domain === "humidifier") {
-    if (stateObj.state === "on" && stateObj.attributes.humidity) {
-      return `${stateObj.attributes.humidity}%`;
-    }
-  }
-
  return (
    // Return device class translation
    (stateObj.attributes.device_class &&
--- a/src/common/entity/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@@ -22,7 +22,6 @@ const fixedIcons = {
  history_graph: "hass:chart-line",
  homeassistant: "hass:home-assistant",
  homekit: "hass:home-automation",
-  humidifier: "hass:air-humidifier",
  image_processing: "hass:image-filter-frames",
  input_boolean: "hass:toggle-switch-outline",
  input_datetime: "hass:calendar-clock",
--- a/src/common/style/icon_color_css.ts
+++ b/src/common/style/icon_color_css.ts
@@ -8,7 +8,6 @@ export const iconColorCSS = css`
  ha-icon[data-domain="camera"][data-state="streaming"],
  ha-icon[data-domain="cover"][data-state="open"],
  ha-icon[data-domain="fan"][data-state="on"],
-  ha-icon[data-domain="humidifier"][data-state="on"],
  ha-icon[data-domain="light"][data-state="on"],
  ha-icon[data-domain="input_boolean"][data-state="on"],
  ha-icon[data-domain="lock"][data-state="unlocked"],
--- a/src/components/buttons/ha-progress-button.js
+++ b/src/components/buttons/ha-progress-button.js
@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -51,9 +51,7 @@ class HaProgressButton extends PolymerElement {
          <slot></slot>
        </mwc-button>
        <template is="dom-if" if="[[progress]]">
-          <div class="progress">
-            <ha-circular-progress active size="small"></ha-circular-progress>
-          </div>
+          <div class="progress"><paper-spinner active=""></paper-spinner></div>
        </template>
      </div>
    `;
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -22,7 +22,7 @@ const isOn = (stateObj?: HassEntity) =>
  !STATES_OFF.includes(stateObj.state) &&
  !UNAVAILABLE_STATES.includes(stateObj.state);

-export class HaEntityToggle extends LitElement {
+class HaEntityToggle extends LitElement {
  // hass is not a property so that we only re-render on stateObj changes
  public hass?: HomeAssistant;

--- a/src/components/ha-circular-progress.ts
+++ b/src/components/ha-circular-progress.ts
@@ -1,93 +0,0 @@
-import {
-  LitElement,
-  TemplateResult,
-  property,
-  svg,
-  html,
-  customElement,
-  unsafeCSS,
-  SVGTemplateResult,
-  css,
-} from "lit-element";
-// @ts-ignore
-import progressStyles from "@material/circular-progress/dist/mdc.circular-progress.min.css";
-import { classMap } from "lit-html/directives/class-map";
-
-@customElement("ha-circular-progress")
-export class HaCircularProgress extends LitElement {
-  @property({ type: Boolean })
-  public active = false;
-
-  @property()
-  public alt = "Loading";
-
-  @property()
-  public size: "small" | "medium" | "large" = "medium";
-
-  protected render(): TemplateResult | void {
-    let indeterminatePart: SVGTemplateResult;
-
-    if (this.size === "small") {
-      indeterminatePart = svg`
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
-        </svg>`;
-    } else if (this.size === "large") {
-      indeterminatePart = svg`
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
-        </svg>`;
-    } else {
-      // medium
-      indeterminatePart = svg`
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
-        </svg>`;
-    }
-
-    // ignoring prettier as it will introduce unwanted whitespace
-    // We have not implemented the determinate support of mdc circular progress.
-    // prettier-ignore
-    return html`
-      <div
-        class="mdc-circular-progress ${classMap({
-          "mdc-circular-progress--indeterminate": this.active,
-          [`mdc-circular-progress--${this.size}`]: true,
-        })}"
-        role="progressbar"
-        aria-label=${this.alt}
-        aria-valuemin="0"
-        aria-valuemax="1"
-      >
-        <div class="mdc-circular-progress__indeterminate-container">
-          <div class="mdc-circular-progress__spinner-layer">
-            <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
-              ${indeterminatePart}
-            </div><div class="mdc-circular-progress__gap-patch">
-              ${indeterminatePart}
-            </div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
-              ${indeterminatePart}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return [
-      unsafeCSS(progressStyles),
-      css`
-        :host {
-          text-align: initial;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-circular-progress": HaCircularProgress;
-  }
-}
--- a/src/components/ha-demo-badge.js
+++ b/src/components/ha-demo-badge.js
@@ -0,0 +1,24 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "./ha-label-badge";
+
+class HaDemoBadge extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          --ha-label-badge-color: #dac90d;
+        }
+      </style>
+
+      <ha-label-badge
+        icon="hass:emoticon"
+        label="Demo"
+        description=""
+      ></ha-label-badge>
+    `;
+  }
+}
+
+customElements.define("ha-demo-badge", HaDemoBadge);
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -6,6 +6,7 @@ import {
  mdiMenu,
  mdiViewDashboard,
 } from "@mdi/js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-item/paper-icon-item";
 import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
@@ -15,7 +16,6 @@ import {
  CSSResult,
  eventOptions,
  html,
-  customElement,
  LitElement,
  property,
  PropertyValues,
@@ -109,7 +109,9 @@ const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => {
  return [beforeSpacer, afterSpacer];
 };

-@customElement("ha-sidebar")
+/*
+ * @appliesMixin LocalizeMixin
+ */
 class HaSidebar extends LitElement {
  @property() public hass!: HomeAssistant;

@@ -747,3 +749,5 @@ declare global {
    "ha-sidebar": HaSidebar;
  }
 }
+
+customElements.define("ha-sidebar", HaSidebar);
--- a/src/components/state-history-chart-line.js
+++ b/src/components/state-history-chart-line.js
@@ -262,28 +262,6 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
            pushData(new Date(state.last_changed), series);
          }
        });
-      } else if (domain === "humidifier") {
-        addColumn(
-          `${this.hass.localize(
-            "ui.card.humidifier.target_humidity_entity",
-            "name",
-            name
-          )}`,
-          true
-        );
-        addColumn(
-          `${this.hass.localize("ui.card.humidifier.on_entity", "name", name)}`,
-          true,
-          true
-        );
-
-        states.states.forEach((state) => {
-          if (!state.attributes) return;
-          const target = safeParseFloat(state.attributes.humidity);
-          const series = [target];
-          series.push(state.state === "on" ? target : null);
-          pushData(new Date(state.last_changed), series);
-        });
      } else {
        // Only disable interpolation for sensors
        const isStep = domain === "sensor";
--- a/src/components/state-history-charts.js
+++ b/src/components/state-history-charts.js
@@ -1,4 +1,4 @@
-import "./ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -5,15 +5,13 @@ import { computeStateName } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";

-const DOMAINS_USE_LAST_UPDATED = ["climate", "humidifier", "water_heater"];
+const DOMAINS_USE_LAST_UPDATED = ["climate", "water_heater"];
 const LINE_ATTRIBUTES_TO_KEEP = [
  "temperature",
  "current_temperature",
  "target_temp_low",
  "target_temp_high",
  "hvac_action",
-  "humidity",
-  "mode",
 ];

 export interface LineChartState {
@@ -226,8 +224,6 @@ export const computeHistory = (
      unit = hass.config.unit_system.temperature;
    } else if (computeStateDomain(stateInfo[0]) === "water_heater") {
      unit = hass.config.unit_system.temperature;
-    } else if (computeStateDomain(stateInfo[0]) === "humidifier") {
-      unit = "%";
    }

    if (!unit) {
--- a/src/data/humidifier.ts
+++ b/src/data/humidifier.ts
@@ -1,19 +0,0 @@
-import {
-  HassEntityAttributeBase,
-  HassEntityBase,
-} from "home-assistant-js-websocket";
-
-export type HumidifierEntity = HassEntityBase & {
-  attributes: HassEntityAttributeBase & {
-    humidity?: number;
-    min_humidity?: number;
-    max_humidity?: number;
-    mode?: string;
-    available_modes?: string[];
-  };
-};
-
-export const HUMIDIFIER_SUPPORT_MODES = 1;
-
-export const HUMIDIFIER_DEVICE_CLASS_HUMIDIFIER = "humidifier";
-export const HUMIDIFIER_DEVICE_CLASS_DEHUMIDIFIER = "dehumidifier";
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -10,7 +10,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
-import "../../components/ha-circular-progress";
 import "../../components/ha-switch";
 import "../../components/ha-formfield";
 import type { HaSwitch } from "../../components/ha-switch";
@@ -76,7 +75,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
          ${this._loading
            ? html`
                <div class="init-spinner">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner-lite active></paper-spinner-lite>
                </div>
              `
            : html`
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
  css,
@@ -76,7 +76,7 @@ class StepFlowForm extends LitElement {
        ${this._loading
          ? html`
              <div class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
+                <paper-spinner active></paper-spinner>
              </div>
            `
          : html`
--- a/src/dialogs/config-flow/step-flow-loading.ts
+++ b/src/dialogs/config-flow/step-flow-loading.ts
@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -7,7 +8,6 @@ import {
  property,
  TemplateResult,
 } from "lit-element";
-import "../../components/ha-circular-progress";

@customElement("step-flow-loading")
 class StepFlowLoading extends LitElement {
@@ -17,7 +17,7 @@ class StepFlowLoading extends LitElement {
    return html`
      <div class="init-spinner">
        ${this.label ? html` <div>${this.label}</div> ` : ""}
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
      </div>
    `;
  }
@@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement {
        padding: 50px 100px;
        text-align: center;
      }
-      ha-circular-progress {
+      paper-spinner-lite {
        margin-top: 16px;
      }
    `;
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import Fuse from "fuse.js";
 import {
  css,
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ b/src/dialogs/more-info/controls/more-info-configurator.js
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -38,7 +38,7 @@ class MoreInfoConfigurator extends PolymerElement {
          height: 41px;
        }

-        ha-circular-progress {
+        paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
@@ -75,11 +75,11 @@ class MoreInfoConfigurator extends PolymerElement {
              disabled="[[isConfiguring]]"
              on-click="submitClicked"
            >
-              <ha-circular-progress
+              <paper-spinner
                active="[[isConfiguring]]"
                hidden="[[!isConfiguring]]"
                alt="Configuring"
-              ></ha-circular-progress>
+              ></paper-spinner>
              [[stateObj.attributes.submit_caption]]
            </mwc-button>
          </p>
--- a/src/dialogs/more-info/controls/more-info-content.ts
+++ b/src/dialogs/more-info/controls/more-info-content.ts
@@ -14,7 +14,6 @@ import "./more-info-default";
 import "./more-info-fan";
 import "./more-info-group";
 import "./more-info-history_graph";
-import "./more-info-humidifier";
 import "./more-info-input_datetime";
 import "./more-info-light";
 import "./more-info-lock";
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -1,218 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { supportsFeature } from "../../../common/entity/supports-feature";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
-import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
-import "../../../components/ha-switch";
-import {
-  HumidifierEntity,
-  HUMIDIFIER_SUPPORT_MODES,
-} from "../../../data/humidifier";
-import { HomeAssistant } from "../../../types";
-
-class MoreInfoHumidifier extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public stateObj?: HumidifierEntity;
-
-  private _resizeDebounce?: number;
-
-  protected render(): TemplateResult {
-    if (!this.stateObj) {
-      return html``;
-    }
-
-    const hass = this.hass;
-    const stateObj = this.stateObj;
-
-    const supportModes = supportsFeature(stateObj, HUMIDIFIER_SUPPORT_MODES);
-
-    const rtlDirection = computeRTLDirection(hass);
-
-    return html`
-      <div
-        class=${classMap({
-          "has-modes": supportModes,
-        })}
-      >
-        <div class="container-humidity">
-          <div>${hass.localize("ui.card.humidifier.humidity")}</div>
-          <div class="single-row">
-            <div class="target-humidity">
-              ${stateObj.attributes.humidity} %
-            </div>
-            <ha-paper-slider
-              class="humidity"
-              step="1"
-              pin
-              ignore-bar-touch
-              dir=${rtlDirection}
-              .min=${stateObj.attributes.min_humidity}
-              .max=${stateObj.attributes.max_humidity}
-              .secondaryProgress=${stateObj.attributes.max_humidity}
-              .value=${stateObj.attributes.humidity}
-              @change=${this._targetHumiditySliderChanged}
-            >
-            </ha-paper-slider>
-          </div>
-        </div>
-
-        ${supportModes
-          ? html`
-              <div class="container-modes">
-                <ha-paper-dropdown-menu
-                  label-float
-                  dynamic-align
-                  .label=${hass.localize("ui.card.humidifier.mode")}
-                >
-                  <paper-listbox
-                    slot="dropdown-content"
-                    attr-for-selected="item-name"
-                    .selected=${stateObj.attributes.mode}
-                    @selected-changed=${this._handleModeChanged}
-                  >
-                    ${stateObj.attributes.available_modes!.map(
-                      (mode) => html`
-                        <paper-item item-name=${mode}>
-                          ${hass.localize(
-                            `state_attributes.humidifier.mode.${mode}`
-                          ) || mode}
-                        </paper-item>
-                      `
-                    )}
-                  </paper-listbox>
-                </ha-paper-dropdown-menu>
-              </div>
-            `
-          : ""}
-      </div>
-    `;
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!changedProps.has("stateObj") || !this.stateObj) {
-      return;
-    }
-
-    if (this._resizeDebounce) {
-      clearTimeout(this._resizeDebounce);
-    }
-    this._resizeDebounce = window.setTimeout(() => {
-      fireEvent(this, "iron-resize");
-      this._resizeDebounce = undefined;
-    }, 500);
-  }
-
-  private _targetHumiditySliderChanged(ev) {
-    const newVal = ev.target.value;
-    this._callServiceHelper(
-      this.stateObj!.attributes.humidity,
-      newVal,
-      "set_humidity",
-      { humidity: newVal }
-    );
-  }
-
-  private _handleModeChanged(ev) {
-    const newVal = ev.detail.value || null;
-    this._callServiceHelper(
-      this.stateObj!.attributes.mode,
-      newVal,
-      "set_mode",
-      { mode: newVal }
-    );
-  }
-
-  private async _callServiceHelper(
-    oldVal: unknown,
-    newVal: unknown,
-    service: string,
-    data: {
-      entity_id?: string;
-      [key: string]: unknown;
-    }
-  ) {
-    if (oldVal === newVal) {
-      return;
-    }
-
-    data.entity_id = this.stateObj!.entity_id;
-    const curState = this.stateObj;
-
-    await this.hass.callService("humidifier", service, data);
-
-    // We reset stateObj to re-sync the inputs with the state. It will be out
-    // of sync if our service call did not result in the entity to be turned
-    // on. Since the state is not changing, the resync is not called automatic.
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    // No need to resync if we received a new state.
-    if (this.stateObj !== curState) {
-      return;
-    }
-
-    this.stateObj = undefined;
-    await this.updateComplete;
-    // Only restore if not set yet by a state change
-    if (this.stateObj === undefined) {
-      this.stateObj = curState;
-    }
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        color: var(--primary-text-color);
-      }
-
-      ha-paper-dropdown-menu {
-        width: 100%;
-      }
-
-      paper-item {
-        cursor: pointer;
-      }
-
-      ha-paper-slider {
-        width: 100%;
-      }
-
-      .container-humidity .single-row {
-        display: flex;
-        height: 50px;
-      }
-
-      .target-humidity {
-        width: 90px;
-        font-size: 200%;
-        margin: auto;
-        direction: ltr;
-      }
-
-      .humidity {
-        --paper-slider-active-color: var(--paper-blue-400);
-        --paper-slider-secondary-color: var(--paper-blue-400);
-      }
-
-      .single-row {
-        padding: 8px 0;
-      }
-    `;
-  }
-}
-
-customElements.define("more-info-humidifier", MoreInfoHumidifier);
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -52,7 +52,7 @@
    <%= renderTemplate('_js_base') %>
    <%= renderTemplate('_preload_roboto') %>

-    <script crossorigin="use-credentials">
+    <script>
      import("<%= latestCoreJS %>");
      import("<%= latestAppJS %>");
      window.customPanelJS = "<%= latestCustomPanelJS %>";
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import { css, CSSResult, html, LitElement, property } from "lit-element";
 import { removeInitSkeleton } from "../util/init-skeleton";
-import "../components/ha-circular-progress";

 class HaInitPage extends LitElement {
  @property({ type: Boolean }) public error = false;
@@ -28,7 +28,7 @@ class HaInitPage extends LitElement {
                : ""}
            `
          : html`
-              <ha-circular-progress active></ha-circular-progress>
+              <paper-spinner-lite active></paper-spinner-lite>
              <p>Loading data</p>
            `}
      </div>
@@ -52,7 +52,7 @@ class HaInitPage extends LitElement {
        justify-content: center;
        align-items: center;
      }
-      ha-circular-progress {
+      paper-spinner-lite {
        margin-top: 9px;
      }
      a {
--- a/src/layouts/hass-loading-screen.ts
+++ b/src/layouts/hass-loading-screen.ts
@@ -1,4 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResultArray,
@@ -8,7 +9,6 @@ import {
  property,
  TemplateResult,
 } from "lit-element";
-import "../components/ha-circular-progress";
 import "../components/ha-menu-button";
 import "../components/ha-icon-button-arrow-prev";
 import { haStyle } from "../resources/styles";
@@ -39,7 +39,7 @@ class HassLoadingScreen extends LitElement {
            `}
      </app-toolbar>
      <div class="content">
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
      </div>
    `;
  }
--- a/src/layouts/hass-router-page.ts
+++ b/src/layouts/hass-router-page.ts
@@ -147,8 +147,6 @@ export class HassRouterPage extends UpdatingElement {
      ? routeOptions.load()
      : Promise.resolve();

-    let showLoadingScreenTimeout: undefined | number;
-
    // Check when loading the page source failed.
    loadProm.catch((err) => {
      // eslint-disable-next-line
@@ -160,13 +158,7 @@ export class HassRouterPage extends UpdatingElement {
      }

      // Removes either loading screen or the panel
-      if (this.lastChild) {
-        this.removeChild(this.lastChild!);
-      }
-
-      if (showLoadingScreenTimeout) {
-        clearTimeout(showLoadingScreenTimeout);
-      }
+      this.removeChild(this.lastChild!);

      // Show error screen
      const errorEl = document.createElement("hass-error-screen");
@@ -185,7 +177,7 @@ export class HassRouterPage extends UpdatingElement {
    // That way we won't have a double fast flash on fast connections.
    let created = false;

-    showLoadingScreenTimeout = window.setTimeout(() => {
+    setTimeout(() => {
      if (created || this._currentPage !== newPage) {
        return;
      }
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -2,20 +2,20 @@ import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";
 import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
+import "@polymer/iron-media-query/iron-media-query";
 import {
  css,
  CSSResult,
  html,
  LitElement,
  property,
-  customElement,
  PropertyValues,
  TemplateResult,
 } from "lit-element";
-import { listenMediaQuery } from "../common/dom/media_query";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
+import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";

@@ -29,7 +29,6 @@ declare global {
  }
 }

-@customElement("home-assistant-main")
 class HomeAssistantMain extends LitElement {
  @property() public hass!: HomeAssistant;

@@ -50,6 +49,11 @@ class HomeAssistantMain extends LitElement {
      !sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;

    return html`
+      <iron-media-query
+        query="(max-width: 870px)"
+        @query-matches-changed=${this._narrowChanged}
+      ></iron-media-query>
+
      <app-drawer-layout
        fullbleed
        .forceNarrow=${sidebarNarrow}
@@ -104,10 +108,6 @@ class HomeAssistantMain extends LitElement {
        narrow: this.narrow!,
      });
    });
-
-    listenMediaQuery("(max-width: 870px)", (matches) => {
-      this.narrow = matches;
-    });
  }

  protected updated(changedProps: PropertyValues) {
@@ -131,6 +131,10 @@ class HomeAssistantMain extends LitElement {
    }
  }

+  private _narrowChanged(ev: PolymerChangedEvent<boolean>) {
+    this.narrow = ev.detail.value;
+  }
+
  private get _sidebarNarrow() {
    return this.narrow || this.hass.dockedSidebar === "always_hidden";
  }
@@ -166,8 +170,4 @@ class HomeAssistantMain extends LitElement {
  }
 }

-declare global {
-  interface HTMLElementTagNameMap {
-    "home-assistant-main": HomeAssistantMain;
-  }
-}
+customElements.define("home-assistant-main", HomeAssistantMain);
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -1,5 +1,5 @@
 import "@polymer/app-route/app-location";
-import { html, property, PropertyValues, customElement } from "lit-element";
+import { html, property, PropertyValues } from "lit-element";
 import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
@@ -12,7 +12,6 @@ import {
 import "./ha-init-page";
 import "./home-assistant-main";

-@customElement("home-assistant")
 export class HomeAssistantAppEl extends HassElement {
  @property() private _route?: Route;

@@ -22,10 +21,6 @@ export class HomeAssistantAppEl extends HassElement {

  private _haVersion?: string;

-  private _hiddenTimeout?: number;
-
-  private _visiblePromiseResolve?: () => void;
-
  protected render() {
    const hass = this.hass;

@@ -75,12 +70,6 @@ export class HomeAssistantAppEl extends HassElement {
    super.hassConnected();
    // @ts-ignore
    this._loadHassTranslations(this.hass!.language, "state");
-
-    document.addEventListener(
-      "visibilitychange",
-      () => this.__handleVisibilityChange(),
-      false
-    );
  }

  protected hassReconnected() {
@@ -147,37 +136,6 @@ export class HomeAssistantAppEl extends HassElement {
        ? route.path.substr(1)
        : route.path.substr(1, dividerPos - 1);
  }
-
-  private __handleVisibilityChange() {
-    if (document.hidden) {
-      // If the document is hidden, we will prevent reconnects until we are visible again
-      this.hass!.connection.suspendReconnectUntil(
-        new Promise((resolve) => {
-          this._visiblePromiseResolve = resolve;
-        })
-      );
-      // We close the connection to Home Assistant after being hidden for 5 minutes
-      this._hiddenTimeout = window.setTimeout(() => {
-        this._hiddenTimeout = undefined;
-        this.hass!.connection.suspend();
-      }, 300000);
-    } else {
-      // Clear timer to close the connection
-      if (this._hiddenTimeout) {
-        clearTimeout(this._hiddenTimeout);
-        this._hiddenTimeout = undefined;
-      }
-      // Unsuspend the reconnect
-      if (this._visiblePromiseResolve) {
-        this._visiblePromiseResolve();
-        this._visiblePromiseResolve = undefined;
-      }
-    }
-  }
 }

-declare global {
-  interface HTMLElementTagNameMap {
-    "home-assistant": HomeAssistantAppEl;
-  }
-}
+customElements.define("home-assistant", HomeAssistantAppEl);
--- a/src/layouts/loading-screen.ts
+++ b/src/layouts/loading-screen.ts
@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -6,12 +7,11 @@ import {
  LitElement,
  TemplateResult,
 } from "lit-element";
-import "../components/ha-circular-progress";

@customElement("loading-screen")
 class LoadingScreen extends LitElement {
  protected render(): TemplateResult {
-    return html` <ha-circular-progress active></ha-circular-progress> `;
+    return html` <paper-spinner-lite active></paper-spinner-lite> `;
  }

  static get styles(): CSSResult {
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -132,10 +132,10 @@ class DialogThingtalk extends LitElement {
            Skip
          </mwc-button>
          <mwc-button @click="${this._generate}" .disabled=${this._submitting}>
-            <ha-circular-progress
+            <paper-spinner
              ?active="${this._submitting}"
              alt="Creating your automation..."
-            ></ha-circular-progress>
+            ></paper-spinner>
            Create automation
          </mwc-button>
        </div>
@@ -245,15 +245,15 @@ class DialogThingtalk extends LitElement {
        mwc-button.left {
          margin-right: auto;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        .error {
--- a/src/panels/config/cloud/account/cloud-webhooks.ts
+++ b/src/panels/config/cloud/account/cloud-webhooks.ts
@@ -1,6 +1,6 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html, LitElement, property, PropertyValues } from "lit-element";
 import "../../../../components/ha-card";
 import "../../../../components/ha-switch";
@@ -119,7 +119,7 @@ export class CloudWebhooks extends LitElement {
          ${this._progress.includes(entry.webhook_id)
            ? html`
                <div class="progress">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner active></paper-spinner>
                </div>
              `
            : this._cloudHooks![entry.webhook_id]
--- a/src/panels/config/entities/show-dialog-entity-editor.ts
+++ b/src/panels/config/entities/show-dialog-entity-editor.ts
@@ -1,6 +1,6 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
-import type { DialogEntityEditor } from "./dialog-entity-editor";
+import { DialogEntityEditor } from "./dialog-entity-editor";

 export interface EntityRegistryDetailDialogParams {
  entry?: EntityRegistryEntry;
--- a/src/panels/config/ha-entity-config.js
+++ b/src/panels/config/ha-entity-config.js
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -65,10 +65,7 @@ class HaEntityConfig extends PolymerElement {
                </template>

                <template is="dom-if" if="[[computeShowSpinner(formState)]]">
-                  <ha-circular-progress
-                    active=""
-                    alt="[[formState]]"
-                  ></ha-circular-progress>
+                  <paper-spinner active="" alt="[[formState]]"></paper-spinner>
                  [[formState]]
                </template>
              </div>
--- a/src/panels/config/info/system-health-card.ts
+++ b/src/panels/config/info/system-health-card.ts
@@ -1,4 +1,4 @@
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -46,7 +46,7 @@ class SystemHealthCard extends LitElement {
      sections.push(
        html`
          <div class="loading-container">
-            <ha-circular-progress active></ha-circular-progress>
+            <paper-spinner active></paper-spinner>
          </div>
        `
      );
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -97,10 +97,7 @@ class ZHAAddDevicesPage extends LitElement {
                    "ui.panel.config.zha.add_device_page.spinner"
                  )}
                </h1>
-                <ha-circular-progress
-                  active
-                  alt="Searching"
-                ></ha-circular-progress>
+                <paper-spinner active alt="Searching"></paper-spinner>
              `
            : html`
                <div>
@@ -229,7 +226,7 @@ class ZHAAddDevicesPage extends LitElement {
        .error {
          color: var(--google-red-500);
        }
-        ha-circular-progress {
+        paper-spinner {
          padding: 20px;
        }
        .searching {
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -104,12 +104,12 @@ export class ZHAAddGroupPage extends LitElement {
              @click="${this._createGroup}"
              class="button"
            >
-              <ha-circular-progress
+              <paper-spinner
                ?active="${this._processingAdd}"
                alt="${this.hass!.localize(
                  "ui.panel.config.zha.groups.creating_group"
                )}"
-              ></ha-circular-progress>
+              ></paper-spinner>
              ${this.hass!.localize(
                "ui.panel.config.zha.groups.create"
              )}</mwc-button
@@ -171,15 +171,15 @@ export class ZHAAddGroupPage extends LitElement {
        ha-config-section *:last-child {
          padding-bottom: 24px;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        .paper-dialog-buttons {
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -166,12 +166,12 @@ export class ZHAGroupPage extends LitElement {
                    @click="${this._removeMembersFromGroup}"
                    class="button"
                  >
-                    <ha-circular-progress
+                    <paper-spinner
                      ?active="${this._processingRemove}"
                      alt=${this.hass.localize(
                        "ui.panel.config.zha.groups.removing_members"
                      )}
-                    ></ha-circular-progress>
+                    ></paper-spinner>
                    ${this.hass!.localize(
                      "ui.panel.config.zha.groups.remove_members"
                    )}</mwc-button
@@ -201,12 +201,12 @@ export class ZHAGroupPage extends LitElement {
              @click="${this._addMembersToGroup}"
              class="button"
            >
-              <ha-circular-progress
+              <paper-spinner
                ?active="${this._processingAdd}"
                alt=${this.hass.localize(
                  "ui.panel.config.zha.groups.adding_members"
                )}
-              ></ha-circular-progress>
+              ></paper-spinner>
              ${this.hass!.localize(
                "ui.panel.config.zha.groups.add_members"
              )}</mwc-button
@@ -309,15 +309,15 @@ export class ZHAGroupPage extends LitElement {
          text-decoration: none;
        }

-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        .paper-dialog-buttons {
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
@@ -1,5 +1,5 @@
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
  css,
@@ -92,7 +92,7 @@ export class ZwaveNetwork extends LitElement {
                      `
                    : this._networkStatus.state === ZWAVE_NETWORK_STATE_STARTED
                    ? html`
-                        <ha-circular-progress active></ha-circular-progress>
+                        <paper-spinner active></paper-spinner>
                        ${this.hass!.localize(
                          "ui.panel.config.zwave.network_status.network_starting"
                        )}<br />
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@@ -1,7 +1,7 @@
 import "../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -47,7 +47,7 @@ export class SystemLogCard extends LitElement {
          ${this._items === undefined
            ? html`
                <div class="loading-container">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner active></paper-spinner>
                </div>
              `
            : html`
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/src/panels/config/server_control/ha-config-server-control.ts
@@ -112,11 +112,7 @@ export class HaConfigServerControl extends LitElement {
                                  )}
                                </mwc-button>
                              `
-                            : html`
-                                <ha-circular-progress
-                                  active
-                                ></ha-circular-progress>
-                              `}
+                            : html` <paper-spinner active></paper-spinner> `}
                        </div>
                      `
                    : html`
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -138,7 +138,7 @@ export class DialogAddUser extends LitElement {
        ${this._loading
          ? html`
              <div slot="primaryAction" class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
+                <paper-spinner active></paper-spinner>
              </div>
            `
          : html`
--- a/src/panels/developer-tools/template/developer-tools-template.js
+++ b/src/panels/developer-tools/template/developer-tools-template.js
@@ -1,4 +1,4 @@
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -92,11 +92,10 @@ class HaPanelDevTemplate extends LocalizeMixin(PolymerElement) {
        </div>

        <div class="render-pane">
-          <ha-circular-progress
+          <paper-spinner
            class="render-spinner"
            active="[[rendering]]"
-            size="small"
-          ></ha-circular-progress>
+          ></paper-spinner>
          <pre class$="[[computeRenderedClasses(error)]]">[[processed]]</pre>
        </div>
      </div>
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../types";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
 import "../../components/ha-date-range-picker";
 import { fetchDate, computeHistory } from "../../data/history";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";

 class HaPanelHistory extends LitElement {
  @property() hass!: HomeAssistant;
@@ -73,10 +73,10 @@ class HaPanelHistory extends LitElement {
            ></ha-date-range-picker>
          </div>
          ${this._isLoading
-            ? html`<ha-circular-progress
+            ? html`<paper-spinner
                active
                alt=${this.hass.localize("ui.common.loading")}
-              ></ha-circular-progress>`
+              ></paper-spinner>`
            : html`
                <state-history-charts
                  .hass=${this.hass}
@@ -190,7 +190,7 @@ class HaPanelHistory extends LitElement {
        .content {
          padding: 0 16px 16px;
        }
-        ha-circular-progress {
+        paper-spinner {
          position: absolute;
          left: 50%;
          top: 50%;
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -2,7 +2,7 @@ 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 "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-menu-button";
@@ -105,10 +105,10 @@ export class HaPanelLogbook extends LitElement {
        </div>

        ${this._isLoading
-          ? html`<ha-circular-progress
+          ? html`<paper-spinner
              active
              alt=${this.hass.localize("ui.common.loading")}
-            ></ha-circular-progress>`
+            ></paper-spinner>`
          : html`<ha-logbook
              .hass=${this.hass}
              .entries=${this._entries}
@@ -239,7 +239,7 @@ export class HaPanelLogbook extends LitElement {
          margin-right: 0;
        }

-        ha-circular-progress {
+        paper-spinner {
          position: absolute;
          left: 50%;
          top: 50%;
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -1,392 +0,0 @@
-import "../../../components/ha-icon-button";
-import "@thomasloven/round-slider";
-import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  svg,
-  TemplateResult,
-} from "lit-element";
-import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { computeStateName } from "../../../common/entity/compute_state_name";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
-import "../../../components/ha-card";
-import { HumidifierEntity } from "../../../data/humidifier";
-import { UNAVAILABLE_STATES } from "../../../data/entity";
-import { HomeAssistant } from "../../../types";
-import { findEntities } from "../common/find-entites";
-import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { createEntityNotFoundWarning } from "../components/hui-warning";
-import { LovelaceCard, LovelaceCardEditor } from "../types";
-import { HumidifierCardConfig } from "./types";
-
-@customElement("hui-humidifier-card")
-export class HuiHumidifierCard extends LitElement implements LovelaceCard {
-  public static async getConfigElement(): Promise<LovelaceCardEditor> {
-    await import(
-      /* webpackChunkName: "hui-humidifier-card-editor" */ "../editor/config-elements/hui-humidifier-card-editor"
-    );
-    return document.createElement("hui-humidifier-card-editor");
-  }
-
-  public static getStubConfig(
-    hass: HomeAssistant,
-    entities: string[],
-    entitiesFallback: string[]
-  ): HumidifierCardConfig {
-    const includeDomains = ["humidifier"];
-    const maxEntities = 1;
-    const foundEntities = findEntities(
-      hass,
-      maxEntities,
-      entities,
-      entitiesFallback,
-      includeDomains
-    );
-
-    return { type: "humidifier", entity: foundEntities[0] || "" };
-  }
-
-  @property() public hass?: HomeAssistant;
-
-  @property() private _config?: HumidifierCardConfig;
-
-  @property() private _setHum?: number;
-
-  public getCardSize(): number {
-    return 5;
-  }
-
-  public setConfig(config: HumidifierCardConfig): void {
-    if (!config.entity || config.entity.split(".")[0] !== "humidifier") {
-      throw new Error("Specify an entity from within the humidifier domain.");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-    const stateObj = this.hass.states[this._config.entity] as HumidifierEntity;
-
-    if (!stateObj) {
-      return html`
-        <hui-warning>
-          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
-        </hui-warning>
-      `;
-    }
-
-    const name =
-      this._config!.name ||
-      computeStateName(this.hass!.states[this._config!.entity]);
-    const targetHumidity =
-      stateObj.attributes.humidity !== null &&
-      Number.isFinite(Number(stateObj.attributes.humidity))
-        ? stateObj.attributes.humidity
-        : stateObj.attributes.min_humidity;
-
-    const rtlDirection = computeRTLDirection(this.hass);
-
-    const slider = UNAVAILABLE_STATES.includes(stateObj.state)
-      ? html` <round-slider disabled="true"></round-slider> `
-      : html`
-          <round-slider
-            .value=${targetHumidity}
-            .min=${stateObj.attributes.min_humidity}
-            .max=${stateObj.attributes.max_humidity}
-            .rtl=${rtlDirection === "rtl"}
-            .step="1"
-            @value-changing=${this._dragEvent}
-            @value-changed=${this._setHumidity}
-          ></round-slider>
-        `;
-
-    const setValues = svg`
-      <svg viewBox="0 0 40 20">
-        <text
-          x="50%"
-          dx="1"
-          y="60%"
-          text-anchor="middle"
-          style="font-size: 13px;"
-          class="set-value"
-        >
-          ${
-            UNAVAILABLE_STATES.includes(stateObj.state) ||
-            this._setHum === undefined ||
-            this._setHum === null
-              ? ""
-              : svg`
-                    ${this._setHum.toFixed()}
-                    <tspan dx="-3" dy="-6.5" style="font-size: 4px;">
-                      %
-                    </tspan>
-                    `
-          }
-        </text>
-      </svg>
-      <svg id="set-values">
-        <g>
-          <text
-            dy="22"
-            text-anchor="middle"
-            id="set-mode"
-          >
-            ${this.hass!.localize(`state.default.${stateObj.state}`)}
-            ${
-              stateObj.attributes.mode &&
-              !UNAVAILABLE_STATES.includes(stateObj.state)
-                ? html`
-                    -
-                    ${this.hass!.localize(
-                      `state_attributes.humidifier.mode.${stateObj.attributes.mode}`
-                    ) || stateObj.attributes.mode}
-                  `
-                : ""
-            }
-          </text>
-        </g>
-      </svg>
-    `;
-
-    return html`
-      <ha-card>
-        <ha-icon-button
-          icon="hass:dots-vertical"
-          class="more-info"
-          @click=${this._handleMoreInfo}
-          tabindex="0"
-        ></ha-icon-button>
-
-        <div class="content">
-          <div id="controls">
-            <div id="slider">
-              ${slider}
-              <div id="slider-center">
-                <div id="humidity">
-                  ${setValues}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div id="info">
-            ${name}
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    return hasConfigOrEntityChanged(this, changedProps);
-  }
-
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-
-    if (
-      !this._config ||
-      !this.hass ||
-      (!changedProps.has("hass") && !changedProps.has("_config"))
-    ) {
-      return;
-    }
-
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    const oldConfig = changedProps.get("_config") as
-      | HumidifierCardConfig
-      | undefined;
-
-    if (
-      !oldHass ||
-      !oldConfig ||
-      oldHass.themes !== this.hass.themes ||
-      oldConfig.theme !== this._config.theme
-    ) {
-      applyThemesOnElement(this, this.hass.themes, this._config.theme);
-    }
-
-    const stateObj = this.hass.states[this._config.entity];
-    if (!stateObj) {
-      return;
-    }
-
-    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
-      this._setHum = this._getSetHum(stateObj);
-      this._rescale_svg();
-    }
-  }
-
-  private _rescale_svg() {
-    // Set the viewbox of the SVG containing the set humidity to perfectly
-    // fit the text
-    // That way it will auto-scale correctly
-    // This is not done to the SVG containing the current humidity, because
-    // it should not be centered on the text, but only on the value
-    if (this.shadowRoot && this.shadowRoot.querySelector("ha-card")) {
-      (this.shadowRoot.querySelector(
-        "ha-card"
-      ) as LitElement).updateComplete.then(() => {
-        const svgRoot = this.shadowRoot!.querySelector("#set-values");
-        const box = svgRoot!.querySelector("g")!.getBBox();
-        svgRoot!.setAttribute(
-          "viewBox",
-          `${box!.x} ${box!.y} ${box!.width} ${box!.height}`
-        );
-        svgRoot!.setAttribute("width", `${box!.width}`);
-        svgRoot!.setAttribute("height", `${box!.height}`);
-      });
-    }
-  }
-
-  private _getSetHum(stateObj: HassEntity): undefined | number {
-    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
-      return undefined;
-    }
-
-    return stateObj.attributes.humidity;
-  }
-
-  private _dragEvent(e): void {
-    this._setHum = e.detail.value;
-  }
-
-  private _setHumidity(e): void {
-    this.hass!.callService("humidifier", "set_humidity", {
-      entity_id: this._config!.entity,
-      humidity: e.detail.value,
-    });
-  }
-
-  private _handleMoreInfo() {
-    fireEvent(this, "hass-more-info", {
-      entityId: this._config!.entity,
-    });
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        display: block;
-      }
-
-      ha-card {
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-        --name-font-size: 1.2rem;
-        --brightness-font-size: 1.2rem;
-        --rail-border-color: transparent;
-      }
-
-      .more-info {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        right: 0;
-        border-radius: 100%;
-        color: var(--secondary-text-color);
-        z-index: 25;
-      }
-
-      .content {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      #controls {
-        display: flex;
-        justify-content: center;
-        padding: 16px;
-        position: relative;
-      }
-
-      #slider {
-        height: 100%;
-        width: 100%;
-        position: relative;
-        max-width: 250px;
-        min-width: 100px;
-      }
-
-      round-slider {
-        --round-slider-path-color: var(--disabled-text-color);
-        --round-slider-bar-color: var(--mode-color);
-        padding-bottom: 10%;
-      }
-
-      #slider-center {
-        position: absolute;
-        width: calc(100% - 40px);
-        height: calc(100% - 40px);
-        box-sizing: border-box;
-        border-radius: 100%;
-        left: 20px;
-        top: 20px;
-        text-align: center;
-        overflow-wrap: break-word;
-        pointer-events: none;
-      }
-
-      #humidity {
-        position: absolute;
-        transform: translate(-50%, -50%);
-        width: 100%;
-        height: 50%;
-        top: 45%;
-        left: 50%;
-      }
-
-      #set-values {
-        max-width: 80%;
-        transform: translate(0, -50%);
-        font-size: 20px;
-      }
-
-      #set-mode {
-        fill: var(--secondary-text-color);
-        font-size: 16px;
-      }
-
-      #info {
-        display: flex-vertical;
-        justify-content: center;
-        text-align: center;
-        padding: 16px;
-        margin-top: -60px;
-        font-size: var(--name-font-size);
-      }
-
-      #modes > * {
-        color: var(--disabled-text-color);
-        cursor: pointer;
-        display: inline-block;
-      }
-
-      #modes .selected-icon {
-        color: var(--mode-color);
-      }
-
-      text {
-        fill: var(--primary-text-color);
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-humidifier-card": HuiHumidifierCard;
-  }
-}
--- a/src/panels/lovelace/cards/hui-starting-card.ts
+++ b/src/panels/lovelace/cards/hui-starting-card.ts
@@ -10,10 +10,10 @@ import {
  PropertyValues,
 } from "lit-element";
 import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";

@@ -47,7 +47,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {

    return html`
      <div class="content">
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
        ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
      </div>
    `;
@@ -59,7 +59,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
        display: block;
        height: calc(100vh - 64px);
      }
-      ha-circular-progress {
+      paper-spinner-lite {
        padding-bottom: 20px;
      }
      .content {
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -133,12 +133,6 @@ export interface GlanceCardConfig extends LovelaceCardConfig {
  state_color?: boolean;
 }

-export interface HumidifierCardConfig extends LovelaceCardConfig {
-  entity: string;
-  theme?: string;
-  name?: string;
-}
-
 export interface IframeCardConfig extends LovelaceCardConfig {
  aspect_ratio?: string;
  title?: string;
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -37,7 +37,6 @@ import { GroupEntity, HomeAssistant } from "../../../types";
 import {
  AlarmPanelCardConfig,
  EntitiesCardConfig,
-  HumidifierCardConfig,
  LightCardConfig,
  PictureEntityCardConfig,
  ThermostatCardConfig,
@@ -151,12 +150,6 @@ export const computeCards = (
        refresh_interval: stateObj.attributes.refresh,
      };
      cards.push(cardConfig);
-    } else if (domain === "humidifier") {
-      const cardConfig: HumidifierCardConfig = {
-        type: "humidifier",
-        entity: entityId,
-      };
-      cards.push(cardConfig);
    } else if (domain === "light" && single) {
      const cardConfig: LightCardConfig = {
        type: "light",
--- a/src/panels/lovelace/create-element/create-card-element.ts
+++ b/src/panels/lovelace/create-element/create-card-element.ts
@@ -38,7 +38,6 @@ const LAZY_LOAD_TYPES = {
  "empty-state": () => import("../cards/hui-empty-state-card"),
  starting: () => import("../cards/hui-starting-card"),
  "entity-filter": () => import("../cards/hui-entity-filter-card"),
-  humidifier: () => import("../cards/hui-humidifier-card"),
  "media-control": () => import("../cards/hui-media-control-card"),
  "picture-elements": () => import("../cards/hui-picture-elements-card"),
  "picture-entity": () => import("../cards/hui-picture-entity-card"),
--- a/src/panels/lovelace/create-element/create-row-element.ts
+++ b/src/panels/lovelace/create-element/create-row-element.ts
@@ -51,7 +51,6 @@ const DOMAIN_TO_ELEMENT_TYPE = {
  cover: "cover",
  fan: "toggle",
  group: "group",
-  humidifier: "toggle",
  input_boolean: "toggle",
  input_number: "input-number",
  input_select: "input-select",
--- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
@@ -140,11 +140,11 @@ export class HuiCardEditor extends LitElement {
              <div class="gui-editor">
                ${this._loading
                  ? html`
-                      <ha-circular-progress
+                      <paper-spinner
                        active
                        alt="Loading"
                        class="center margin-bot"
-                      ></ha-circular-progress>
+                      ></paper-spinner>
                    `
                  : this._configElement}
              </div>
@@ -303,7 +303,7 @@ export class HuiCardEditor extends LitElement {
      .warning {
        color: #ffa726;
      }
-      ha-circular-progress {
+      paper-spinner {
        display: block;
        margin: auto;
      }
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -210,7 +210,7 @@ export class HuiCardPicker extends LitElement {
        this._renderCardElement(card),
        html`
          <div class="card spinner">
-            <ha-circular-progress active alt="Loading"></ha-circular-progress>
+            <paper-spinner active alt="Loading"></paper-spinner>
          </div>
        `
      )}`,
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -17,7 +17,6 @@ import type {
  LovelaceViewConfig,
 } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
-import "../../../../components/ha-circular-progress";
 import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 import { addCard, replaceCard } from "../config-util";
@@ -168,10 +167,10 @@ export class HuiDialogEditCard extends LitElement {
                    ></hui-card-preview>
                    ${this._error
                      ? html`
-                          <ha-circular-progress
+                          <paper-spinner
                            active
                            alt="Can't update card"
-                          ></ha-circular-progress>
+                          ></paper-spinner>
                        `
                      : ``}
                  </div>
@@ -206,10 +205,7 @@ export class HuiDialogEditCard extends LitElement {
                >
                  ${this._saving
                    ? html`
-                        <ha-circular-progress
-                          active
-                          alt="Saving"
-                        ></ha-circular-progress>
+                        <paper-spinner active alt="Saving"></paper-spinner>
                      `
                    : this.hass!.localize("ui.common.save")}
                </mwc-button>
@@ -290,7 +286,7 @@ export class HuiDialogEditCard extends LitElement {
          }
        }

-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
@@ -307,7 +303,7 @@ export class HuiDialogEditCard extends LitElement {
        .element-preview {
          position: relative;
        }
-        .element-preview ha-circular-progress {
+        .element-preview paper-spinner {
          top: 50%;
          left: 50%;
          position: absolute;
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
@@ -111,10 +111,7 @@ export class HuiDialogSuggestCard extends LitElement {
                <mwc-button ?disabled="${this._saving}" @click="${this._save}">
                  ${this._saving
                    ? html`
-                        <ha-circular-progress
-                          active
-                          alt="Saving"
-                        ></ha-circular-progress>
+                        <paper-spinner active alt="Saving"></paper-spinner>
                      `
                    : this.hass!.localize(
                        "ui.panel.lovelace.editor.suggest_card.add"
@@ -146,7 +143,7 @@ export class HuiDialogSuggestCard extends LitElement {
        ha-paper-dialog {
          max-width: 845px;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
--- a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
@@ -1,117 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/entity/ha-entity-picker";
-import { HomeAssistant } from "../../../../types";
-import { HumidifierCardConfig } from "../../cards/types";
-import { struct } from "../../common/structs/struct";
-import "../../components/hui-theme-select-editor";
-import { LovelaceCardEditor } from "../../types";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { configElementStyle } from "./config-elements-style";
-
-const cardConfigStruct = struct({
-  type: "string",
-  entity: "string",
-  name: "string?",
-  theme: "string?",
-});
-
-const includeDomains = ["humidifier"];
-
-@customElement("hui-humidifier-card-editor")
-export class HuiHumidifierCardEditor extends LitElement
-  implements LovelaceCardEditor {
-  @property() public hass?: HomeAssistant;
-
-  @property() private _config?: HumidifierCardConfig;
-
-  public setConfig(config: HumidifierCardConfig): void {
-    config = cardConfigStruct(config);
-    this._config = config;
-  }
-
-  get _entity(): string {
-    return this._config!.entity || "";
-  }
-
-  get _name(): string {
-    return this._config!.name || "";
-  }
-
-  get _theme(): string {
-    return this._config!.theme || "";
-  }
-
-  protected render(): TemplateResult {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-
-    return html`
-      ${configElementStyle}
-      <div class="card-config">
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.entity"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.required"
-          )})"
-          .hass=${this.hass}
-          .value="${this._entity}"
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @change="${this._valueChanged}"
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._name}"
-          .configValue="${"name"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value="${this._theme}"
-          .configValue="${"theme"}"
-          @value-changed="${this._valueChanged}"
-        ></hui-theme-select-editor>
-      </div>
-    `;
-  }
-
-  private _valueChanged(ev: EntitiesEditorEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
-
-    if (this[`_${target.configValue}`] === target.value) {
-      return;
-    }
-    if (target.configValue) {
-      if (target.value === "") {
-        delete this._config[target.configValue!];
-      } else {
-        this._config = { ...this._config, [target.configValue!]: target.value };
-      }
-    }
-    fireEvent(this, "config-changed", { config: this._config });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-humidifier-card-editor": HuiHumidifierCardEditor;
-  }
-}
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -118,10 +118,10 @@ export class HuiSaveConfig extends LitElement {
                  ?disabled="${this._saving}"
                  @click="${this._saveConfig}"
                >
-                  <ha-circular-progress
+                  <paper-spinner
                    ?active="${this._saving}"
                    alt="Saving"
-                  ></ha-circular-progress>
+                  ></paper-spinner>
                  ${this.hass!.localize(
                    "ui.panel.lovelace.editor.save_config.save"
                  )}
@@ -195,13 +195,13 @@ export class HuiSaveConfig extends LitElement {
        ha-paper-dialog {
          max-width: 650px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
--- a/src/panels/lovelace/editor/lovelace-cards.ts
+++ b/src/panels/lovelace/editor/lovelace-cards.ts
@@ -29,10 +29,6 @@ export const coreCards: Card[] = [
    type: "history-graph",
    showElement: true,
  },
-  {
-    type: "humidifier",
-    showElement: true,
-  },
  {
    type: "light",
    showElement: true,
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -10,7 +11,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import "../../../../components/dialog/ha-paper-dialog";
-import "../../../../components/ha-circular-progress";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import type { LovelaceConfig } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -75,10 +75,10 @@ export class HuiDialogEditLovelace extends LitElement {
            ?disabled="${!this._config || this._saving}"
            @click="${this._save}"
          >
-            <ha-circular-progress
+            <paper-spinner
              ?active="${this._saving}"
              alt="Saving"
-            ></ha-circular-progress>
+            ></paper-spinner>
            ${this.hass!.localize("ui.common.save")}</mwc-button
          >
        </div>
@@ -148,15 +148,15 @@ export class HuiDialogEditLovelace extends LitElement {
        ha-paper-dialog {
          max-width: 650px;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
      `,
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -1,6 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "../../../../components/ha-icon-button";
+import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import {
@@ -15,7 +16,6 @@ import {
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/dialog/ha-paper-dialog";
-import "../../../../components/ha-circular-progress";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import type {
  LovelaceBadgeConfig,
@@ -199,10 +199,10 @@ export class HuiDialogEditView extends LitElement {
            ?disabled="${!this._config || this._saving}"
            @click="${this._save}"
          >
-            <ha-circular-progress
+            <paper-spinner
              ?active="${this._saving}"
              alt="Saving"
-            ></ha-circular-progress>
+            ></paper-spinner>
            ${this.hass!.localize("ui.common.save")}</mwc-button
          >
        </div>
@@ -369,7 +369,7 @@ export class HuiDialogEditView extends LitElement {
          text-transform: uppercase;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
@@ -377,10 +377,10 @@ export class HuiDialogEditView extends LitElement {
        mwc-button.warning {
          margin-right: auto;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        paper-dialog-scrollable {
--- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
@@ -1,4 +1,4 @@
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
  css,
@@ -74,7 +74,7 @@ export class HuiGraphHeaderFooter extends LitElement
    if (!this._coordinates) {
      return html`
        <div class="container">
-          <ha-circular-progress active></ha-circular-progress>
+          <paper-spinner active></paper-spinner>
        </div>
      `;
    }
@@ -164,7 +164,7 @@ export class HuiGraphHeaderFooter extends LitElement

  static get styles(): CSSResult {
    return css`
-      ha-circular-progress {
+      paper-spinner {
        position: absolute;
        top: calc(50% - 28px);
      }
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -3,7 +3,7 @@ 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 "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { safeDump, safeLoad } from "js-yaml";
 import {
  css,
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -54,7 +54,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
          [[localize('ui.panel.mailbox.playback_title')]]
          <div class="icon">
            <template is="dom-if" if="[[_loading]]">
-              <ha-circular-progress active></ha-circular-progress>
+              <paper-spinner active></paper-spinner>
            </template>
            <ha-icon-button
              id="delicon"
--- a/src/panels/profile/ha-change-password-card.js
+++ b/src/panels/profile/ha-change-password-card.js
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -71,7 +71,7 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
          </div>
          <div class="card-actions">
            <template is="dom-if" if="[[_loading]]">
-              <div><ha-circular-progress active></ha-circular-progress></div>
+              <div><paper-spinner active></paper-spinner></div>
            </template>
            <template is="dom-if" if="[[!_loading]]">
              <mwc-button on-click="_changePassword"
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -70,7 +70,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
          </template>
          <template is="dom-if" if="[[!_step]]">
            <div class="init-spinner">
-              <ha-circular-progress active></ha-circular-progress>
+              <paper-spinner active></paper-spinner>
            </div>
          </template>
          <template is="dom-if" if="[[_step]]">
@@ -125,7 +125,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
          <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
            <template is="dom-if" if="[[_loading]]">
              <div class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
+                <paper-spinner active></paper-spinner>
              </div>
            </template>
            <template is="dom-if" if="[[!_loading]]">
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -60,6 +60,12 @@ documentContainer.innerHTML = `<custom-style>
      --paper-grey-200: #eeeeee;  /* for ha-date-picker-style */
      --paper-grey-500: #9e9e9e;  /* --label-badge-grey */

+      /* for paper-spinner */
+      --google-red-500: #db4437;
+      --google-blue-500: #4285f4;
+      --google-green-500: #0f9d58;
+      --google-yellow-500: #f4b400;
+
      /* for paper-slider */
      --paper-green-400: #66bb6a;
      --paper-blue-400: #42a5f5;
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -1,6 +1,7 @@
 import { css } from "lit-element";

 export const derivedStyles = {
+  "paper-spinner-color": "var(--primary-color)",
  "error-state-color": "var(--error-color)",
  "state-icon-unavailable-color": "var(--disabled-text-color)",
  "sidebar-text-color": "var(--primary-text-color)",
--- a/src/state/hass-element.ts
+++ b/src/state/hass-element.ts
@@ -12,6 +12,7 @@ import SidebarMixin from "./sidebar-mixin";
 import ThemesMixin from "./themes-mixin";
 import TranslationsMixin from "./translations-mixin";
 import { urlSyncMixin } from "./url-sync-mixin";
+import { suspendMixin } from "./suspend-mixin";

 const ext = <T extends Constructor>(baseClass: T, mixins): T =>
  mixins.reduceRight((base, mixin) => mixin(base), baseClass);
@@ -24,6 +25,7 @@ export class HassElement extends ext(HassBaseEl, [
  SidebarMixin,
  DisconnectToastMixin,
  connectionMixin,
+  suspendMixin,
  NotificationMixin,
  dialogManagerMixin,
  urlSyncMixin,
--- a/src/state/suspend-mixin.ts
+++ b/src/state/suspend-mixin.ts
@@ -0,0 +1,48 @@
+import { Constructor } from "../types";
+import { HassBaseEl } from "./hass-base-mixin";
+
+export const suspendMixin = <T extends Constructor<HassBaseEl>>(
+  superClass: T
+) =>
+  class extends superClass {
+    private __hiddenTimeout?: number;
+
+    private __visiblePromiseResolve?: () => void;
+
+    protected hassConnected() {
+      super.hassConnected();
+
+      document.addEventListener(
+        "visibilitychange",
+        () => this.__handleVisibilityChange(),
+        false
+      );
+    }
+
+    private __handleVisibilityChange() {
+      if (document.hidden) {
+        // If the document is hidden, we will prevent reconnects until we are visible again
+        this.hass!.connection.suspendReconnectUntil(
+          new Promise((resolve) => {
+            this.__visiblePromiseResolve = resolve;
+          })
+        );
+        // We close the connection to Home Assistant after being hidden for 5 minutes
+        this.__hiddenTimeout = window.setTimeout(() => {
+          this.__hiddenTimeout = undefined;
+          this.hass!.connection.suspend();
+        }, 300000);
+      } else {
+        // Clear timer to close the connection
+        if (this.__hiddenTimeout) {
+          clearTimeout(this.__hiddenTimeout);
+          this.__hiddenTimeout = undefined;
+        }
+        // Unsuspend the reconnect
+        if (this.__visiblePromiseResolve) {
+          this.__visiblePromiseResolve();
+          this.__visiblePromiseResolve = undefined;
+        }
+      }
+    }
+  };
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -44,19 +44,6 @@
        "idle": "Idle",
        "fan": "Fan"
      }
-    },
-    "humidifier": {
-      "mode": {
-        "normal": "Normal",
-        "eco": "Eco",
-        "away": "Away",
-        "boost": "Boost",
-        "comfort": "Comfort",
-        "home": "Home",
-        "sleep": "Sleep",
-        "auto": "Auto",
-        "baby": "Baby"
-      }
    }
  },
  "state_badge": {
@@ -159,12 +146,6 @@
        "forward": "Forward",
        "reverse": "Reverse"
      },
-      "humidifier": {
-        "humidity": "Target humidity",
-        "mode": "Mode",
-        "target_humidity_entity": "{name} target humidity",
-        "on_entity": "{name} on"
-      },
      "light": {
        "brightness": "Brightness",
        "color_temperature": "Color temperature",
@@ -1954,10 +1935,6 @@
              "name": "Horizontal Stack",
              "description": "The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column."
            },
-            "humidifier": {
-              "name": "Humidifier",
-              "description": "The Humidifier card gives control of your humidifier entity. Allowing you to change the humidity and mode of the entity."
-            },
            "iframe": {
              "name": "Webpage",
              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant."
--- a/src/util/hass-attributes-util.js
+++ b/src/util/hass-attributes-util.js
@@ -37,7 +37,6 @@ hassAttributeUtil.DOMAIN_DEVICE_CLASS = {
    "shutter",
    "window",
  ],
-  humidifier: ["dehumidifier", "humidifier"],
  sensor: [
    "battery",
    "humidity",
@@ -90,7 +89,7 @@ hassAttributeUtil.LOGIC_STATE_ATTRIBUTES = hassAttributeUtil.LOGIC_STATE_ATTRIBU
    type: "array",
    options: hassAttributeUtil.DOMAIN_DEVICE_CLASS,
    description: "Device class",
-    domains: ["binary_sensor", "cover", "humidifier", "sensor", "switch"],
+    domains: ["binary_sensor", "cover", "sensor", "switch"],
  },
  hidden: { type: "boolean", description: "Hide from UI" },
  assumed_state: {
@@ -101,7 +100,6 @@ hassAttributeUtil.LOGIC_STATE_ATTRIBUTES = hassAttributeUtil.LOGIC_STATE_ATTRIBU
      "cover",
      "climate",
      "fan",
-      "humidifier",
      "group",
      "water_heater",
    ],
--- a/translations/frontend/ca.json
+++ b/translations/frontend/ca.json
@@ -506,11 +506,6 @@
                "clear": "Esborra",
                "show_areas": "Mostra àrees"
            },
-            "date-range-picker": {
-                "end_date": "Data final",
-                "select": "Selecciona",
-                "start_date": "Data inici"
-            },
            "device-picker": {
                "clear": "Esborra",
                "device": "Dispositiu",
@@ -700,7 +695,6 @@
            "zha_device_info": {
                "buttons": {
                    "add": "Afegeix dispositius a través d'aquest dispositiu",
-                    "clusters": "Gestiona clústers",
                    "reconfigure": "Reconfigurar dispositiu",
                    "remove": "Eliminar dispositiu",
                    "zigbee_information": "Signatura Zigbee del dispositiu"
@@ -1564,7 +1558,6 @@
                    }
                },
                "mqtt": {
-                    "button": "Configura",
                    "description_listen": "Escolta d'un tòpic",
                    "description_publish": "Publicació d'un paquet",
                    "listening_to": "Escoltant a",
@@ -2042,23 +2035,11 @@
            },
            "history": {
                "period": "Període",
-                "ranges": {
-                    "last_week": "La setmana passada",
-                    "this_week": "Aquesta setmana",
-                    "today": "Avui",
-                    "yesterday": "Ahir"
-                },
                "showing_entries": "Mostrant entrades de"
            },
            "logbook": {
                "entries_not_found": "No s'han trobat entrades al registre.",
                "period": "Període",
-                "ranges": {
-                    "last_week": "La setmana passada",
-                    "this_week": "Aquesta setmana",
-                    "today": "Avui",
-                    "yesterday": "Ahir"
-                },
                "showing_entries": "Mostrant entrades de"
            },
            "lovelace": {
--- a/translations/frontend/da.json
+++ b/translations/frontend/da.json
@@ -506,11 +506,6 @@
                "clear": "Ryd",
                "show_areas": "Vis områder"
            },
-            "date-range-picker": {
-                "end_date": "Slutdato",
-                "select": "Vælg",
-                "start_date": "Startdato"
-            },
            "device-picker": {
                "clear": "Ryd",
                "device": "Enhed",
@@ -700,7 +695,6 @@
            "zha_device_info": {
                "buttons": {
                    "add": "Tilføj enheder",
-                    "clusters": "Administrer klynger",
                    "reconfigure": "Genkonfigurer enhed",
                    "remove": "Fjern enhed",
                    "zigbee_information": "Zigbee-oplysninger"
@@ -1564,7 +1558,6 @@
                    }
                },
                "mqtt": {
-                    "button": "Konfigurer",
                    "description_listen": "Lyt til et emne",
                    "description_publish": "Udsend en pakke",
                    "listening_to": "Lytter til",
@@ -2015,23 +2008,11 @@
            },
            "history": {
                "period": "Periode",
-                "ranges": {
-                    "last_week": "Sidste uge",
-                    "this_week": "Denne uge",
-                    "today": "I dag",
-                    "yesterday": "I går"
-                },
                "showing_entries": "Viser poster for"
            },
            "logbook": {
                "entries_not_found": "Der blev ikke fundet nogen logbogsposter.",
                "period": "Periode",
-                "ranges": {
-                    "last_week": "Sidste uge",
-                    "this_week": "Denne uge",
-                    "today": "I dag",
-                    "yesterday": "I går"
-                },
                "showing_entries": "Viser poster for"
            },
            "lovelace": {
--- a/translations/frontend/es.json
+++ b/translations/frontend/es.json
@@ -506,11 +506,6 @@
                "clear": "Limpiar",
                "show_areas": "Mostrar áreas"
            },
-            "date-range-picker": {
-                "end_date": "Fecha de finalización",
-                "select": "Seleccione",
-                "start_date": "Fecha de inicio"
-            },
            "device-picker": {
                "clear": "Limpiar",
                "device": "Dispositivo",
@@ -700,7 +695,6 @@
            "zha_device_info": {
                "buttons": {
                    "add": "Añadir dispositivos a través de este dispositivo",
-                    "clusters": "Administrar clústeres",
                    "reconfigure": "Reconfigurar dispositivo",
                    "remove": "Eliminar dispositivos",
                    "zigbee_information": "Firma del dispositivo Zigbee"
@@ -1564,7 +1558,6 @@
                    }
                },
                "mqtt": {
-                    "button": "Configurar",
                    "description_listen": "Escuchar un tema",
                    "description_publish": "Publicar un paquete",
                    "listening_to": "Escuchando",
@@ -2042,23 +2035,11 @@
            },
            "history": {
                "period": "Periodo",
-                "ranges": {
-                    "last_week": "La semana pasada",
-                    "this_week": "Esta semana",
-                    "today": "Hoy",
-                    "yesterday": "Ayer"
-                },
                "showing_entries": "Mostrando entradas del"
            },
            "logbook": {
                "entries_not_found": "No se han encontrado entradas en el registro.",
                "period": "Periodo",
-                "ranges": {
-                    "last_week": "La semana pasada",
-                    "this_week": "Esta semana",
-                    "today": "Hoy",
-                    "yesterday": "Ayer"
-                },
                "showing_entries": "Mostrando entradas del"
            },
            "lovelace": {
--- a/Show More
+++ b/Show More