2 files changed, 61 insertions, 0 deletions
diff --git a/addons/web_editor/static/src/js/frontend/loader.js b/addons/web_editor/static/src/js/frontend/loader.js
new file mode 100644
index 00000000..9c6cf0ef
--- /dev/null
+++ b/addons/web_editor/static/src/js/frontend/loader.js
@@ -0,0 +1,28 @@
+odoo.define('web_editor.loader', function (require) {
+'use strict';
+
+var Wysiwyg = require('web_editor.wysiwyg.root');
+
+function load(parent, textarea, options) {
+    var loading = textarea.nextElementSibling;
+    if (loading && !loading.classList.contains('o_wysiwyg_loading')) {
+        loading = null;
+    }
+
+    if (!textarea.value.match(/\S/)) {
+        textarea.value = '<p><br/></p>';
+    }
+
+    var wysiwyg = new Wysiwyg(parent, options);
+    return wysiwyg.attachTo(textarea).then(() => {
+        if (loading) {
+            loading.parentNode.removeChild(loading);
+        }
+        return wysiwyg;
+    });
+}
+
+return {
+    load: load,
+};
+});
diff --git a/addons/web_editor/static/src/js/frontend/loader_loading.js b/addons/web_editor/static/src/js/frontend/loader_loading.js
new file mode 100644
index 00000000..f5e8eda7
--- /dev/null
+++ b/addons/web_editor/static/src/js/frontend/loader_loading.js
@@ -0,0 +1,33 @@
+(function () {
+'use strict';
+
+/**
+ * This file makes sure textarea elements with a specific editor class are
+ * tweaked as soon as the DOM is ready so that they appear to be loading.
+ *
+ * They must then be loaded using standard Odoo modules system. In particular,
+ * @see web_editor.loader
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Standard loop for better browser support
+    var textareaEls = document.querySelectorAll('textarea.o_wysiwyg_loader');
+    for (var i = 0; i < textareaEls.length; i++) {
+        var textarea = textareaEls[i];
+        var wrapper = document.createElement('div');
+        wrapper.classList.add('position-relative', 'o_wysiwyg_wrapper');
+
+        var loadingElement = document.createElement('div');
+        loadingElement.classList.add('o_wysiwyg_loading');
+        var loadingIcon = document.createElement('i');
+        loadingIcon.classList.add('text-600', 'text-center',
+            'fa', 'fa-circle-o-notch', 'fa-spin', 'fa-2x');
+        loadingElement.appendChild(loadingIcon);
+        wrapper.appendChild(loadingElement);
+
+        textarea.parentNode.insertBefore(wrapper, textarea);
+        wrapper.insertBefore(textarea, loadingElement);
+    }
+});
+
+})();