diff --git a/src/panels/lovelace/hui-view-editable.ts b/src/panels/lovelace/hui-view-editable.ts
new file mode 100644
index 0000000000..8740b29f13
--- /dev/null
+++ b/src/panels/lovelace/hui-view-editable.ts
@@ -0,0 +1,3 @@
+// hui-view dependencies for when in edit mode.
+import "@polymer/paper-fab/paper-fab";
+import "./components/hui-card-options";
diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js
index 369dd3fb1c..e068eee53e 100644
--- a/src/panels/lovelace/hui-view.js
+++ b/src/panels/lovelace/hui-view.js
@@ -1,9 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "@polymer/paper-fab/paper-fab";
 import "../../components/entity/ha-state-label-badge";
-import "./components/hui-card-options";
 
 import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
 
@@ -13,6 +11,8 @@ import createCardElement from "./common/create-card-element";
 import { computeCardSize } from "./common/compute-card-size";
 import { showEditCardDialog } from "./editor/card-editor/show-edit-card-dialog";
 
+let editCodeLoaded = false;
+
 class HUIView extends localizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
@@ -97,7 +97,10 @@ class HUIView extends localizeMixin(EventsMixin(PolymerElement)) {
         type: Object,
         observer: "_hassChanged",
       },
-      lovelace: Object,
+      lovelace: {
+        type: Object,
+        observer: "_lovelaceChanged",
+      },
       config: Object,
       columns: Number,
       editMode: Boolean,
@@ -246,6 +249,13 @@ class HUIView extends localizeMixin(EventsMixin(PolymerElement)) {
       element.hass = hass;
     });
   }
+
+  _lovelaceChanged(lovelace) {
+    if (lovelace.editMode && !editCodeLoaded) {
+      editCodeLoaded = true;
+      import(/* webpackChunkName: "hui-view-editable" */ "./hui-view-editable");
+    }
+  }
 }
 
 customElements.define("hui-view", HUIView);