[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>

1 files changed, 30 insertions, 0 deletions

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);
+    });
+});
+
+})();