From 4ec6116fb520d82ecd6e11bf40ce39a7a0e6f5fc Mon Sep 17 00:00:00 2001
From: Nemael <mapa@odoo.com>
Date: Tue, 18 Oct 2022 11:59:22 +0000
Subject: [PATCH] [FIX] mail: show spinner while emoji picker is loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, when opening emoji picker for the 1st
time, content was blank for a small time.

This happens because data of emoji picker is lazy loaded
until opening of emoji picker the 1st time. The problem
is that it gives the impression that emoji picker is not
working, but it's actually loading.

This commit fixes the issue by showing a "loading..." screen
while the emoji picker is loading data.

Task-3015932

closes odoo/odoo#103957

X-original-commit: 22472cd4d2681c07371c8515bb964553b7c2b700
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/i18n/mail.pot                     |  1 +
 .../emoji_grid_loading_screen.js              | 21 +++++++++++++++++++
 .../emoji_grid_loading_screen.xml             | 10 +++++++++
 .../emoji_grid_search_no_content_view.xml     |  2 +-
 .../emoji_grid_view/emoji_grid_view.xml       |  1 +
 .../src/models/emoji_grid_loading_screen.js   | 19 +++++++++++++++++
 .../mail/static/src/models/emoji_grid_view.js |  9 ++++++++
 7 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.js
 create mode 100644 addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.xml
 create mode 100644 addons/mail/static/src/models/emoji_grid_loading_screen.js

diff --git a/addons/mail/i18n/mail.pot b/addons/mail/i18n/mail.pot
index 7db1f3343df..6b3ecd4cf7a 100644
--- a/addons/mail/i18n/mail.pot
+++ b/addons/mail/i18n/mail.pot
@@ -4206,6 +4206,7 @@ msgstr ""
 #: code:addons/mail/static/src/components/message_list/message_list.xml:0
 #: code:addons/mail/static/src/components/thread_view/thread_view.xml:0
 #: code:addons/mail/static/src/components/thread_view/thread_view.xml:0
+#: code:addons/mail/static/src/models/emoji_grid_loading_screen.js:0
 #: code:addons/mail/static/src/xml/web_kanban_activity.xml:0
 #: code:addons/mail/static/src/xml/web_kanban_activity.xml:0
 #, python-format
diff --git a/addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.js b/addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.js
new file mode 100644
index 00000000000..811c7168e7b
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class EmojiGridLoadingScreen extends Component {
+    /**
+     * @returns {EmojiGridLoadingScreen}
+     */
+    get EmojiGridLoadingScreen() {
+        return this.props.record;
+    }
+}
+
+Object.assign(EmojiGridLoadingScreen, {
+    props: { record: Object },
+    template: 'mail.EmojiGridLoadingScreen',
+});
+
+registerMessagingComponent(EmojiGridLoadingScreen);
diff --git a/addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.xml b/addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.xml
new file mode 100644
index 00000000000..9b2a1adf180
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_grid_loading_screen/emoji_grid_loading_screen.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.EmojiGridLoadingScreen" owl="1">
+        <div class="o_EmojiGridLoadingScreen d-flex flex-column justify-content-center align-items-center w-100 h-100" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_EmojiGridLoadingScreen_spinner fa fa-circle-o-notch fa-spin fs-1"/>
+            <span class="o_EmojiGridLoadingScreen_text text-muted mt-4" t-out="EmojiGridLoadingScreen.text"/>
+        </div>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml
index 1536c891aa0..f5fb6fb11ce 100644
--- a/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml
+++ b/addons/mail/static/src/components/emoji_grid_search_no_content_view/emoji_grid_search_no_content_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.EmojiGridSearchNoContentView" owl="1">
-        <div class="o_EmojiGridSearchNoContentView d-flex flex-column justify-content-center align-items-center w-100 h-100">
+        <div class="o_EmojiGridSearchNoContentView d-flex flex-column justify-content-center align-items-center w-100 h-100" t-attf-class="{{ className }}" t-ref="root">
             <div class="o_EmojiGridSearchNoContentView_image">😢</div>
             <span class="o_EmojiGridSearchNoContentView_text text-muted" t-out="emojiGridSearchNoContentView.text"/>
         </div>
diff --git a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
index fb7e63be43f..0021ef73dc5 100644
--- a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
+++ b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
@@ -3,6 +3,7 @@
 
     <t t-name="mail.EmojiGridView" owl="1">
     <div class="o_EmojiGridView o_EmojiGridView_container" t-attf-style="--rowHeight: {{emojiGridView.rowHeight}}px; --itemWidth: {{emojiGridView.itemWidth}}px; height: {{emojiGridView.height}}px; width: {{emojiGridView.width}}px;" t-on-scroll="emojiGridView.onScroll" t-ref="containerRef">
+        <EmojiGridLoadingScreen t-if="!this.messaging.emojiRegistry.isLoaded" record="emojiGridView.loadingScreenView"/>
         <EmojiGridSearchNoContentView t-if="emojiGridView.searchNoContentView" record="emojiGridView.searchNoContentView"/>
         <div t-if="!emojiGridView.searchNoContentView" class="o_EmojiGridView_list" t-attf-style="height: {{emojiGridView.listHeight}}px; min-height: {{emojiGridView.listHeight}}px;" t-ref="listRef">
             <div t-if="emojiGridView.lastRenderedRowIndex >= emojiGridView.firstRenderedRowIndex" class="o_EmojiGridView_viewBlock" t-attf-style="top: {{ emojiGridView.distanceFromTop - emojiGridView.distanceInRowOffset }}px; width: {{ emojiGridView.width }}px;" t-ref="viewBlockRef">
diff --git a/addons/mail/static/src/models/emoji_grid_loading_screen.js b/addons/mail/static/src/models/emoji_grid_loading_screen.js
new file mode 100644
index 00000000000..0b40d52c221
--- /dev/null
+++ b/addons/mail/static/src/models/emoji_grid_loading_screen.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { registerModel } from '@mail/model/model_core';
+import { attr, one } from '@mail/model/model_field';
+
+registerModel({
+    name: 'EmojiGridLoadingScreen',
+    fields: {
+        emojiGridViewOwner: one('EmojiGridView', {
+            identifying: true,
+            inverse: 'loadingScreenView',
+        }),
+        text: attr({
+            compute() {
+                return this.env._t("Loading...");
+            },
+        }),
+    },
+});
diff --git a/addons/mail/static/src/models/emoji_grid_view.js b/addons/mail/static/src/models/emoji_grid_view.js
index 3e9b209dc80..9632dec8a93 100644
--- a/addons/mail/static/src/models/emoji_grid_view.js
+++ b/addons/mail/static/src/models/emoji_grid_view.js
@@ -132,6 +132,15 @@ registerModel({
             default: 0,
         }),
         listRef: attr(),
+        loadingScreenView: one('EmojiGridLoadingScreen', {
+            compute() {
+                if (!this.messaging.emojiRegistry.isLoaded) {
+                    return {};
+                }
+                return clear();
+            },
+            inverse: 'emojiGridViewOwner',
+        }),
         nonSearchRowRegistry: one('EmojiGridViewRowRegistry', {
             default: {},
             inverse: 'emojiGridViewOwnerAsNonSearch',