From ccc56e28a39c48926437d191caa12a4254d1c266 Mon Sep 17 00:00:00 2001
From: Mohammed Shekha <msh@odoo.com>
Date: Wed, 7 Oct 2020 12:01:05 +0000
Subject: [PATCH] [IMP] *: replace fa-spinner with fa-circle-o-notch

Slightly improve the overall UI of Odoo with a more modern feel by updating the
current 'loading' icons that look quite old school.

Use fa-circle-o-notch instead of old style fa-spinner

task-2346142

closes odoo/odoo#59454

Related: odoo/enterprise#13908
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 addons/im_livechat/static/src/legacy/public_livechat.xml    | 4 ++--
 addons/mail/static/src/components/attachment/attachment.xml | 2 +-
 .../src/components/chatter_container/chatter_container.xml  | 2 +-
 .../static/src/components/chatter_topbar/chatter_topbar.xml | 2 +-
 addons/mail/static/src/components/discuss/discuss.xml       | 2 +-
 .../static/src/components/message_list/message_list.xml     | 2 +-
 .../static/src/components/messaging_menu/messaging_menu.xml | 4 ++--
 .../mail/static/src/components/thread_view/thread_view.xml  | 2 +-
 addons/mail/static/src/xml/web_kanban_activity.xml          | 2 +-
 .../static/src/xml/ChromeWidgets/ProxyStatus.xml            | 2 +-
 .../static/src/xml/ChromeWidgets/SyncNotification.xml       | 2 +-
 .../PaymentScreen/PaymentScreenElectronicPayment.xml        | 4 ++--
 .../point_of_sale/static/tests/unit/test_PaymentScreen.js   | 6 +++---
 addons/portal/views/portal_templates.xml                    | 2 +-
 addons/web/static/src/js/fields/relational_fields.js        | 2 +-
 addons/web/static/src/js/public/public_root.js              | 2 +-
 addons/web/static/src/xml/base.xml                          | 4 ++--
 addons/web_editor/static/src/js/editor/snippets.editor.js   | 2 +-
 addons/website/static/src/js/backend/dashboard.js           | 2 +-
 addons/website/static/src/js/menu/new_content.js            | 2 +-
 .../website_event_meet/views/event_meet_templates_page.xml  | 2 +-
 .../views/event_track_templates_page.xml                    | 2 +-
 addons/website_jitsi/static/src/xml/chat_room_modal.xml     | 2 +-
 .../static/src/js/website_sale_delivery.js                  | 3 ++-
 .../website_slides/static/src/xml/website_slides_upload.xml | 2 +-
 25 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/addons/im_livechat/static/src/legacy/public_livechat.xml b/addons/im_livechat/static/src/legacy/public_livechat.xml
index 821edc30cfb..b5cf12a6ff8 100644
--- a/addons/im_livechat/static/src/legacy/public_livechat.xml
+++ b/addons/im_livechat/static/src/legacy/public_livechat.xml
@@ -113,7 +113,7 @@
 
     <!-- Rendering of thread when messaging not yet ready -->
     <div t-name="im_livechat.legacy.mail.widget.ThreadLoading" class="o_mail_thread_loading">
-        <i class="o_mail_thread_loading_icon fa fa-spinner fa-spin"/>
+        <i class="o_mail_thread_loading_icon fa fa-circle-o-notch fa-spin"/>
         <span>Please wait...</span>
     </div>
 
@@ -636,7 +636,7 @@
      <t t-name="im_livechat.legacy.mail.widget.Thread.LoadMore">
         <div class="o_thread_show_more">
             <t t-if="options.loadMoreOnScroll">
-                <span><i class="fa fa-spinner fa-spin" role="img" aria-label="Please wait" title="Please wait"/> Loading older messages... </span>
+                <span><i class="fa fa-circle-o-notch fa-spin" role="img" aria-label="Please wait" title="Please wait"/> Loading older messages... </span>
             </t>
             <t t-else="">
                 <button class="btn btn-link">-------- Show older messages --------</button>
diff --git a/addons/mail/static/src/components/attachment/attachment.xml b/addons/mail/static/src/components/attachment/attachment.xml
index 93b8e1620f7..af543ce44a5 100644
--- a/addons/mail/static/src/components/attachment/attachment.xml
+++ b/addons/mail/static/src/components/attachment/attachment.xml
@@ -79,7 +79,7 @@
                         <!-- Uploading icon -->
                         <t t-if="attachment.isUploading and attachment.isLinkedToComposer">
                             <div class="o_Attachment_asideItem o_Attachment_asideItemUploading" title="Uploading">
-                                <i class="fa fa-spin fa-spinner"/>
+                                <i class="fa fa-spin fa-circle-o-notch"/>
                             </div>
                         </t>
                         <!-- Uploaded icon -->
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.xml b/addons/mail/static/src/components/chatter_container/chatter_container.xml
index c1d8d22067c..94e0d210017 100644
--- a/addons/mail/static/src/components/chatter_container/chatter_container.xml
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.xml
@@ -7,7 +7,7 @@
                 <Chatter chatterLocalId="chatter.localId"/>
             </t>
             <t t-else="">
-                <div class="o_ChatterContainer_noChatter"><i class="o_ChatterContainer_noChatterIcon fa fa-spinner fa-spin"/>Please wait...</div>
+                <div class="o_ChatterContainer_noChatter"><i class="o_ChatterContainer_noChatterIcon fa fa-circle-o-notch fa-spin"/>Please wait...</div>
             </t>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
index 5d4029e6158..fb1c03aae17 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
@@ -43,7 +43,7 @@
                                     <span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount" t-esc="chatter.thread ? chatter.thread.allAttachments.length : 0"/>
                                 </t>
                                 <t t-else="">
-                                    <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-spinner fa-spin" aria-label="Attachment counter loading..."/>
+                                    <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-circle-o-notch fa-spin" aria-label="Attachment counter loading..."/>
                                 </t>
                             </button>
                             <t t-if="chatter.hasFollowers and chatter.thread">
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
index 1fadb224ce1..997683aa58c 100644
--- a/addons/mail/static/src/components/discuss/discuss.xml
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -9,7 +9,7 @@
             }"
         >
             <t t-if="!env.isMessagingInitialized()">
-                <div class="o_Discuss_messagingNotInitialized"><i class="o_Discuss_messagingNotInitializedIcon fa fa-spinner fa-spin"/>Please wait...</div>
+                <div class="o_Discuss_messagingNotInitialized"><i class="o_Discuss_messagingNotInitializedIcon fa fa-circle-o-notch fa-spin"/>Please wait...</div>
             </t>
             <t t-else="">
                 <t t-if="!env.messaging.device.isMobile">
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index b7675a938ba..67bef1fdb6d 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -95,7 +95,7 @@
     <t t-name="mail.MessageList.loadMore" owl="1">
         <t t-if="threadView.threadCache.isLoadingMore">
             <div class="o_MessageList_item o_MessageList_isLoadingMore">
-                <i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-spinner"/>
+                <i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-circle-o-notch"/>
                 Loading...
             </div>
         </t>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index fc779231dd8..72392081ba0 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -6,7 +6,7 @@
             <a class="o_MessagingMenu_toggler" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler">
                 <i class="o_MessagingMenu_icon fa fa-comments" role="img" aria-label="Messages"/>
                 <t t-if="!env.isMessagingInitialized()">
-                    <i class="o_MessagingMenu_loading fa fa-spinner fa-spin"/>
+                    <i class="o_MessagingMenu_loading fa fa-circle-o-notch fa-spin"/>
                 </t>
                 <t t-elif="messagingMenu.counter > 0">
                     <span class="o_MessagingMenu_counter badge badge-pill">
@@ -17,7 +17,7 @@
             <t t-if="messagingMenu and messagingMenu.isOpen">
                 <div class="o_MessagingMenu_dropdownMenu dropdown-menu dropdown-menu-right" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-messaging-not-initialized': !env.messaging.isInitialized }" role="menu">
                     <t t-if="!env.messaging.isInitialized">
-                        <span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-spinner fa-spin"/>Please wait...</span>
+                        <span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-circle-o-notch fa-spin"/>Please wait...</span>
                     </t>
                     <t t-else="">
                         <div class="o_MessagingMenu_dropdownMenuHeader" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
diff --git a/addons/mail/static/src/components/thread_view/thread_view.xml b/addons/mail/static/src/components/thread_view/thread_view.xml
index 72e0dcf04d4..5a0a2cfe378 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.xml
+++ b/addons/mail/static/src/components/thread_view/thread_view.xml
@@ -6,7 +6,7 @@
             <t t-if="threadView">
                 <t t-if="threadView.isLoading and !threadView.threadCache.isLoaded" name="loadingCondition">
                     <div class="o_ThreadView_loading">
-                        <span><i class="o_ThreadView_loadingIcon fa fa-spinner fa-spin" title="Loading..." role="img"/>Loading...</span>
+                        <span><i class="o_ThreadView_loadingIcon fa fa-circle-o-notch fa-spin" title="Loading..." role="img"/>Loading...</span>
                     </div>
                 </t>
                 <t t-elif="threadView.threadCache.isLoaded or threadView.thread.isTemporary">
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index c73229f85b5..8d5be7bba5a 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -19,7 +19,7 @@
 
 <t t-name="mail.KanbanActivityLoading">
     <div class="dropdown-item text-center o_no_activity">
-        <span class="fa fa-spinner fa-spin fa-2x" role="img" aria-label="Loading..." title="Loading..."/>
+        <span class="fa fa-circle-o-notch fa-spin fa-2x" role="img" aria-label="Loading..." title="Loading..."/>
     </div>
 </t>
 
diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/ProxyStatus.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/ProxyStatus.xml
index 3bcbef6d569..57c5cbc8bb7 100644
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/ProxyStatus.xml
+++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/ProxyStatus.xml
@@ -11,7 +11,7 @@
                    title="Proxy Connected"></i>
             </span>
             <span t-if="state.status === 'connecting'" class="js_connecting">
-                <i class="fa fa-fw fa-spin fa-spinner" role="img" aria-label="Connecting to Proxy"
+                <i class="fa fa-fw fa-spin fa-circle-o-notch" role="img" aria-label="Connecting to Proxy"
                    title="Connecting to Proxy"></i>
             </span>
             <span t-if="state.status === 'warning'" class="js_warning oe_orange">
diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/SyncNotification.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/SyncNotification.xml
index 4a08c7ac769..0680a5482a3 100644
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/SyncNotification.xml
+++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/SyncNotification.xml
@@ -12,7 +12,7 @@
                    title="Synchronisation Connected"></i>
             </div>
             <div t-if="state.status === 'connecting'" class="js_connecting oe_icon">
-                <i class="fa fa-fw fa-spin fa-spinner" role="img"
+                <i class="fa fa-fw fa-spin fa-circle-o-notch" role="img"
                    aria-label="Synchronisation Connecting" title="Synchronisation Connecting"></i>
             </div>
             <div t-if="state.status === 'disconnected'" class="js_disconnected oe_icon oe_red">
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenElectronicPayment.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenElectronicPayment.xml
index 792c490c825..dc2a7b752a4 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenElectronicPayment.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenElectronicPayment.xml
@@ -40,7 +40,7 @@
                     Request sent
                 </div>
                 <div>
-                    <i class="fa fa-spinner fa-spin" role="img" />
+                    <i class="fa fa-circle-o-notch fa-spin" role="img" />
                 </div>
             </t>
             <t t-elif="props.line.payment_status == 'reversing'">
@@ -48,7 +48,7 @@
                     Reversal request sent to terminal
                 </div>
                 <div>
-                    <i class="fa fa-spinner fa-spin" role="img" />
+                    <i class="fa fa-circle-o-notch fa-spin" role="img" />
                 </div>
             </t>
             <t t-elif="props.line.payment_status == 'done'">
diff --git a/addons/point_of_sale/static/tests/unit/test_PaymentScreen.js b/addons/point_of_sale/static/tests/unit/test_PaymentScreen.js
index f8f07ab7601..5dcc828b5fb 100644
--- a/addons/point_of_sale/static/tests/unit/test_PaymentScreen.js
+++ b/addons/point_of_sale/static/tests/unit/test_PaymentScreen.js
@@ -279,15 +279,15 @@ odoo.define('point_of_sale.tests.PaymentScreen', function (require) {
 
         parent.line.setPaymentStatus('waiting');
         await testUtils.nextTick();
-        assert.ok(parent.el.querySelector('.paymentline i.fa-spinner'));
+        assert.ok(parent.el.querySelector('.paymentline i.fa-circle-o-notch'));
 
         parent.line.setPaymentStatus('waitingCancel');
         await testUtils.nextTick();
-        assert.ok(parent.el.querySelector('.paymentline i.fa-spinner'));
+        assert.ok(parent.el.querySelector('.paymentline i.fa-circle-o-notch'));
 
         parent.line.setPaymentStatus('reversing');
         await testUtils.nextTick();
-        assert.ok(parent.el.querySelector('.paymentline i.fa-spinner'));
+        assert.ok(parent.el.querySelector('.paymentline i.fa-circle-o-notch'));
 
         parent.line.setPaymentStatus('done');
         await testUtils.nextTick();
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 1ca10a05b65..cfc20516330 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -178,7 +178,7 @@
             </t>
             <t t-elif="placeholder_count">
                 <span class="badge badge-secondary badge-pill" t-att-data-placeholder_count="placeholder_count">
-                    <i class="fa fa-spin fa-spinner"></i>
+                    <i class="fa fa-spin fa-circle-o-notch"></i>
                 </span>
             </t>
         </a>
diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index d52bb7f48eb..505e49f9897 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -231,7 +231,7 @@ var FieldMany2One = AbstractField.extend({
     _addAutocompleteSource: function (method, params) {
         this._autocompleteSources.push({
             method: method,
-            placeholder: (params.placeholder ? _t(params.placeholder) : _t('Loading...')) + '<i class="fa fa-spinner fa-spin pull-right"></i>' ,
+            placeholder: (params.placeholder ? _t(params.placeholder) : _t('Loading...')) + '<i class="fa fa-spin fa-circle-o-notch pull-right"></i>' ,
             validation: params.validation,
             loading: false,
             order: params.order || 999
diff --git a/addons/web/static/src/js/public/public_root.js b/addons/web/static/src/js/public/public_root.js
index b5d7ad06985..1bbb98bd22b 100644
--- a/addons/web/static/src/js/public/public_root.js
+++ b/addons/web/static/src/js/public/public_root.js
@@ -305,7 +305,7 @@ var PublicRoot = publicWidget.RootWidget.extend({
         var $buttons = $(ev.currentTarget).find('button[type="submit"], a.a-submit');
         _.each($buttons, function (btn) {
             var $btn = $(btn);
-            $btn.html('<i class="fa fa-spinner fa-spin"></i> ' + $btn.text());
+            $btn.prepend('<i class="fa fa-circle-o-notch fa-spin"></i> ');
             $btn.prop('disabled', true);
         });
     },
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 47850e1b058..f7a5bb592cd 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1659,7 +1659,7 @@
     </div>
 </t>
 <t t-name="Spinner">
-    <div class="o_spinner"><i class="fa fa-spinner fa-spin" role="img" aria-label="Loading, please wait..." title="Loading, please wait..."/></div>
+    <div class="o_spinner"><i class="fa fa-circle-o-notch fa-spin" role="img" aria-label="Loading, please wait..." title="Loading, please wait..."/></div>
 </t>
 <t t-name="M2ODialog">
     <div>
@@ -1847,7 +1847,7 @@
 
 <t t-name="web.IframeWrapper">
     <div class="o_preview_iframe_wrapper">
-        <i class="o_iframe_wrapper_spinner fa fa-spinner fa-spin fa-4x" style="color: #875a7b; z-index: 2"/>
+        <i class="o_iframe_wrapper_spinner fa fa-circle-o-notch fa-spin fa-4x" style="color: #875a7b; z-index: 2"/>
         <!--suppress CheckTagEmptyBody -->
         <iframe src="about:blank" class="o_preview_iframe" style="display:none"></iframe>
     </div>
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 44b10c38fc9..0b06fad2c0c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2638,7 +2638,7 @@ var SnippetsMenu = Widget.extend({
                 },
             }, {
                 text: _t("Install in progress"),
-                icon: 'fa-spin fa-spinner fa-pulse mr8',
+                icon: 'fa-spin fa-circle-o-notch fa-spin mr8',
                 classes: 'btn-primary disabled o_hidden',
             }, {
                 text: _t("Cancel"),
diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js
index 3752c46aa78..2eb3c13cf90 100644
--- a/addons/website/static/src/js/backend/dashboard.js
+++ b/addons/website/static/src/js/backend/dashboard.js
@@ -685,7 +685,7 @@ var Dashboard = AbstractAction.extend({
 
     // Utility functions
     addLoader: function(selector) {
-        var loader = '<span class="fa fa-3x fa-spin fa-spinner fa-pulse"/>';
+        var loader = '<span class="fa fa-3x fa-spin fa-circle-o-notch fa-spin"/>';
         selector.html("<div class='o_loader'>" + loader + "</div>");
     },
     getValue: function(d) { return d[1]; },
diff --git a/addons/website/static/src/js/menu/new_content.js b/addons/website/static/src/js/menu/new_content.js
index c5d6814c2d5..67268f7245d 100644
--- a/addons/website/static/src/js/menu/new_content.js
+++ b/addons/website/static/src/js/menu/new_content.js
@@ -307,7 +307,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                             }
                             // change style to use spinner
                             $i.removeClass()
-                                .addClass('fa fa-spin fa-spinner fa-pulse')
+                                .addClass('fa fa-spin fa-circle-o-notch fa-spin')
                                 .css('background-image', 'none');
                             $p.removeClass('o_uninstalled_module')
                                 .text(_.str.sprintf(self.newContentText.installPleaseWait, name));
diff --git a/addons/website_event_meet/views/event_meet_templates_page.xml b/addons/website_event_meet/views/event_meet_templates_page.xml
index 38c5b14cbd7..43dd2be16c2 100644
--- a/addons/website_event_meet/views/event_meet_templates_page.xml
+++ b/addons/website_event_meet/views/event_meet_templates_page.xml
@@ -60,7 +60,7 @@
             <div t-else="" class="d-flex flex-column">
                 <div id="o_wemeet_jitsi_iframe">
                     <div class="o_wjitsi_chat_room_loading position-absolute w-100 text-center text-muted">
-                        <i class="fa fa-spin fa-spinner mr-3"/>
+                        <i class="fa fa-spin fa-circle-o-notch mr-3"/>
                         <span>Loading your room...</span>
                     </div>
                 </div>
diff --git a/addons/website_event_track_live/views/event_track_templates_page.xml b/addons/website_event_track_live/views/event_track_templates_page.xml
index 3ea643f783a..81eb1a2f171 100644
--- a/addons/website_event_track_live/views/event_track_templates_page.xml
+++ b/addons/website_event_track_live/views/event_track_templates_page.xml
@@ -24,7 +24,7 @@
             t-att-data-track-website-image-url="track.website_image_url"
             t-att-data-youtube-video-id="track.youtube_video_id">
             <div class="position-absolute o_wevent_event_track_live_loading w-100 d-flex align-items-center justify-content-center text-white h4">
-                <i class="fa fa-spin fa-spinner position-relative"/>
+                <i class="fa fa-spin fa-circle-o-notch position-relative"/>
                 <span class="pl-2">Loading Video...</span>
             </div>
             <div id="o_wevent_youtube_iframe_container" class="w-100"/>
diff --git a/addons/website_jitsi/static/src/xml/chat_room_modal.xml b/addons/website_jitsi/static/src/xml/chat_room_modal.xml
index d076a31739f..7ab8727c4dd 100644
--- a/addons/website_jitsi/static/src/xml/chat_room_modal.xml
+++ b/addons/website_jitsi/static/src/xml/chat_room_modal.xml
@@ -6,7 +6,7 @@
                 <div class="modal-content border-0">
                     <main class="modal-body p-0">
                         <div class="o_wjitsi_chat_room_loading position-absolute w-100 text-center text-muted">
-                            <i class="fa fa-spin fa-spinner mr-3"/>
+                            <i class="fa fa-spin fa-circle-o-notch mr-3"/>
                             <span>Loading your room...</span>
                         </div>
                     </main>
diff --git a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
index 636fe4f762f..a55eab44871 100644
--- a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
+++ b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
@@ -58,7 +58,8 @@ publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({
      * @param {jQuery} $carrierInput
      */
     _showLoading: function ($carrierInput) {
-        $carrierInput.siblings('.o_wsale_delivery_badge_price').html('<span class="fa fa-spinner fa-spin"/>');
+        $carrierInput.siblings('.o_wsale_delivery_badge_price').empty();
+        $carrierInput.siblings('.o_wsale_delivery_badge_price').append('<span class="fa fa-circle-o-notch fa-spin"/>');
     },
     /**
      * @private
diff --git a/addons/website_slides/static/src/xml/website_slides_upload.xml b/addons/website_slides/static/src/xml/website_slides_upload.xml
index c517b320cfb..99cf1fdef6e 100644
--- a/addons/website_slides/static/src/xml/website_slides_upload.xml
+++ b/addons/website_slides/static/src/xml/website_slides_upload.xml
@@ -41,7 +41,7 @@
     <t t-name="website.slide.upload.modal.uploading">
         <div class="text-center" role="status">
             <div class="fa-3x">
-                <i class="fa fa-spinner fa-pulse"></i>
+                <i class="fa fa-circle-o-notch fa-spin"></i>
             </div>
             <h4>Uploading document ...</h4>
         </div>