[FIX] mail: show spinner while emoji picker is loading

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

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

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);

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>

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>

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

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...");
+            },
+        }),
+    },
+});

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',