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 00000000000..9c6cf0ef984
--- /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 = '
';
+ }
+
+ 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 00000000000..b5156944470
--- /dev/null
+++ b/addons/web_editor/static/src/js/frontend/loader_loading.js
@@ -0,0 +1,30 @@
+(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', () => {
+ document.querySelectorAll('textarea.o_wysiwyg_loader').forEach(textarea => {
+ 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);
+ });
+});
+
+})();
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index 7df7cacccb4..58a314bb7ad 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -3,3 +3,14 @@
transform: none !important;
}
}
+
+.o_wysiwyg_loader {
+ @extend .form-control:disabled;
+ pointer-events: none;
+ min-height: 100px;
+ color: transparent;
+}
+.o_wysiwyg_loading {
+ @include o-position-absolute($top: 50%, $left: 50%);
+ transform: translate(-50%, -50%)
+}
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 484ca4994c4..8c9c2028cd2 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -157,11 +157,20 @@
+
+
+
+
+
+
+
+
+
diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index b4f15dad5c8..d4e65371a58 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -2,10 +2,9 @@ odoo.define('website_forum.website_forum', function (require) {
'use strict';
var core = require('web.core');
-var Wysiwyg = require('web_editor.wysiwyg.root');
+var wysiwygLoader = require('web_editor.loader');
var publicWidget = require('web.public.widget');
var session = require('web.session');
-var utils = require('web.utils');
var qweb = core.qweb;
var _t = core._t;
@@ -111,12 +110,9 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
},
});
- _.each($('textarea.load_editor'), function (textarea) {
+ _.each($('textarea.o_wysiwyg_loader'), function (textarea) {
var $textarea = $(textarea);
var editorKarma = $textarea.data('karma') || 0; // default value for backward compatibility
- if (!$textarea.val().match(/\S/)) {
- $textarea.val('
');
- }
var $form = $textarea.closest('form');
var hasFullEdit = parseInt($("#karma").val()) >= editorKarma;
var toolbar = [
@@ -146,12 +142,11 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
MediaPlugin: false,
};
}
- var wysiwyg = new Wysiwyg(self, options);
- wysiwyg.attachTo($textarea).then(function () {
+ wysiwygLoader.load(self, $textarea[0], options).then(wysiwyg => {
// float-left class messes up the post layout OPW 769721
$form.find('.note-editable').find('img.float-left').removeClass('float-left');
- $form.on('click', 'button .a-submit', function () {
- $form.find('textarea').data('wysiwyg').save();
+ $form.on('click', 'button .a-submit', () => {
+ wysiwyg.save();
});
});
});
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index cba1430198d..ecb67f5a4d8 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -523,7 +523,7 @@
class="form-control mb16" placeholder="Your Question Title..." title="Title must not be empty"/>
-
@@ -554,7 +554,7 @@
-
@@ -632,7 +632,7 @@
Your Reply
-
@@ -654,7 +654,7 @@