[FIX] web_editor, website: prevent multiple click on save

Clicking on save on html editor is taking quite some time. The user might think
something is not happening and need to click again.
If he does click again, 2 write RPC will be sent, making the COW business code
being triggered twice, ultimately leading to create 2 COW.

Instead of
  A
 / \
B   B'

It will be
    A
  / | \
B   B' B'
With as many B' than there is click on save.

This commit adds a generic helper to make a button load/spin.

closes odoo/odoo#63417

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

3 files changed, 14 insertions, 8 deletions

diff --git a/addons/website/static/src/js/editor/editor_menu.js b/addons/website/static/src/js/editor/editor_menu.js
index 7249e0d3741..e330df97001 100644
--- a/addons/website/static/src/js/editor/editor_menu.js
+++ b/addons/website/static/src/js/editor/editor_menu.js
@@ -2,6 +2,7 @@ odoo.define('website.editor.menu', function (require) {
 'use strict';
 
 var Dialog = require('web.Dialog');
+var dom = require('web.dom');
 var Widget = require('web.Widget');
 var core = require('web.core');
 var Wysiwyg = require('web_editor.wysiwyg.root');
@@ -233,8 +234,9 @@ var EditorMenu = Widget.extend({
      *
      * @private
      */
-    _onSaveClick: function () {
-        this.save();
+    _onSaveClick: function (ev) {
+        const restore = dom.addButtonLoadingEffect(ev.currentTarget);
+        this.save().then(restore).guardedCatch(restore);
     },
     /**
      * @private
diff --git a/addons/website/static/src/js/menu/navbar.js b/addons/website/static/src/js/menu/navbar.js
index da86853f4e1..937392f88ec 100644
--- a/addons/website/static/src/js/menu/navbar.js
+++ b/addons/website/static/src/js/menu/navbar.js
@@ -180,12 +180,8 @@ var WebsiteNavbar = publicWidget.RootWidget.extend({
      * @param {Event} ev
      */
     _onActionMenuClick: function (ev) {
-        var $button = $(ev.currentTarget);
-        $button.prop('disabled', true);
-        var always = function () {
-            $button.prop('disabled', false);
-        };
-        this._handleAction($button.data('action')).then(always).guardedCatch(always);
+        const restore = dom.addButtonLoadingEffect(ev.currentTarget);
+        this._handleAction($(ev.currentTarget).data('action')).then(restore).guardedCatch(restore);
     },
     /**
      * Called when an action is asked to be executed from a child widget ->
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 3811f340fcb..412d7d279e3 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1400,3 +1400,11 @@ $ribbon-padding: 100px;
         bottom: 0;
     }
 }
+
+.o_website_btn_loading {
+    cursor: wait;
+    opacity: $btn-disabled-opacity;
+    .fa:not(.fa-spin) {
+        display: none;
+    }
+}