[IMP] web_editor, *: introduce wysiwyg frontend loader

* website_forum, website_profile

- Share some code between website_forum and website_profile by exposing
  a function in web_editor to instantiate a wysiwyg instance on a
  textarea

- Use no-lazy loaded JS to add a visual loading effect while the
  wysiwyg is not yet available.

This is made in preparation of task-2024197
(see https://github.com/odoo/odoo/pull/35749)

Thanks to @stefanorigano

closes odoo/odoo#36581

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

8 files changed, 99 insertions, 23 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 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 = '<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 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 @@
     </xpath>
 </template>
 
+<template id="_assets_frontend_minimal_js" inherit_id="web._assets_frontend_minimal_js">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/src/js/frontend/loader_loading.js"/>
+    </xpath>
+</template>
+
 <template id="assets_frontend" inherit_id="web.assets_frontend" name="Web Editor Frontend Assets (used in public odoo)" priority="15">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
         <link rel="stylesheet" type ="text/scss" href="/web_editor/static/src/scss/web_editor.frontend.scss"/>
     </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/web_editor/static/src/js/frontend/loader.js"/>
+    </xpath>
 </template>
 
 <template id="qunit_suite" inherit_id="web.qunit_suite">
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('<p><br/></p>');
-            }
             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"/>
             <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
 
-            <textarea name="content" required="True" id="content" class="form-control load_editor"
+            <textarea name="content" required="True" id="content" class="form-control o_wysiwyg_loader"
                     t-att-data-karma="forum.karma_editor">
                 <t t-esc="question_content"/>
             </textarea>
@@ -554,7 +554,7 @@
             </div>
             <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
             <input type="hidden" name="karma_tag_create" t-attf-value="#{forum.karma_tag_create}" id="karma_tag_create"/>
-            <textarea name="content" id="content" required="True" class="form-control load_editor"
+            <textarea name="content" id="content" required="True" class="form-control o_wysiwyg_loader"
                     t-att-data-karma="forum.karma_editor">
                 <t t-esc="post.content"/>
             </textarea>
@@ -632,7 +632,7 @@
             <h3 class="mt8">Your Reply</h3>
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
             <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
-            <textarea name="content" t-attf-id="content-#{str(object.id)}" class="form-control load_editor" required="True"
+            <textarea name="content" t-attf-id="content-#{str(object.id)}" class="form-control o_wysiwyg_loader" required="True"
                 t-att-data-karma="forum.karma_editor"/>
             <button type="submit" class="btn btn-primary mb16">Post Answer</button>
         </form>
@@ -654,7 +654,7 @@
     <form t-attf-action="/forum/#{ slug(forum) }/#{slug(question)}/reply" method="post" class="js_website_submit_form" role="form">
         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
         <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
-        <textarea name="content" t-attf-id="content-#{str(question.id)}" class="form-control load_editor" required="True"
+        <textarea name="content" t-attf-id="content-#{str(question.id)}" class="form-control o_wysiwyg_loader" required="True"
                 t-att-data-karma="forum.karma_editor"/>
         <button type="submit" t-attf-class="btn btn-primary #{forum.allow_share and 'oe_social_share_call' or ''} my-3 #{not question.can_answer and 'karma_required' or ''}"
                 t-att-data-karma="question.forum_id.karma_answer"
diff --git a/addons/website_profile/static/src/js/website_profile.js b/addons/website_profile/static/src/js/website_profile.js
index b78d2ed9f06..8030d06f0fe 100644
--- a/addons/website_profile/static/src/js/website_profile.js
+++ b/addons/website_profile/static/src/js/website_profile.js
@@ -2,7 +2,8 @@ odoo.define('website_profile.website_profile', function (require) {
 'use strict';
 
 var publicWidget = require('web.public.widget');
-var Wysiwyg = require('web_editor.wysiwyg.root');
+var wysiwygLoader = require('web_editor.loader');
+
 publicWidget.registry.websiteProfile = publicWidget.Widget.extend({
     selector: '.o_wprofile_email_validation_container',
     read_events: {
@@ -58,19 +59,19 @@ publicWidget.registry.websiteProfileEditor = publicWidget.Widget.extend({
         if (this.editableMode) {
             return def;
         }
-        var $textarea = this.$('textarea.load_editor');
-        var wysiwyg = new Wysiwyg(this, {
+
+        var $textarea = this.$('textarea.o_wysiwyg_loader');
+        var loadProm = wysiwygLoader.load(this, $textarea[0], {
             recordInfo: {
                 context: this._getContext(),
                 res_model: 'res.users',
                 res_id: parseInt(this.$('input[name=user_id]').val()),
             },
+        }).then(wysiwyg => {
+            this._wysiwyg = wysiwyg;
         });
 
-        if (!$textarea.val().match(/\S/)) {
-            $textarea.val('<p><br/></p>');
-        }
-        return Promise.all([def, wysiwyg.attachTo($textarea)]);
+        return Promise.all([def, loadProm]);
     },
 
     //--------------------------------------------------------------------------
@@ -118,7 +119,9 @@ publicWidget.registry.websiteProfileEditor = publicWidget.Widget.extend({
      * @private
      */
     _onSubmitClick: function () {
-        this.$('textarea.load_editor').data('wysiwyg').save();
+        if (this._wysiwyg) {
+            this._wysiwyg.save();
+        }
     },
 });
 
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 4a43b3046b5..4d77af30669 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -171,7 +171,7 @@
                                 <div class="form-group col-12">
                                     <label class="mb-1 text-primary" for="description"><span class="font-weight-bold">Biography</span></label>
                                     <textarea name="description" id="description" style="min-height: 120px"
-                                        class="form-control load_editor"><t t-esc="user.partner_id.website_description"/></textarea>
+                                        class="form-control o_wysiwyg_loader"><t t-esc="user.partner_id.website_description"/></textarea>
                                 </div>
                                 <div class="col">
                                     <button type="submit" class="btn btn-primary o_wprofile_submit_btn">Update</button>