diff --git a/src/layouts/app/connection-mixin.js b/src/layouts/app/connection-mixin.js
index 40851476a5..7fb6fb7f8d 100644
--- a/src/layouts/app/connection-mixin.js
+++ b/src/layouts/app/connection-mixin.js
@@ -153,15 +153,17 @@ export default superClass =>
       const conn = this.hass.connection;
 
       const reconnected = () => this.hassReconnected();
-      const disconnected = () => this._updateHass({ connected: false });
+      const disconnected = () => this.hassDisconnected();
       const reconnectError = async (_conn, err) => {
         if (err !== ERR_INVALID_AUTH) return;
-        disconnected();
+
         while (this.unsubFuncs.length) {
           this.unsubFuncs.pop()();
         }
         const accessToken = await refreshToken();
-        this._handleNewConnProm(window.createHassConnection(null, accessToken));
+        const newConn = window.createHassConnection(null, accessToken);
+        newConn.then(() => this.hassReconnected());
+        this._handleNewConnProm(newConn);
       };
 
       conn.addEventListener('ready', reconnected);
@@ -191,6 +193,11 @@ export default superClass =>
       this._loadPanels();
     }
 
+    hassDisconnected() {
+      super.hassDisconnected();
+      this._updateHass({ connected: false });
+    }
+
     async _loadPanels() {
       const panels = await this.hass.callWS({
         type: 'get_panels'
diff --git a/src/layouts/app/disconnect-toast-mixin.js b/src/layouts/app/disconnect-toast-mixin.js
new file mode 100644
index 0000000000..8a23044315
--- /dev/null
+++ b/src/layouts/app/disconnect-toast-mixin.js
@@ -0,0 +1,27 @@
+import LocalizeMixin from '../../mixins/localize-mixin.js';
+
+export default superClass =>
+  class extends LocalizeMixin(superClass) {
+    hassConnected() {
+      super.hassConnected();
+      // Need to load in advance because when disconnected, can't dynamically load code.
+      import(/* webpackChunkName: "ha-toast" */ '../../components/ha-toast.js');
+    }
+
+    hassReconnected() {
+      super.hassReconnected();
+      this.__discToast.opened = false;
+    }
+
+    hassDisconnected() {
+      super.hassDisconnected();
+      if (!this.__discToast) {
+        const el = document.createElement('ha-toast');
+        el.duration = 0;
+        el.text = this.localize('ui.notification_toast.connection_lost');
+        this.__discToast = el;
+        this.shadowRoot.appendChild(el);
+      }
+      this.__discToast.opened = true;
+    }
+  };
diff --git a/src/layouts/app/hass-base-mixin.js b/src/layouts/app/hass-base-mixin.js
index 421d9c659a..5909a28db5 100644
--- a/src/layouts/app/hass-base-mixin.js
+++ b/src/layouts/app/hass-base-mixin.js
@@ -9,6 +9,7 @@ export default superClass => class extends superClass {
   // Exists so all methods can safely call super method
   hassConnected() {}
   hassReconnected() {}
+  hassDisconnected() {}
   panelUrlChanged(newPanelUrl) {}
   hassChanged(hass, oldHass) {
     this.__provideHass.forEach((el) => {
diff --git a/src/layouts/app/home-assistant.js b/src/layouts/app/home-assistant.js
index 716b67edeb..fc662929da 100644
--- a/src/layouts/app/home-assistant.js
+++ b/src/layouts/app/home-assistant.js
@@ -18,6 +18,7 @@ import SidebarMixin from './sidebar-mixin.js';
 import DialogManagerMixin from './dialog-manager-mixin.js';
 import ConnectionMixin from './connection-mixin.js';
 import NotificationMixin from './notification-mixin.js';
+import DisconnectToastMixin from './disconnect-toast-mixin.js';
 
 import(/* webpackChunkName: "login-form" */ '../../layouts/login-form.js');
 
@@ -29,6 +30,7 @@ class HomeAssistant extends ext(PolymerElement, [
   TranslationsMixin,
   MoreInfoMixin,
   SidebarMixin,
+  DisconnectToastMixin,
   ConnectionMixin,
   NotificationMixin,
   DialogManagerMixin,
diff --git a/src/managers/notification-manager.js b/src/managers/notification-manager.js
index 98cf7747e9..7faf329ace 100644
--- a/src/managers/notification-manager.js
+++ b/src/managers/notification-manager.js
@@ -3,8 +3,6 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import LocalizeMixin from '../mixins/localize-mixin.js';
 
-import '../components/ha-toast.js';
-
 class NotificationManager extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
@@ -18,58 +16,23 @@ class NotificationManager extends LocalizeMixin(PolymerElement) {
       id="toast"
       no-cancel-on-outside-click="[[_cancelOnOutsideClick]]"
     ></ha-toast>
-
-    <ha-toast
-      id="connToast"
-      duration="0"
-      text="[[localize('ui.notification_toast.connection_lost')]]"
-      opened="[[connectionLost]]"
-    ></ha-toast>
 `;
   }
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-        observer: 'hassChanged',
-      },
-
-      wasConnected: {
-        type: Boolean,
-        value: false,
-      },
-
-      connectionLost: {
-        type: Boolean,
-        computed: 'computeConnectionLost(wasConnected, hass)',
-      },
+      hass: Object,
 
       _cancelOnOutsideClick: {
         type: Boolean,
         value: false,
       },
-
-      toastClass: {
-        type: String,
-        value: '',
-      },
     };
   }
 
-  hassChanged(hass) {
-    if (hass && hass.connected) {
-      // Once the connetion is established, set wasConnected to true
-      this.wasConnected = true;
-    }
-    if (!hass || !hass.connection) {
-      // If the users logs out, reset wasConnected
-      this.wasConnected = false;
-    }
-  }
-
-  computeConnectionLost(wasConnected, hass) {
-    return wasConnected && hass && !hass.connected;
+  ready() {
+    super.ready();
+    import(/* webpackChunkName: "ha-toast" */ '../components/ha-toast.js');
   }
 
   showDialog({ message }) {