[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, 17 insertions, 3 deletions

diff --git a/addons/mail/static/src/components/thread_view/thread_view.js b/addons/mail/static/src/components/thread_view/thread_view.js
index a6109aa4e1c..8a4898d6f3a 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.js
+++ b/addons/mail/static/src/components/thread_view/thread_view.js
@@ -5,6 +5,7 @@ const components = {
     Composer: require('mail/static/src/components/composer/composer.js'),
     MessageList: require('mail/static/src/components/message_list/message_list.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');
 
@@ -18,6 +19,7 @@ class ThreadView extends Component {
      */
     constructor(...args) {
         super(...args);
+        useShouldUpdateBasedOnProps();
         useStore((...args) => this._useStoreSelector(...args));
         useUpdate({ func: () => this._update() });
         /**
@@ -121,11 +123,18 @@ class ThreadView extends Component {
         const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId);
         const thread = threadView ? threadView.thread : undefined;
         const threadCache = threadView ? threadView.threadCache : undefined;
+        const correspondent = thread && thread.correspondent;
         return {
+            composer: thread && thread.composer,
+            correspondentId: correspondent && correspondent.id,
             isDeviceMobile: this.env.messaging.device.isMobile,
-            thread: thread ? thread.__state : undefined,
-            threadCache: threadCache ? threadCache.__state : undefined,
-            threadView: threadView ? threadView.__state : undefined,
+            thread,
+            threadCacheIsLoaded: threadCache && threadCache.isLoaded,
+            threadIsTemporary: thread && thread.isTemporary,
+            threadMassMailing: thread && thread.mass_mailing,
+            threadModel: thread && thread.model,
+            threadView,
+            threadViewIsLoading: threadView && threadView.isLoading,
         };
     }
 
@@ -140,6 +149,7 @@ Object.assign(ThreadView, {
         hasSquashCloseMessages: false,
         haveMessagesMarkAsReadIcon: false,
         haveMessagesReplyIcon: false,
+        isDoFocus: false,
         order: 'asc',
         showComposerAttachmentsExtensions: true,
         showComposerAttachmentsFilenames: true,
@@ -175,6 +185,10 @@ Object.assign(ThreadView, {
         hasSquashCloseMessages: Boolean,
         haveMessagesMarkAsReadIcon: Boolean,
         haveMessagesReplyIcon: Boolean,
+        /**
+         * Determines whether this should become focused.
+         */
+        isDoFocus: Boolean,
         order: {
             type: String,
             validate: prop => ['asc', 'desc'].includes(prop),