[FIX] mail, *: significantly reduce number of useless renders

* = hr_holidays, im_livechat, website_livechat

A huge amount of components where rendered for no reason, notably when typing a
new message (at every key press), which significantly slowed down the interface.

There were 2 causes to this number of renders:
- OWL rendering all children automatically, even if their props didn't change,
  unless `shouldUpdate` is overridden, which is now done.
- `useStore` selectors being way too generous in what they observed

task-2399731

closes odoo/odoo#62703

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

1 files changed, 18 insertions, 10 deletions

diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js
index 7fc8a1f050a..342c4ef162a 100644
--- a/addons/mail/static/src/components/message/message.js
+++ b/addons/mail/static/src/components/message/message.js
@@ -10,6 +10,7 @@ const components = {
     NotificationPopover: require('mail/static/src/components/notification_popover/notification_popover.js'),
     PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
 };
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
 const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
 const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
 
@@ -43,6 +44,7 @@ class Message extends Component {
              */
             isClicked: false,
         });
+        useShouldUpdateBasedOnProps();
         useStore(props => {
             const message = this.env.models['mail.message'].get(props.messageLocalId);
             const author = message ? message.author : undefined;
@@ -50,28 +52,34 @@ class Message extends Component {
             const originThread = message ? message.originThread : undefined;
             const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId);
             const thread = threadView ? threadView.thread : undefined;
-            const threadStringifiedDomain = threadView
-                ? threadView.stringifiedDomain
-                : undefined;
             return {
                 attachments: message
                     ? message.attachments.map(attachment => attachment.__state)
-                    : undefined,
-                author: author ? author.__state : undefined,
+                    : [],
+                author,
+                authorAvatarUrl: author && author.avatarUrl,
+                authorImStatus: author && author.im_status,
+                authorNameOrDisplayName: author && author.nameOrDisplayName,
+                correspondent: thread && thread.correspondent,
                 hasMessageCheckbox: message ? message.hasCheckbox : false,
                 isDeviceMobile: this.env.messaging.device.isMobile,
                 isMessageChecked: message && threadView
-                    ? message.isChecked(thread, threadStringifiedDomain)
+                    ? message.isChecked(thread, threadView.stringifiedDomain)
                     : false,
                 message: message ? message.__state : undefined,
                 notifications: message ? message.notifications.map(notif => notif.__state) : [],
-                originThread: originThread ? originThread.__state : undefined,
-                partnerRoot: partnerRoot ? partnerRoot.__state : undefined,
-                thread: thread ? thread.__state : undefined,
-                threadView: threadView ? threadView.__state : undefined,
+                originThread,
+                originThreadModel: originThread && originThread.model,
+                originThreadName: originThread && originThread.name,
+                originThreadUrl: originThread && originThread.url,
+                partnerRoot,
+                thread,
+                threadHasSeenIndicators: thread && thread.hasSeenIndicators,
+                threadMassMailing: thread && thread.mass_mailing,
             };
         }, {
             compareDepth: {
+                attachments: 1,
                 notifications: 1,
             },
         });