[IMP] website: change theme loader during install/update

This commit attempts to update the old "website.ThemePreview.Loader" style
by integrating a loading animation when theme is being installed

Common code used to add loader and install the selected theme in both
ThemePreviewController & ThemePreviewKanbanController.
(preview theme and pick a theme)

task-2338062

closes odoo/odoo#57682

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

5 files changed, 93 insertions, 44 deletions

diff --git a/addons/website/static/src/img/theme_loader.gif b/addons/website/static/src/img/theme_loader.gif
new file mode 100644
index 00000000000..a5c326571d0
--- /dev/null
+++ b/addons/website/static/src/img/theme_loader.gif
diff --git a/addons/website/static/src/js/theme_preview_form.js b/addons/website/static/src/js/theme_preview_form.js
index b074494648e..2519da77443 100644
--- a/addons/website/static/src/js/theme_preview_form.js
+++ b/addons/website/static/src/js/theme_preview_form.js
@@ -7,9 +7,67 @@ var viewRegistry = require('web.view_registry');
 var core = require('web.core');
 var qweb = core.qweb;
 
-var ThemePreviewController = FormController.extend({
+/*
+* Common code for theme installation/update handler.
+*/
+const ThemePreviewControllerCommon = {
+    /**
+     * @override
+     */
+    init() {
+        this._super(...arguments);
+        this.$loader = $(qweb.render('website.ThemePreview.Loader'));
+    },
+    /**
+     * Called to add loading effect and install/pdate the selected theme depending on action.
+     *
+     * @private
+     * @param {number} res_id
+     * @param {String} action
+     */
+    _handleThemeAction(res_id, action) {
+        let actionCallback = undefined;
+        this._addLoader();
+        switch (action) {
+            case 'button_choose_theme':
+                actionCallback = result => this.do_action(result);
+                break;
+            case 'button_refresh_theme':
+                actionCallback = () => this._removeLoader();
+                break;
+        }
+        const rpcData = {
+            model: 'ir.module.module',
+            method: action,
+            args: [res_id],
+            context: this.initialState.context,
+        };
+        const rpcOptions = {
+            shadow: true,
+        };
+        this._rpc(rpcData, rpcOptions)
+            .then(actionCallback)
+            .guardedCatch(() => this._removeLoader());
+    },
+    /**
+     * Called to add loader element in DOM.
+     *
+     * @private
+     */
+    _addLoader() {
+        $('body').append(this.$loader);
+    },
+    /**
+     * @private
+     */
+    _removeLoader() {
+        this.$loader.remove();
+    }
+};
+
+var ThemePreviewController = FormController.extend(ThemePreviewControllerCommon, {
     events: Object.assign({}, FormController.prototype.events, {
-        'click .o_use_theme': '_onUseThemeClick',
+        'click .o_use_theme': '_onStartNowClick',
         'click .o_switch_theme': '_onSwitchThemeClick',
         'change input[name="viewer"]': '_onSwitchButtonChange',
     }),
@@ -77,21 +135,12 @@ var ThemePreviewController = FormController.extend({
         this.trigger_up('history_back');
     },
     /**
-     * Handler called when user click on 'Use this theme' button in forw view.
+     * Handler called when user click on 'START NOW' button in form view.
      *
      * @private
      */
-    _onUseThemeClick: function () {
-        const $loader = $(qweb.render('website.ThemePreview.Loader'));
-        $('body').append($loader);
-        return this._rpc({
-            model: 'ir.module.module',
-            method: 'button_choose_theme',
-            args: [this.getSelectedIds()[0]],
-            context: this.initialState.context,
-        }, {shadow: true})
-            .then(result => this.do_action(result))
-            .guardedCatch(() => $loader.remove());
+    _onStartNowClick: function () {
+        this._handleThemeAction(this.getSelectedIds()[0], 'button_choose_theme');
     },
 });
 
@@ -103,4 +152,7 @@ var ThemePreviewFormView = FormView.extend({
 
 viewRegistry.add('theme_preview_form', ThemePreviewFormView);
 
+return {
+    ThemePreviewControllerCommon: ThemePreviewControllerCommon
+}
 });
diff --git a/addons/website/static/src/js/theme_preview_kanban.js b/addons/website/static/src/js/theme_preview_kanban.js
index 738f640d5fa..ac2e453da36 100644
--- a/addons/website/static/src/js/theme_preview_kanban.js
+++ b/addons/website/static/src/js/theme_preview_kanban.js
@@ -4,8 +4,9 @@ odoo.define('website.theme_preview_kanban', function (require) {
 var KanbanController = require('web.KanbanController');
 var KanbanView = require('web.KanbanView');
 var ViewRegistry = require('web.view_registry');
+const ThemePreviewControllerCommon = require('website.theme_preview_form').ThemePreviewControllerCommon;
 
-var ThemePreviewKanbanController = KanbanController.extend({
+var ThemePreviewKanbanController = KanbanController.extend(ThemePreviewControllerCommon, {
     /**
      * @override
      */
@@ -19,6 +20,20 @@ var ThemePreviewKanbanController = KanbanController.extend({
         });
         this._controlPanelWrapper.el.querySelector('.o_cp_top').appendChild(websiteLink);
     },
+    /**
+     * Called when user click on any button in kanban view.
+     * Targeted buttons are selected using name attribute value.
+     * 
+     * @override
+     */
+    _onButtonClicked: function (ev) {
+        const attrName = ev.data.attrs.name;
+        if (attrName === 'button_choose_theme' || attrName === 'button_refresh_theme') {
+            this._handleThemeAction(ev.data.record.res_id, attrName);
+        } else {
+            this._super(...arguments);
+        }
+    },
 });
 
 var ThemePreviewKanbanView = KanbanView.extend({
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index da4632b4f2c..5bb145b0596 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -427,34 +427,16 @@
 
 
 .o_theme_install_loader_container {
-  opacity: 0.85;
-  pointer-events: all;
+    background-color: $o-shadow-color;
+    opacity: 0.95;
+    pointer-events: all;
 }
 .o_theme_install_loader {
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 64px;
-}
-.o_theme_install_loader:after {
-  content: " ";
-  display: block;
-  border-radius: 50%;
-  margin: 6px;
-  border: 26px solid $o-brand-primary;
-  border-color: $o-brand-primary transparent $o-brand-primary transparent;
-  animation: o_theme_install_loader 1.2s infinite;
-}
-@keyframes o_theme_install_loader {
-  0% {
-    transform: rotate(0);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  50% {
-    transform: rotate(900deg);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  100% {
-    transform: rotate(1800deg);
-  }
+    position: relative;
+    display: inline-block;
+    width: 400px;
+    height: 220px;
+    background-image: url('/website/static/src/img/theme_loader.gif');
+    background-size: cover;
+    border-radius: 6px;
 }
diff --git a/addons/website/static/src/xml/theme_preview.xml b/addons/website/static/src/xml/theme_preview.xml
index aaf44620ac1..99e50a76f2f 100644
--- a/addons/website/static/src/xml/theme_preview.xml
+++ b/addons/website/static/src/xml/theme_preview.xml
@@ -24,7 +24,7 @@
         </div>
     </t>
     <t t-name="website.ThemePreview.Loader">
-        <div class="o_theme_install_loader_container position-fixed fixed-top fixed-left h-100 w-100 bg-white d-flex justify-content-center align-items-center">
+        <div class="o_theme_install_loader_container position-fixed fixed-top fixed-left h-100 w-100 d-flex justify-content-center align-items-center">
             <div class="o_theme_install_loader"></div>
         </div>
     </t>