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

1 files changed, 25 insertions, 7 deletions

diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 4af811d41bc..b14684e4acd 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -343,20 +343,38 @@ var dom = {
             // part, the button is disabled without any visual effect.
             $button.addClass('o_debounce_disabled');
             Promise.resolve(dom.DEBOUNCE && concurrency.delay(dom.DEBOUNCE)).then(function () {
-                $button.addClass('disabled').prop('disabled', true);
                 $button.removeClass('o_debounce_disabled');
-
-                return Promise.resolve(result).then(function () {
-                    $button.removeClass('disabled').prop('disabled', false);
-                }).guardedCatch(function () {
-                    $button.removeClass('disabled').prop('disabled', false);
-                });
+                const restore = dom.addButtonLoadingEffect($button[0]);
+                return Promise.resolve(result).then(restore).guardedCatch(restore);
             });
 
             return result;
         };
     },
     /**
+     * Gives the button a loading effect by disabling it and adding a `fa`
+     * spinner icon.
+     * The existing button `fa` icons will be hidden through css.
+     *
+     * @param {HTMLElement} btn - the button to disable/load
+     * @return {function} a callback function that will restore the button
+     *         initial state
+     */
+    addButtonLoadingEffect: function (btn) {
+        const $btn = $(btn);
+        $btn.addClass('o_website_btn_loading disabled');
+        $btn.prop('disabled', true);
+        const $loader = $('<span/>', {
+            class: 'fa fa-refresh fa-spin mr-2',
+        });
+        $btn.prepend($loader);
+        return () => {
+             $btn.removeClass('o_website_btn_loading disabled');
+             $btn.prop('disabled', false);
+             $loader.remove();
+        };
+    },
+    /**
      * Prepends content in a jQuery object and optionnally triggers an event
      *
      * @param {jQuery} [$target] the node where content will be prepended