diff --git a/esphome/dashboard/static/esphome.js b/esphome/dashboard/static/esphome.js
index 044c2d70a3..1cf3dde2d6 100644
--- a/esphome/dashboard/static/esphome.js
+++ b/esphome/dashboard/static/esphome.js
@@ -709,9 +709,12 @@ document.querySelectorAll(".action-edit").forEach((btn) => {
     editorUploadButton.setAttribute('data-node', activeEditorConfig);
     filenameField.innerHTML = activeEditorConfig;
 
+    editor.setValue("Loading configuration yaml...");
+    editor.setOption('readOnly', true);
     fetch(`./edit?configuration=${activeEditorConfig}`, {credentials: "same-origin"})
       .then(res => res.text()).then(response => {
         editor.setValue(response, -1);
+        editor.setOption('readOnly', false);
     });
 
     modalInstance.open();