From 30087290e9c0894ccade73b059e6efdd732018cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Thu, 3 Nov 2022 21:52:21 +0000
Subject: [PATCH] [IMP] mail: introduce useMessagingContainer

This commit introduces component hook useMessagingContainer,
which allow to lazily use messaging component in template.

This allow simplifing some code in container, and more notably
in child messaging components, as they can now define their
template in models.

Task-3055886

Part-of: odoo/odoo#105099
---
 .../activity_cell_view/activity_cell_view.js  | 25 -------------
 .../activity_cell_view/activity_cell_view.xml |  6 ++--
 .../activity_cell_view_container.js           |  6 ++--
 .../activity_cell_view_container.xml          |  4 ++-
 .../kanban_field_activity_view.js             | 20 -----------
 .../kanban_field_activity_view.xml            |  2 +-
 .../kanban_field_activity_view_container.js   |  5 ++-
 .../kanban_field_activity_view_container.xml  |  4 ++-
 .../list_field_activity_view.js               | 20 -----------
 .../list_field_activity_view.xml              |  4 +--
 .../list_field_activity_view_container.js     |  5 ++-
 .../list_field_activity_view_container.xml    |  4 ++-
 .../use_messaging_container.js                | 21 +++++++++++
 .../call_systray_menu/call_systray_menu.js    | 23 ------------
 .../call_systray_menu/call_systray_menu.xml   |  2 +-
 .../call_systray_menu_container.js            |  9 ++---
 .../call_systray_menu_container.xml           |  4 ++-
 .../src/components/chat_window/chat_window.js | 32 -----------------
 .../components/chat_window/chat_window.xml    | 30 ++++++++--------
 .../chat_window_manager.js                    | 14 --------
 .../chat_window_manager.xml                   |  4 +--
 .../chat_window_manager_container.js          |  9 ++---
 .../chat_window_manager_container.xml         |  4 ++-
 .../static/src/components/chatter/chatter.js  | 33 -----------------
 .../static/src/components/chatter/chatter.xml | 28 +++++++--------
 .../chatter_container/chatter_container.js    |  8 ++---
 .../chatter_container/chatter_container.xml   |  4 ++-
 .../static/src/components/dialog/dialog.js    | 27 --------------
 .../static/src/components/dialog/dialog.xml   |  8 ++---
 .../dialog_manager/dialog_manager.js          | 28 ---------------
 .../dialog_manager/dialog_manager.xml         |  2 +-
 .../dialog_manager_container.js               | 11 ++----
 .../dialog_manager_container.xml              |  4 ++-
 .../static/src/components/discuss/discuss.js  | 26 --------------
 .../static/src/components/discuss/discuss.xml | 26 +++++++-------
 .../discuss_container/discuss_container.js    |  8 ++---
 .../discuss_container/discuss_container.xml   |  4 ++-
 .../discuss_public_view.js                    | 22 ------------
 .../discuss_public_view.xml                   |  8 ++---
 .../discuss_public_view_container.js          |  6 ++--
 .../discuss_public_view_container.xml         |  4 ++-
 .../messaging_menu/messaging_menu.js          | 36 -------------------
 .../messaging_menu/messaging_menu.xml         | 26 +++++++-------
 .../messaging_menu_container.js               |  9 ++---
 .../messaging_menu_container.xml              |  4 ++-
 .../popover_manager/popover_manager.js        | 19 ----------
 .../popover_manager/popover_manager.xml       |  2 +-
 .../popover_manager_container.js              |  9 ++---
 .../popover_manager_container.xml             |  4 ++-
 .../web_client_view_attachment_view.js        | 30 ----------------
 .../web_client_view_attachment_view.xml       | 16 ++++-----
 ...b_client_view_attachment_view_container.js |  8 ++---
 ..._client_view_attachment_view_container.xml |  2 +-
 addons/mail/static/src/model/model_core.js    |  6 ++--
 addons/mail/static/src/model/model_manager.js |  5 ++-
 .../static/src/models/activity_cell_view.js   |  3 +-
 .../mail/static/src/models/activity_view.js   |  6 +---
 .../static/src/models/call_systray_menu.js    |  1 +
 addons/mail/static/src/models/chat_window.js  |  5 +++
 .../static/src/models/chat_window_manager.js  |  1 +
 addons/mail/static/src/models/chatter.js      |  8 ++++-
 addons/mail/static/src/models/dialog.js       |  1 +
 .../mail/static/src/models/dialog_manager.js  |  5 +++
 .../static/src/models/discuss_public_view.js  |  1 +
 addons/mail/static/src/models/discuss_view.js |  1 +
 .../src/models/kanban_field_activity_view.js  |  1 +
 .../src/models/list_field_activity_view.js    |  1 +
 .../mail/static/src/models/messaging_menu.js  |  5 +++
 .../mail/static/src/models/popover_manager.js |  1 +
 .../models/web_client_view_attachment_view.js |  7 +++-
 .../static/src/utils/messaging_component.js   |  2 +-
 71 files changed, 210 insertions(+), 529 deletions(-)
 delete mode 100644 addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.js
 delete mode 100644 addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.js
 delete mode 100644 addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.js
 create mode 100644 addons/mail/static/src/component_hooks/use_messaging_container.js
 delete mode 100644 addons/mail/static/src/components/call_systray_menu/call_systray_menu.js
 delete mode 100644 addons/mail/static/src/components/chat_window/chat_window.js
 delete mode 100644 addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
 delete mode 100644 addons/mail/static/src/components/chatter/chatter.js
 delete mode 100644 addons/mail/static/src/components/dialog/dialog.js
 delete mode 100644 addons/mail/static/src/components/dialog_manager/dialog_manager.js
 delete mode 100644 addons/mail/static/src/components/discuss/discuss.js
 delete mode 100644 addons/mail/static/src/components/discuss_public_view/discuss_public_view.js
 delete mode 100644 addons/mail/static/src/components/messaging_menu/messaging_menu.js
 delete mode 100644 addons/mail/static/src/components/popover_manager/popover_manager.js
 delete mode 100644 addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.js

diff --git a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.js b/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.js
deleted file mode 100644
index 4166683f999..00000000000
--- a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/** @odoo-module **/
-
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class ActivityCellView extends Component {
-
-    setup() {
-        useRefToModel({ fieldName: 'contentRef', refName: 'content' });
-    }
-
-    get activityCellView() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(ActivityCellView, {
-    props: { record: Object },
-    template: 'mail.ActivityCellView',
-});
-
-registerMessagingComponent(ActivityCellView);
diff --git a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.xml b/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.xml
index c8b464b3feb..54d74361ca7 100644
--- a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.xml
+++ b/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view.xml
@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ActivityCellView" owl="1">
-        <div class="o_ActivityCellView h-100 cursor-pointer p-3" t-on-click="activityCellView.onClick" t-ref="root">
+        <div class="o_ActivityCellView h-100 cursor-pointer p-3" t-on-click="onClick" t-ref="root">
             <div class="o_ActivityCellView_content h-100 d-flex align-items-center justify-content-center position-relative" t-ref="content">
-                <div class="o_ActivityCellView_closestDeadline text-white" t-out="activityCellView.closestDeadlineFormatted"/>
-                <span t-if="activityCellView.filteredActivities.length > 1" class="o_ActivityCellView_activityCount badge bg-light rounded-pill border-0" t-out="activityCellView.filteredActivities.length"/>
+                <div class="o_ActivityCellView_closestDeadline text-white" t-out="closestDeadlineFormatted"/>
+                <span t-if="filteredActivities.length > 1" class="o_ActivityCellView_activityCount badge bg-light rounded-pill border-0" t-out="filteredActivities.length"/>
             </div>
         </div>
     </t>
diff --git a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.js b/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.js
index 48dba4b3167..e3d10c7cf86 100644
--- a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.js
+++ b/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.js
@@ -1,9 +1,7 @@
 /** @odoo-module **/
 
-// ensure components are registered beforehand.
-import '@mail/backend_components/activity_cell_view/activity_cell_view';
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 import { insert } from '@mail/model/model_field_command';
-import { getMessagingComponent } from '@mail/utils/messaging_component';
 
 import { Component, onWillDestroy, onWillUpdateProps } from '@odoo/owl';
 
@@ -25,6 +23,7 @@ export class ActivityCellViewContainer extends Component {
      * @override
      */
     setup() {
+        useMessagingContainer();
         super.setup();
         this.activityCellView = undefined;
         this.activityCellViewId = getNextId();
@@ -85,7 +84,6 @@ export class ActivityCellViewContainer extends Component {
 }
 
 Object.assign(ActivityCellViewContainer, {
-    components: { ActivityCellView: getMessagingComponent('ActivityCellView') },
     props: {
         activityIds: {
             type: Array,
diff --git a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.xml b/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.xml
index 783f3b7525d..dd1b290df3f 100644
--- a/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.xml
+++ b/addons/mail/static/src/backend_components/activity_cell_view/activity_cell_view_container.xml
@@ -2,7 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ActivityCellViewContainer" owl="1">
-        <ActivityCellView t-if="activityCellView" record="activityCellView"/>
+        <t t-if="isLoaded">
+            <ActivityCellView t-if="activityCellView" record="activityCellView"/>
+        </t>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.js b/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.js
deleted file mode 100644
index 301cfec9a17..00000000000
--- a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class KanbanFieldActivityView extends Component {
-
-    get kanbanFieldActivityView() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(KanbanFieldActivityView, {
-    props: { record: Object },
-    template: 'mail.KanbanFieldActivityView',
-});
-
-registerMessagingComponent(KanbanFieldActivityView);
diff --git a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.xml b/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.xml
index 7321e47f503..19268de9fcc 100644
--- a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.xml
+++ b/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.KanbanFieldActivityView" owl="1">
-        <ActivityButtonView record="kanbanFieldActivityView.activityButtonView"/>
+        <ActivityButtonView record="activityButtonView"/>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.js b/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.js
index 84923b00ae1..c88894382c0 100644
--- a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.js
+++ b/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.js
@@ -1,8 +1,7 @@
 /** @odoo-module **/
 
 // ensure components are registered beforehand.
-import '@mail/backend_components/kanban_field_activity_view/kanban_field_activity_view';
-import { getMessagingComponent } from '@mail/utils/messaging_component';
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { registry } from "@web/core/registry";
 import { standardFieldProps } from "@web/views/fields/standard_field_props";
@@ -28,6 +27,7 @@ export class KanbanFieldActivityViewContainer extends Component {
      */
     setup() {
         super.setup();
+        useMessagingContainer();
         this.kanbanFieldActivityView = undefined;
         this.kanbanFieldActivityViewId = getNextId();
         this._insertFromProps(this.props);
@@ -80,7 +80,6 @@ export class KanbanFieldActivityViewContainer extends Component {
 }
 
 Object.assign(KanbanFieldActivityViewContainer, {
-    components: { KanbanFieldActivityView: getMessagingComponent('KanbanFieldActivityView') },
     fieldDependencies: {
         activity_exception_decoration: { type: 'selection' },
         activity_exception_icon: { type: 'char' },
diff --git a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.xml b/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.xml
index f29585e6434..ca824c78937 100644
--- a/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.xml
+++ b/addons/mail/static/src/backend_components/kanban_field_activity_view/kanban_field_activity_view_container.xml
@@ -2,7 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.KanbanFieldActivityViewContainer" owl="1">
-        <KanbanFieldActivityView t-if="kanbanFieldActivityView" record="kanbanFieldActivityView"/>
+        <t t-if="isLoaded">
+            <KanbanFieldActivityView t-if="kanbanFieldActivityView" record="kanbanFieldActivityView"/>
+        </t>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.js b/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.js
deleted file mode 100644
index abf477dd1b4..00000000000
--- a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class ListFieldActivityView extends Component {
-
-    get listFieldActivityView() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(ListFieldActivityView, {
-    props: { record: Object },
-    template: 'mail.ListFieldActivityView',
-});
-
-registerMessagingComponent(ListFieldActivityView);
diff --git a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.xml b/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.xml
index 4e6cf99f748..9e319d4cd65 100644
--- a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.xml
+++ b/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view.xml
@@ -2,8 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ListFieldActivityView" owl="1">
-        <ActivityButtonView record="listFieldActivityView.activityButtonView"/>
-        <span class="o_ListFieldActivityView_summary" t-out="listFieldActivityView.summaryText"/>
+        <ActivityButtonView record="activityButtonView"/>
+        <span class="o_ListFieldActivityView_summary" t-out="summaryText"/>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.js b/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.js
index 7854d1a41e2..bb6c3200085 100644
--- a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.js
+++ b/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.js
@@ -1,8 +1,7 @@
 /** @odoo-module **/
 
 // ensure components are registered beforehand.
-import '@mail/backend_components/list_field_activity_view/list_field_activity_view';
-import { getMessagingComponent } from '@mail/utils/messaging_component';
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { registry } from "@web/core/registry";
 import { standardFieldProps } from "@web/views/fields/standard_field_props";
@@ -28,6 +27,7 @@ export class ListFieldActivityViewContainer extends Component {
      */
     setup() {
         super.setup();
+        useMessagingContainer();
         this.listFieldActivityView = undefined;
         this.listFieldActivityViewId = getNextId();
         this._insertFromProps(this.props);
@@ -80,7 +80,6 @@ export class ListFieldActivityViewContainer extends Component {
 }
 
 Object.assign(ListFieldActivityViewContainer, {
-    components: { ListFieldActivityView: getMessagingComponent('ListFieldActivityView') },
     fieldDependencies: {
         activity_exception_decoration: { type: 'selection' },
         activity_exception_icon: { type: 'char' },
diff --git a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.xml b/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.xml
index 8de371fb8b4..cf1cd4b465c 100644
--- a/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.xml
+++ b/addons/mail/static/src/backend_components/list_field_activity_view/list_field_activity_view_container.xml
@@ -2,7 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ListFieldActivityViewContainer" owl="1">
-        <ListFieldActivityView t-if="listFieldActivityView" record="listFieldActivityView"/>
+        <t t-if="isLoaded">
+            <ListFieldActivityView t-if="listFieldActivityView" record="listFieldActivityView"/>
+        </t>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/component_hooks/use_messaging_container.js b/addons/mail/static/src/component_hooks/use_messaging_container.js
new file mode 100644
index 00000000000..e89e0a6223b
--- /dev/null
+++ b/addons/mail/static/src/component_hooks/use_messaging_container.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { useModels } from '@mail/component_hooks/use_models';
+import { componentRegistry, getMessagingComponent } from "@mail/utils/messaging_component";
+
+import { useComponent } from '@odoo/owl';
+
+export function useMessagingContainer() {
+    const component = useComponent();
+    component.isLoaded = false;
+    useModels();
+    component.env.services.messaging.modelManager.messagingCreatedPromise.then(() => {
+        let components = { ...component.constructor.components };
+        for (const name in componentRegistry) {
+            Object.assign(components, { [name]: getMessagingComponent(name) });
+        }
+        component.constructor.components = components;
+        component.isLoaded = true;
+        component.render();
+    });
+}
diff --git a/addons/mail/static/src/components/call_systray_menu/call_systray_menu.js b/addons/mail/static/src/components/call_systray_menu/call_systray_menu.js
deleted file mode 100644
index 75b0b1e5b05..00000000000
--- a/addons/mail/static/src/components/call_systray_menu/call_systray_menu.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class CallSystrayMenu extends Component {
-
-    /**
-     * @returns {CallSystrayMenu}
-     */
-    get callSystrayMenu() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(CallSystrayMenu, {
-    props: { record: Object },
-    template: 'mail.CallSystrayMenu',
-});
-
-registerMessagingComponent(CallSystrayMenu);
diff --git a/addons/mail/static/src/components/call_systray_menu/call_systray_menu.xml b/addons/mail/static/src/components/call_systray_menu/call_systray_menu.xml
index 3e3b362b6f7..70acc889b02 100644
--- a/addons/mail/static/src/components/call_systray_menu/call_systray_menu.xml
+++ b/addons/mail/static/src/components/call_systray_menu/call_systray_menu.xml
@@ -5,7 +5,7 @@
         <div class="o_CallSystrayMenu dropdown" t-attf-class="{{ className }}" t-ref="root">
             <t t-if="messaging">
                 <CallInviteRequestPopupList/>
-                <button t-if="messaging.rtc.channel" class="o_CallSystrayMenu_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="callSystrayMenu.buttonTitle" role="button" t-on-click="messaging.rtc.onClickActivityNoticeButton">
+                <button t-if="messaging.rtc.channel" class="o_CallSystrayMenu_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="buttonTitle" role="button" t-on-click="messaging.rtc.onClickActivityNoticeButton">
                     <div class="o_CallSystrayMenu_buttonContent d-flex align-items-center">
                         <span class="position-relative me-2">
                             <i class="o_CallSystrayMenu_outputIndicator fa me-2" t-att-class="{
diff --git a/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.js b/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.js
index 02cd6ea6ba4..920c0d4af23 100644
--- a/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.js
+++ b/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.js
@@ -1,9 +1,6 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure components are registered beforehand.
-import '@mail/components/call_systray_menu/call_systray_menu';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component } from '@odoo/owl';
 
@@ -13,8 +10,7 @@ export class CallSystrayMenuContainer extends Component {
      * @override
      */
     setup() {
-        useModels();
-        super.setup();
+        useMessagingContainer();
     }
 
     get messaging() {
@@ -25,6 +21,5 @@ export class CallSystrayMenuContainer extends Component {
 CallSystrayMenuContainer.props = {};
 
 Object.assign(CallSystrayMenuContainer, {
-    components: { CallSystrayMenu: getMessagingComponent('CallSystrayMenu') },
     template: 'mail.CallSystrayMenuContainer',
 });
diff --git a/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.xml b/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.xml
index 878afc01d64..91551d296b4 100644
--- a/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.xml
+++ b/addons/mail/static/src/components/call_systray_menu_container/call_systray_menu_container.xml
@@ -3,7 +3,9 @@
 
     <t t-name="mail.CallSystrayMenuContainer" owl="1">
         <div class="CallSystrayMenuContainer">
-            <CallSystrayMenu t-if="messaging" record="messaging.rtc.callSystrayMenu"/>
+            <t t-if="isLoaded">
+                <CallSystrayMenu t-if="messaging" record="messaging.rtc.callSystrayMenu"/>
+            </t>
         </div>
     </t>
 </templates>
diff --git a/addons/mail/static/src/components/chat_window/chat_window.js b/addons/mail/static/src/components/chat_window/chat_window.js
deleted file mode 100644
index f003fc59d23..00000000000
--- a/addons/mail/static/src/components/chat_window/chat_window.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/** @odoo-module **/
-
-import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class ChatWindow extends Component {
-
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        useUpdateToModel({ methodName: 'onComponentUpdate' });
-    }
-
-    /**
-     * @returns {ChatWindow}
-     */
-    get chatWindow() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(ChatWindow, {
-    props: { record: Object },
-    template: 'mail.ChatWindow',
-});
-
-registerMessagingComponent(ChatWindow);
diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
index d8536e54276..c3aa96c60ec 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.xml
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -2,35 +2,35 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatWindow" owl="1">
-        <div class="o_ChatWindow position-absolute bottom-0 d-flex flex-column rounded-top-3 bg-view" t-attf-class="{{ className }}" tabindex="0" t-att-data-visible-index="chatWindow.visibleIndex"
+        <div class="o_ChatWindow position-absolute bottom-0 d-flex flex-column rounded-top-3 bg-view" t-attf-class="{{ className }}" tabindex="0" t-att-data-visible-index="visibleIndex"
             t-att-class="{
-                'o-focused': chatWindow.isFocused,
-                'o-folded': chatWindow.isFolded,
-                'o-fullscreen w-100 h-100': chatWindow.isFullscreen,
+                'o-focused': isFocused,
+                'o-folded': isFolded,
+                'o-fullscreen w-100 h-100': isFullscreen,
                 'o-isDeviceSmall position-fixed': messaging.device.isSmall,
                 'mw-100 mh-100': !messaging.device.isSmall,
-                'o-new-message': !chatWindow.thread,
-            }" t-att-style="chatWindow.componentStyle" t-on-keydown="chatWindow.onKeydown" t-on-focusout="chatWindow.onFocusout" t-att-data-chat-window-local-id="chatWindow.localId" t-att-data-thread-id="chatWindow.thread ? chatWindow.thread.id : ''" t-ref="root"
-            t-att-data-thread-model="chatWindow.thread ? chatWindow.thread.model : ''"
+                'o-new-message': !thread,
+            }" t-att-style="componentStyle" t-on-keydown="onKeydown" t-on-focusout="onFocusout" t-att-data-chat-window-local-id="localId" t-att-data-thread-id="thread ? thread.id : ''" t-ref="root"
+            t-att-data-thread-model="thread ? thread.model : ''"
         >
             <ChatWindowHeaderView
                 className="'o_ChatWindow_header flex-grow-0 flex-shrink-0'"
-                record="chatWindow.chatWindowHeaderView"
+                record="chatWindowHeaderView"
             />
-            <ChannelMemberListView t-if="chatWindow.channelMemberListView" record="chatWindow.channelMemberListView" className="'bg-view'"/>
-            <CallSettingsMenu t-if="chatWindow.callSettingsMenu" record="chatWindow.callSettingsMenu" className="'bg-view'"/>
-            <ChannelInvitationForm t-if="chatWindow.channelInvitationForm" className="'o_ChatWindow_channelInvitationForm'" record="chatWindow.channelInvitationForm"/>
-            <ThreadView t-if="chatWindow.threadView"
+            <ChannelMemberListView t-if="channelMemberListView" record="channelMemberListView" className="'bg-view'"/>
+            <CallSettingsMenu t-if="callSettingsMenu" record="callSettingsMenu" className="'bg-view'"/>
+            <ChannelInvitationForm t-if="channelInvitationForm" className="'o_ChatWindow_channelInvitationForm'" record="channelInvitationForm"/>
+            <ThreadView t-if="threadView"
                 className="'o_ChatWindow_thread flex-grow-1 flex-shrink-1'"
-                record="chatWindow.threadView"
+                record="threadView"
             />
-            <div t-if="chatWindow.newMessageAutocompleteInputView" class="o_ChatWindow_newMessageForm d-flex align-items-center m-3">
+            <div t-if="newMessageAutocompleteInputView" class="o_ChatWindow_newMessageForm d-flex align-items-center m-3">
                 <span class="o_ChatWindow_newMessageFormLabel flex-grow-0 flex-shrink-0 me-2">
                     To:
                 </span>
                 <AutocompleteInputView
                     className="'o_ChatWindow_newMessageFormInput flex-grow-1 flex-shrink-1 border'"
-                    record="chatWindow.newMessageAutocompleteInputView"
+                    record="newMessageAutocompleteInputView"
                 />
             </div>
         </div>
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
deleted file mode 100644
index 1a89e545e6f..00000000000
--- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class ChatWindowManager extends Component {}
-
-Object.assign(ChatWindowManager, {
-    props: { record: Object },
-    template: 'mail.ChatWindowManager',
-});
-
-registerMessagingComponent(ChatWindowManager);
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
index 8acacdd429a..b7118f4082f 100644
--- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
@@ -4,8 +4,8 @@
     <t t-name="mail.ChatWindowManager" owl="1">
         <div class="o_ChatWindowManager flex-row-reverse d-flex" t-attf-class="{{ className }}" t-ref="root">
             <!-- Note: DOM elements are ordered from left to right -->
-            <ChatWindowHiddenMenuView t-if="messaging.chatWindowManager.hiddenMenuView" className="'o_ChatWindowManager_hiddenMenu'" record="messaging.chatWindowManager.hiddenMenuView"/>
-            <ChatWindow t-foreach="messaging.chatWindowManager.allOrderedVisible" t-as="chatWindow" t-key="chatWindow.localId" record="chatWindow"/>
+            <ChatWindowHiddenMenuView t-if="hiddenMenuView" className="'o_ChatWindowManager_hiddenMenu'" record="hiddenMenuView"/>
+            <ChatWindow t-foreach="allOrderedVisible" t-as="chatWindow" t-key="chatWindow.localId" record="chatWindow"/>
         </div>
     </t>
 
diff --git a/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js
index c0c12103bb6..c27e5dce8f8 100644
--- a/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js
+++ b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.js
@@ -1,9 +1,6 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure components are registered beforehand.
-import '@mail/components/chat_window_manager/chat_window_manager';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component } from '@odoo/owl';
 
@@ -13,8 +10,7 @@ export class ChatWindowManagerContainer extends Component {
      * @override
      */
     setup() {
-        useModels();
-        super.setup();
+        useMessagingContainer();
     }
 
     get messaging() {
@@ -24,6 +20,5 @@ export class ChatWindowManagerContainer extends Component {
 ChatWindowManagerContainer.props = {};
 
 Object.assign(ChatWindowManagerContainer, {
-    components: { ChatWindowManager: getMessagingComponent('ChatWindowManager') },
     template: 'mail.ChatWindowManagerContainer',
 });
diff --git a/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml
index 390f2ccf5b7..8d5e134f77d 100644
--- a/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml
+++ b/addons/mail/static/src/components/chat_window_manager_container/chat_window_manager_container.xml
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.ChatWindowManagerContainer" owl="1">
-        <ChatWindowManager t-if="messaging and messaging.chatWindowManager" record="messaging.chatWindowManager"/>
+        <t t-if="isLoaded">
+            <ChatWindowManager t-if="messaging and messaging.chatWindowManager" record="messaging.chatWindowManager"/>
+        </t>
     </t>
 </templates>
diff --git a/addons/mail/static/src/components/chatter/chatter.js b/addons/mail/static/src/components/chatter/chatter.js
deleted file mode 100644
index c2bf0669c81..00000000000
--- a/addons/mail/static/src/components/chatter/chatter.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/** @odoo-module **/
-
-import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-import { LegacyComponent } from '@web/legacy/legacy_component';
-
-export class Chatter extends LegacyComponent {
-
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        useComponentToModel({ fieldName: 'component' });
-        useRefToModel({ fieldName: 'scrollPanelRef', refName: 'scrollPanel' });
-    }
-
-    /**
-     * @returns {Chatter}
-     */
-    get chatter() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(Chatter, {
-    props: { record: Object },
-    template: 'mail.Chatter',
-});
-
-registerMessagingComponent(Chatter);
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index e49d23a4ab6..9f1799819b9 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -3,34 +3,34 @@
 
     <t t-name="mail.Chatter" owl="1">
         <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-view" t-attf-class="{{ className }}" t-ref="root">
-            <DropZoneView t-if="chatter.dropZoneView"
+            <DropZoneView t-if="dropZoneView"
                 className="'o_Chatter_dropZone'"
-                record="chatter.dropZoneView"
+                record="dropZoneView"
             />
             <div class="o_Chatter_fixedPanel">
                 <ChatterTopbar
-                    t-if="chatter.topbar"
+                    t-if="topbar"
                     className="'o_Chatter_topbar'"
-                    record="chatter.topbar"
+                    record="topbar"
                 />
-                <ComposerView t-if="chatter.composerView"
+                <ComposerView t-if="composerView"
                     className="'o_Chatter_composer border-bottom'"
-                    classNameObj="{ 'o-bordered': chatter.hasExternalBorder }"
-                    record="chatter.composerView"
+                    classNameObj="{ 'o-bordered': hasExternalBorder }"
+                    record="composerView"
                 />
             </div>
-            <div class="o_Chatter_scrollPanel overflow-auto" t-on-scroll="chatter.onScrollScrollPanel" t-ref="scrollPanel">
-                <AttachmentBoxView t-if="chatter.attachmentBoxView"
+            <div class="o_Chatter_scrollPanel overflow-auto" t-on-scroll="onScrollScrollPanel" t-ref="scrollPanel">
+                <AttachmentBoxView t-if="attachmentBoxView"
                     className="'o_Chatter_attachmentBox'"
-                    record="chatter.attachmentBoxView"
+                    record="attachmentBoxView"
                 />
-                <ActivityBoxView t-if="chatter.activityBoxView"
+                <ActivityBoxView t-if="activityBoxView"
                     className="'o_Chatter_activityBox'"
-                    record="chatter.activityBoxView"
+                    record="activityBoxView"
                 />
-                <ThreadView t-if="chatter.threadView"
+                <ThreadView t-if="threadView"
                     className="'o_Chatter_thread'"
-                    record="chatter.threadView"
+                    record="threadView"
                 />
             </div>
         </div>
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.js b/addons/mail/static/src/components/chatter_container/chatter_container.js
index 48a1d2efb0d..7adff24cfac 100644
--- a/addons/mail/static/src/components/chatter_container/chatter_container.js
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.js
@@ -1,10 +1,7 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure components are registered beforehand.
-import '@mail/components/chatter/chatter';
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 import { clear } from '@mail/model/model_field_command';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
 
 import { Component, onWillDestroy, onWillUpdateProps } from '@odoo/owl';
 
@@ -30,7 +27,7 @@ export class ChatterContainer extends Component {
      * @override
      */
     setup() {
-        useModels();
+        useMessagingContainer();
         super.setup();
         this.localChatter = undefined;
         this._insertFromProps(this.props);
@@ -105,7 +102,6 @@ export class ChatterContainer extends Component {
 }
 
 Object.assign(ChatterContainer, {
-    components: { Chatter: getMessagingComponent('Chatter') },
     props: {
         chatter: {
             type: Object,
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 3015e8d49f7..ac333a37ff0 100644
--- a/addons/mail/static/src/components/chatter_container/chatter_container.xml
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.xml
@@ -3,7 +3,9 @@
 
     <t t-name="mail.ChatterContainer" owl="1">
         <div class="o_ChatterContainer flex-grow-1 d-flex" t-att-class="{ 'o-isInFormSheetBg mx-auto': props.isInFormSheetBg }" t-attf-class="{{ props.className }}" data-command-category="mail" t-ref="root">
-            <Chatter t-if="chatter and chatter.thread" record="chatter"/>
+            <t t-if="isLoaded and chatter and chatter.thread">
+                <Chatter record="chatter"/>
+            </t>
             <div t-else="" class="o_ChatterContainer_noChatter flex-grow-1 align-items-center justify-content-center d-flex"><i class="o_ChatterContainer_noChatterIcon fa fa-circle-o-notch fa-spin me-2"/>Please wait...</div>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/dialog/dialog.js b/addons/mail/static/src/components/dialog/dialog.js
deleted file mode 100644
index 7f2ba7a5070..00000000000
--- a/addons/mail/static/src/components/dialog/dialog.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class Dialog extends Component {
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @returns {Dialog}
-     */
-    get dialog() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(Dialog, {
-    props: { record: Object },
-    template: 'mail.Dialog',
-});
-
-registerMessagingComponent(Dialog);
diff --git a/addons/mail/static/src/components/dialog/dialog.xml b/addons/mail/static/src/components/dialog/dialog.xml
index b0beb51da71..d3e844a377c 100644
--- a/addons/mail/static/src/components/dialog/dialog.xml
+++ b/addons/mail/static/src/components/dialog/dialog.xml
@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.Dialog" owl="1">
-        <div class="o_Dialog modal fixed-top bottom-0 d-flex justify-content-center" t-attf-class="{{ className }}" t-att-style="dialog.style" t-ref="root">
+        <div class="o_Dialog modal fixed-top bottom-0 d-flex justify-content-center" t-attf-class="{{ className }}" t-att-style="style" t-ref="root">
             <t
-                t-component="constructor.components[dialog.componentName]"
+                t-component="constructor.components[componentName]"
                 t-props="{
-                    className: `o_Dialog_component ${dialog.componentClassName}`,
-                    record: dialog.record,
+                    className: `o_Dialog_component ${componentClassName}`,
+                    record: record,
                 }"
             />
         </div>
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.js b/addons/mail/static/src/components/dialog_manager/dialog_manager.js
deleted file mode 100644
index 954f3fe5211..00000000000
--- a/addons/mail/static/src/components/dialog_manager/dialog_manager.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @odoo-module **/
-
-import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class DialogManager extends Component {
-
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        useUpdateToModel({ methodName: 'onComponentUpdate' });
-    }
-
-    get dialogManager() {
-        return this.props.record;
-    }
-}
-
-Object.assign(DialogManager, {
-    props: { record: Object },
-    template: 'mail.DialogManager',
-});
-
-registerMessagingComponent(DialogManager);
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
index 93958f28f1f..92c54de21d5 100644
--- a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.DialogManager" owl="1">
         <div class="o_DialogManager" t-attf-class="{{ className }}" t-ref="root">
-            <Dialog t-foreach="dialogManager.dialogs" t-as="dialog" t-key="dialog.localId"
+            <Dialog t-foreach="dialogs" t-as="dialog" t-key="dialog.localId"
                 className="'o_DialogManager_dialog'"
                 record="dialog"
             />
diff --git a/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js
index c487153d29b..7f2206859e4 100644
--- a/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js
+++ b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.js
@@ -1,9 +1,6 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure components are registered beforehand.
-import '@mail/components/dialog_manager/dialog_manager';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component } from '@odoo/owl';
 
@@ -12,9 +9,8 @@ export class DialogManagerContainer extends Component {
     /**
      * @override
      */
-    setup() {
-        useModels();
-        super.setup();
+     setup() {
+        useMessagingContainer();
     }
 
     get messaging() {
@@ -24,6 +20,5 @@ export class DialogManagerContainer extends Component {
 DialogManagerContainer.props = {};
 
 Object.assign(DialogManagerContainer, {
-    components: { DialogManager: getMessagingComponent('DialogManager') },
     template: 'mail.DialogManagerContainer',
 });
diff --git a/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml
index 47e27238e44..68fd017cb2a 100644
--- a/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml
+++ b/addons/mail/static/src/components/dialog_manager_container/dialog_manager_container.xml
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.DialogManagerContainer" owl="1">
-        <DialogManager t-if="messaging and messaging.dialogManager" record="messaging.dialogManager"/>
+        <t t-if="isLoaded">
+            <DialogManager t-if="messaging and messaging.dialogManager" record="messaging.dialogManager"/>
+        </t>
     </t>
 </templates>
diff --git a/addons/mail/static/src/components/discuss/discuss.js b/addons/mail/static/src/components/discuss/discuss.js
deleted file mode 100644
index 4dc0d27377f..00000000000
--- a/addons/mail/static/src/components/discuss/discuss.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class DiscussView extends Component {
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @returns {DiscussView}
-     */
-    get discussView() {
-        return this.props.record;
-    }
-}
-
-Object.assign(DiscussView, {
-    props: { record: Object },
-    template: 'mail.DiscussView',
-});
-
-registerMessagingComponent(DiscussView);
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
index 66afe5caf3f..4d9ccc1fa31 100644
--- a/addons/mail/static/src/components/discuss/discuss.xml
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -6,7 +6,7 @@
             t-att-class="{ 'o-isDeviceSmall flex-column align-items-center bg-view': messaging.device.isSmall }"
             t-ref="root"
         >
-            <DiscussSidebarView t-if="discussView.sidebar" className="'o_DiscussView_sidebar flex-shrink-0 h-100 pt-3 border-end bg-light'" record="discussView.sidebar"/>
+            <DiscussSidebarView t-if="sidebar" className="'o_DiscussView_sidebar flex-shrink-0 h-100 pt-3 border-end bg-light'" record="sidebar"/>
             <t t-if="messaging.device.isSmall" t-call="mail.DiscussView.content"/>
             <div t-else="" class="o_DiscussView_content d-flex flex-column flex-grow-1 h-100 overflow-auto">
                 <t t-call="mail.DiscussView.content"/>
@@ -15,36 +15,36 @@
     </t>
 
     <t t-name="mail.DiscussView.content" owl="1">
-        <DiscussMobileMailboxSelectionView t-if="discussView.mobileMailboxSelectionView" className="'o_DiscussView_mobileMailboxSelection w-100 border-bottom'" record="discussView.mobileMailboxSelectionView"/>
-        <div t-if="discussView.mobileAddItemHeaderAutocompleteInputView" class="o_DiscussView_mobileAddItemHeader d-flex justify-content-center w-100 p-3 border-bottom bg-light">
+        <DiscussMobileMailboxSelectionView t-if="mobileMailboxSelectionView" className="'o_DiscussView_mobileMailboxSelection w-100 border-bottom'" record="mobileMailboxSelectionView"/>
+        <div t-if="mobileAddItemHeaderAutocompleteInputView" class="o_DiscussView_mobileAddItemHeader d-flex justify-content-center w-100 p-3 border-bottom bg-light">
             <AutocompleteInputView
                 className="'o_DiscussView_mobileAddItemHeaderInput flex-grow-1 mb-3 p-2 rounded border'"
-                record="discussView.mobileAddItemHeaderAutocompleteInputView"
+                record="mobileAddItemHeaderAutocompleteInputView"
             />
         </div>
-        <t t-if="discussView.discuss.threadView">
+        <t t-if="discuss.threadView">
             <t name="beforeThread"/>
             <ThreadView
                 className="'o_DiscussView_thread'"
                 classNameObj="{ 'o-isDeviceSmall w-100': messaging.device.isSmall }"
-                record="discussView.discuss.threadView"
+                record="discuss.threadView"
             />
         </t>
-        <div t-if="!discussView.discuss.activeThread and (!messaging.device.isSmall or discussView.discuss.activeMobileNavbarTabId === 'mailbox')" class="o_DiscussView_noThread d-flex flex-grow-1 align-items-center justify-content-center w-100 bg-view">
+        <div t-if="!discuss.activeThread and (!messaging.device.isSmall or discuss.activeMobileNavbarTabId === 'mailbox')" class="o_DiscussView_noThread d-flex flex-grow-1 align-items-center justify-content-center w-100 bg-view">
             <h4 class="text-muted"><b><i>No conversation selected.</i></b></h4>
         </div>
-        <t t-if="messaging.device.isSmall and discussView.discuss.activeMobileNavbarTabId !== 'mailbox'">
-            <button t-if="discussView.discuss.activeMobileNavbarTabId === 'chat'" class="o_DiscussView_mobileNewChatButton w-100 p-2 btn btn-secondary border-bottom bg-light" t-on-click="discussView.onClickMobileNewChatButton">
+        <t t-if="messaging.device.isSmall and discuss.activeMobileNavbarTabId !== 'mailbox'">
+            <button t-if="discuss.activeMobileNavbarTabId === 'chat'" class="o_DiscussView_mobileNewChatButton w-100 p-2 btn btn-secondary border-bottom bg-light" t-on-click="onClickMobileNewChatButton">
                 Start a conversation
             </button>
-            <button t-if="discussView.discuss.activeMobileNavbarTabId === 'channel'" class="o_DiscussView_mobileNewChannelButton w-100 p-2 btn btn-secondary border-bottom bg-light" t-on-click="discussView.onClickMobileNewChannelButton">
+            <button t-if="discuss.activeMobileNavbarTabId === 'channel'" class="o_DiscussView_mobileNewChannelButton w-100 p-2 btn btn-secondary border-bottom bg-light" t-on-click="onClickMobileNewChannelButton">
                 New Channel
             </button>
         </t>
-        <NotificationListView t-if="discussView.discuss.notificationListView" className="'o_DiscussView_notificationList flex-grow-1 w-100'" record="discussView.discuss.notificationListView"/>
-        <MobileMessagingNavbarView t-if="discussView.discuss.mobileMessagingNavbarView"
+        <NotificationListView t-if="discuss.notificationListView" className="'o_DiscussView_notificationList flex-grow-1 w-100'" record="discuss.notificationListView"/>
+        <MobileMessagingNavbarView t-if="discuss.mobileMessagingNavbarView"
             className="'o_DiscussView_mobileNavbar w-100'"
-            record="discussView.discuss.mobileMessagingNavbarView"
+            record="discuss.mobileMessagingNavbarView"
         />
     </t>
 
diff --git a/addons/mail/static/src/components/discuss_container/discuss_container.js b/addons/mail/static/src/components/discuss_container/discuss_container.js
index 1ee8822c69a..39218b6d8d1 100644
--- a/addons/mail/static/src/components/discuss_container/discuss_container.js
+++ b/addons/mail/static/src/components/discuss_container/discuss_container.js
@@ -1,9 +1,6 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure component is registered before-hand
-import '@mail/components/discuss/discuss';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component, onWillDestroy } from '@odoo/owl';
 
@@ -13,7 +10,7 @@ export class DiscussContainer extends Component {
      * @override
      */
     setup() {
-        useModels();
+        useMessagingContainer();
         super.setup();
         onWillDestroy(() => this._willDestroy());
         this.env.services.messaging.modelManager.messagingCreatedPromise.then(async () => {
@@ -71,6 +68,5 @@ Object.assign(DiscussContainer, {
         className: String,
         globalState: { type: Object, optional: 1 },
     },
-    components: { DiscussView: getMessagingComponent('DiscussView') },
     template: 'mail.DiscussContainer',
 });
diff --git a/addons/mail/static/src/components/discuss_container/discuss_container.xml b/addons/mail/static/src/components/discuss_container/discuss_container.xml
index 17ef87cf1b5..2213bd44435 100644
--- a/addons/mail/static/src/components/discuss_container/discuss_container.xml
+++ b/addons/mail/static/src/components/discuss_container/discuss_container.xml
@@ -3,7 +3,9 @@
 
     <t t-name="mail.DiscussContainer" owl="1">
         <div class="o_DiscussContainer h-100 d-flex flex-column">
-            <DiscussView t-if="messaging and messaging.discuss and messaging.discuss.discussView and messaging.isInitialized" className="'flex-grow-1'" record="messaging.discuss.discussView"/>
+            <t t-if="isLoaded and messaging and messaging.discuss and messaging.discuss.discussView and messaging.isInitialized">
+                <DiscussView className="'flex-grow-1'" record="messaging.discuss.discussView"/>
+            </t>
             <div t-else="" class="o_DiscussContainer_spinner d-flex flex-grow-1 align-items-center justify-content-center">
                 <i class="o_DiscussContainer_spinnerIcon fa fa-circle-o-notch fa-spin me-2"/>Please wait...
             </div>
diff --git a/addons/mail/static/src/components/discuss_public_view/discuss_public_view.js b/addons/mail/static/src/components/discuss_public_view/discuss_public_view.js
deleted file mode 100644
index 2fee5d3970a..00000000000
--- a/addons/mail/static/src/components/discuss_public_view/discuss_public_view.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-class DiscussPublicView extends Component {
-
-    /**
-     * @returns {DiscussPublicView}
-     */
-     get discussPublicView() {
-        return this.props.record;
-    }
-}
-
-Object.assign(DiscussPublicView, {
-    props: { record: Object },
-    template: 'mail.DiscussPublicView',
-});
-
-registerMessagingComponent(DiscussPublicView);
diff --git a/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml b/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml
index 74d6cace016..704d6bcc01a 100644
--- a/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml
+++ b/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml
@@ -2,11 +2,11 @@
 <templates xml:space="preserve">
     <t t-name="mail.DiscussPublicView" owl="1">
         <div class="o_DiscussPublicView d-flex flex-column h-100 w-100 position-absolute" t-attf-class="{{ className }}" t-ref="root">
-            <ThreadView t-if="discussPublicView.threadView"
-                record="discussPublicView.threadView"
+            <ThreadView t-if="threadView"
+                record="threadView"
             />
-            <WelcomeView t-if="discussPublicView.welcomeView"
-                record="discussPublicView.welcomeView"
+            <WelcomeView t-if="welcomeView"
+                record="welcomeView"
             />
         </div>
     </t>
diff --git a/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js
index c4465a5364c..d7382c7a15c 100644
--- a/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js
+++ b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.js
@@ -1,8 +1,6 @@
 /** @odoo-module **/
 
-// ensure components are registered beforehand.
-import '@mail/components/discuss_public_view/discuss_public_view';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component } from '@odoo/owl';
 
@@ -13,6 +11,7 @@ export class DiscussPublicViewContainer extends Component {
      */
     setup() {
         super.setup();
+        useMessagingContainer();
         this.env.services.messaging.get().then(messaging => {
             messaging.models['Thread'].insert(messaging.models['Thread'].convertData(this.props.data.channelData));
             this.discussPublicView = messaging.models['DiscussPublicView'].insert(this.props.data.discussPublicViewData);
@@ -28,7 +27,6 @@ export class DiscussPublicViewContainer extends Component {
 }
 
 Object.assign(DiscussPublicViewContainer, {
-    components: { DiscussPublicView: getMessagingComponent('DiscussPublicView') },
     template: 'mail.DiscussPublicViewContainer',
     props: {
         data: Object,
diff --git a/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml
index 03099cdd2e7..7cd175a8610 100644
--- a/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml
+++ b/addons/mail/static/src/components/discuss_public_view_container/discuss_public_view_container.xml
@@ -2,7 +2,9 @@
 <templates xml:space="preserve">
     <t t-name="mail.DiscussPublicViewContainer" owl="1">
         <div class="o_DiscussPublicViewContainer position-absolute h-100 w-100">
-            <DiscussPublicView t-if="discussPublicView" record="discussPublicView"/>
+            <t t-if="isLoaded and discussPublicView">
+                <DiscussPublicView record="discussPublicView"/>
+            </t>
             <div t-else="" class="h-100 d-flex justify-content-center align-items-center">
                 <i class="o_DiscussPublicViewContainer_spinner fa fa-circle-o-notch fa-spin mx-2" title="Please wait..."/>
             </div>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.js b/addons/mail/static/src/components/messaging_menu/messaging_menu.js
deleted file mode 100644
index fcb649a4312..00000000000
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/** @odoo-module **/
-
-import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class MessagingMenu extends Component {
-
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        useComponentToModel({ fieldName: 'component' });
-    }
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @returns {MessagingMenu}
-     */
-    get messagingMenu() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(MessagingMenu, {
-    props: { record: Object },
-    template: 'mail.MessagingMenu',
-});
-
-registerMessagingComponent(MessagingMenu);
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 6db945eee19..d251ea255ff 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -2,31 +2,31 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessagingMenu" owl="1">
-        <div class="o_MessagingMenu dropdown" t-att-class="{ 'show bg-black-15': messagingMenu.isOpen, 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-ref="root">
-            <a class="o_MessagingMenu_toggler dropdown-toggle o-no-caret o-dropdown--narrow" t-att-class="{ 'o-no-notification': !messagingMenu.counter }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="messagingMenu.onClickToggler">
+        <div class="o_MessagingMenu dropdown" t-att-class="{ 'show bg-black-15': isOpen, 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-ref="root">
+            <a class="o_MessagingMenu_toggler dropdown-toggle o-no-caret o-dropdown--narrow" t-att-class="{ 'o-no-notification': !counter }" href="#" title="Conversations" role="button" t-att-aria-expanded="isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="onClickToggler">
                 <i class="o_MessagingMenu_icon fa fa-lg fa-comments" role="img" aria-label="Messages"/>
                 <i t-if="!messaging.isInitialized" class="o_MessagingMenu_loading fa fa-circle-o-notch fa-spin position-absolute bottom-50 end-0 small"/>
-                <span t-elif="messagingMenu.counter > 0" class="o_MessagingMenu_counter badge" t-esc="messagingMenu.counter"/>
+                <span t-elif="counter > 0" class="o_MessagingMenu_counter badge" t-esc="counter"/>
             </a>
-            <div t-if="messagingMenu.isOpen" class="o_MessagingMenu_dropdownMenu o-dropdown-menu dropdown-menu-end d-flex flex-column mt-0 py-0 bg-view overflow-auto" t-att-class="{ 'o-isDeviceSmall position-fixed bottom-0 start-0 end-0 flex-grow-1 w-100 m-0 border-0': messaging.device.isSmall, 'border': !messaging.device.isSmall, 'o-messaging-not-initialized align-items-center justify-content-center': !messaging.isInitialized }" role="menu">
+            <div t-if="isOpen" class="o_MessagingMenu_dropdownMenu o-dropdown-menu dropdown-menu-end d-flex flex-column mt-0 py-0 bg-view overflow-auto" t-att-class="{ 'o-isDeviceSmall position-fixed bottom-0 start-0 end-0 flex-grow-1 w-100 m-0 border-0': messaging.device.isSmall, 'border': !messaging.device.isSmall, 'o-messaging-not-initialized align-items-center justify-content-center': !messaging.isInitialized }" role="menu">
                 <span t-if="!messaging.isInitialized"><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-circle-o-notch fa-spin me-1"/>Please wait...</span>
                 <t t-else="">
                     <div class="o_MessagingMenu_dropdownMenuHeader border-bottom" t-attf-class="{{ messaging.device.isSmall ? 'o-isDeviceSmall p-2' : 'd-flex flex-shrink-0' }}">
-                        <MessagingMenuTabView t-if="messagingMenu.allTab" record="messagingMenu.allTab"/>
-                        <MessagingMenuTabView t-if="messagingMenu.chatTab" record="messagingMenu.chatTab"/>
-                        <MessagingMenuTabView t-if="messagingMenu.channelTab" record="messagingMenu.channelTab"/>
+                        <MessagingMenuTabView t-if="allTab" record="allTab"/>
+                        <MessagingMenuTabView t-if="chatTab" record="chatTab"/>
+                        <MessagingMenuTabView t-if="channelTab" record="channelTab"/>
                         <t t-if="messaging.device.isSmall" t-call="mail.MessagingMenu.newMessageButton"/>
                         <div class="flex-grow-1"/>
                         <t t-if="!messaging.device.isSmall and !messaging.discuss.discussView" t-call="mail.MessagingMenu.newMessageButton"/>
-                        <AutocompleteInputView t-if="messagingMenu.mobileNewMessageAutocompleteInputView"
+                        <AutocompleteInputView t-if="mobileNewMessageAutocompleteInputView"
                             className="'o_MessagingMenu_mobileNewMessageInput mt-2 p-2 rounded-3'"
-                            record="messagingMenu.mobileNewMessageAutocompleteInputView"
+                            record="mobileNewMessageAutocompleteInputView"
                         />
                     </div>
-                    <NotificationListView t-if="messagingMenu.notificationListView" className="'o_MessagingMenu_notificationList'" classNameObj="{ 'o-isDeviceSmall flex-grow-1 overflow-auto': messaging.device.isSmall }" record="messagingMenu.notificationListView"/>
-                    <MobileMessagingNavbarView t-if="messagingMenu.mobileMessagingNavbarView"
+                    <NotificationListView t-if="notificationListView" className="'o_MessagingMenu_notificationList'" classNameObj="{ 'o-isDeviceSmall flex-grow-1 overflow-auto': messaging.device.isSmall }" record="notificationListView"/>
+                    <MobileMessagingNavbarView t-if="mobileMessagingNavbarView"
                         className="'o_MessagingMenu_mobileNavbar'"
-                        record="messagingMenu.mobileMessagingNavbarView"
+                        record="mobileMessagingNavbarView"
                     />
                 </t>
             </div>
@@ -39,7 +39,7 @@
                 'btn-link': !messaging.device.isSmall,
                 'btn-secondary': messaging.device.isSmall,
                 'o-isDeviceSmall': messaging.device.isSmall,
-            }" t-on-click="messagingMenu.onClickNewMessage" type="button"
+            }" t-on-click="onClickNewMessage" type="button"
         >
             New message
         </button>
diff --git a/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.js b/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.js
index 84437ff9701..afeaab92037 100644
--- a/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.js
+++ b/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.js
@@ -1,9 +1,6 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure components are registered beforehand.
-import '@mail/components/messaging_menu/messaging_menu';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component } from '@odoo/owl';
 
@@ -13,8 +10,7 @@ export class MessagingMenuContainer extends Component {
      * @override
      */
     setup() {
-        useModels();
-        super.setup();
+        useMessagingContainer();
     }
 
     get messaging() {
@@ -24,6 +20,5 @@ export class MessagingMenuContainer extends Component {
 MessagingMenuContainer.props = {};
 
 Object.assign(MessagingMenuContainer, {
-    components: { MessagingMenu: getMessagingComponent('MessagingMenu') },
     template: 'mail.MessagingMenuContainer',
 });
diff --git a/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.xml b/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.xml
index 0bd3f37ca56..8e0b0242631 100644
--- a/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.xml
+++ b/addons/mail/static/src/components/messaging_menu_container/messaging_menu_container.xml
@@ -3,7 +3,9 @@
 
     <t t-name="mail.MessagingMenuContainer" owl="1">
         <div class="MessagingMenuContainer">
-            <MessagingMenu t-if="messaging and messaging.messagingMenu" record="messaging.messagingMenu"/>
+            <t t-if="isLoaded and messaging and messaging.messagingMenu">
+                <MessagingMenu record="messaging.messagingMenu"/>
+            </t>
             <i t-else="" class="o_MessagingMenuContainer_spinner fa fa-circle-o-notch fa-spin mx-2" title="Please wait..."/>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/popover_manager/popover_manager.js b/addons/mail/static/src/components/popover_manager/popover_manager.js
deleted file mode 100644
index 17c1f02271b..00000000000
--- a/addons/mail/static/src/components/popover_manager/popover_manager.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/** @odoo-module **/
-
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class PopoverManager extends Component {
-
-    get popoverManager() {
-        return this.props.record;
-    }
-}
-
-Object.assign(PopoverManager, {
-    props: { record: Object },
-    template: 'mail.PopoverManager',
-});
-
-registerMessagingComponent(PopoverManager);
diff --git a/addons/mail/static/src/components/popover_manager/popover_manager.xml b/addons/mail/static/src/components/popover_manager/popover_manager.xml
index ecc98ef9c03..c06679f0e0a 100644
--- a/addons/mail/static/src/components/popover_manager/popover_manager.xml
+++ b/addons/mail/static/src/components/popover_manager/popover_manager.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.PopoverManager" owl="1">
         <div class="o_PopoverManager" t-attf-class="{{ className }}" t-ref="root">
-            <PopoverView t-foreach="popoverManager.popoverViews" t-as="popoverView" t-key="popoverView.localId"
+            <PopoverView t-foreach="popoverViews" t-as="popoverView" t-key="popoverView.localId"
                 className="'o_PopoverManager_popover'"
                 record="popoverView"
             />
diff --git a/addons/mail/static/src/components/popover_manager_container/popover_manager_container.js b/addons/mail/static/src/components/popover_manager_container/popover_manager_container.js
index 471178e7131..f2eafcb2ce2 100644
--- a/addons/mail/static/src/components/popover_manager_container/popover_manager_container.js
+++ b/addons/mail/static/src/components/popover_manager_container/popover_manager_container.js
@@ -1,9 +1,6 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure components are registered beforehand.
-import '@mail/components/popover_manager/popover_manager';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component } from '@odoo/owl';
 
@@ -13,8 +10,7 @@ export class PopoverManagerContainer extends Component {
      * @override
      */
     setup() {
-        useModels();
-        super.setup();
+        useMessagingContainer();
     }
 
     get messaging() {
@@ -24,6 +20,5 @@ export class PopoverManagerContainer extends Component {
 PopoverManagerContainer.props = {};
 
 Object.assign(PopoverManagerContainer, {
-    components: { PopoverManager: getMessagingComponent('PopoverManager') },
     template: 'mail.PopoverManagerContainer',
 });
diff --git a/addons/mail/static/src/components/popover_manager_container/popover_manager_container.xml b/addons/mail/static/src/components/popover_manager_container/popover_manager_container.xml
index 6344f306168..5f30aaf7cef 100644
--- a/addons/mail/static/src/components/popover_manager_container/popover_manager_container.xml
+++ b/addons/mail/static/src/components/popover_manager_container/popover_manager_container.xml
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.PopoverManagerContainer" owl="1">
-        <PopoverManager t-if="messaging and messaging.popoverManager" record="messaging.popoverManager"/>
+        <t t-if="isLoaded">
+            <PopoverManager t-if="messaging and messaging.popoverManager" record="messaging.popoverManager"/>
+        </t>
     </t>
 </templates>
diff --git a/addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.js b/addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.js
deleted file mode 100644
index b22c875d5ba..00000000000
--- a/addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/** @odoo-module **/
-
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
-import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-
-import { Component } from '@odoo/owl';
-
-export class WebClientViewAttachmentView extends Component {
-    /**
-     * @override
-     */
-    setup() {
-        useRefToModel({ fieldName: 'iframeViewerPdfRef', refName: 'iframeViewerPdf' });
-        useUpdateToModel({ methodName: 'onComponentUpdate' });
-    }
-    /**
-     * @returns {WebClientViewAttachmentView}
-     */
-    get webClientViewAttachmentView() {
-        return this.props.record;
-    }
-}
-
-Object.assign(WebClientViewAttachmentView, {
-    props: { record: Object },
-    template: 'mail.WebClientViewAttachmentView',
-});
-
-registerMessagingComponent(WebClientViewAttachmentView);
diff --git a/addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.xml b/addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.xml
index 69c33b3f3d5..059edbe32f9 100644
--- a/addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.xml
+++ b/addons/mail/static/src/components/web_client_view_attachment_view/web_client_view_attachment_view.xml
@@ -2,17 +2,17 @@
 <templates>
 
     <t t-name="mail.WebClientViewAttachmentView" owl="1">
-        <t t-if="webClientViewAttachmentView.thread.mainAttachment">
-            <h3 t-if="!webClientViewAttachmentView.thread.mainAttachment.isPdf" class="mt0 mb8 ps-2 text-muted float-end"><t t-esc="webClientViewAttachmentView.thread.mainAttachment.filename"/></h3>
-            <div t-if="webClientViewAttachmentView.thread.mainAttachment.isImage" class="o_attachment_preview_img">
-                <img id="attachment_img" class="img img-fluid d-block" t-attf-src="/web/image/#{webClientViewAttachmentView.thread.mainAttachment.id}?unique=1"/>
+        <t t-if="thread.mainAttachment">
+            <h3 t-if="!thread.mainAttachment.isPdf" class="mt0 mb8 ps-2 text-muted float-end"><t t-esc="thread.mainAttachment.filename"/></h3>
+            <div t-if="thread.mainAttachment.isImage" class="o_attachment_preview_img">
+                <img id="attachment_img" class="img img-fluid d-block" t-attf-src="/web/image/#{thread.mainAttachment.id}?unique=1"/>
             </div>
-            <iframe t-if="webClientViewAttachmentView.thread.mainAttachment.isPdf" class="mb48" t-attf-src="/web/static/lib/pdfjs/web/viewer.html?file=/web/content/#{webClientViewAttachmentView.thread.mainAttachment.id}?filename%3D#{window.encodeURIComponent(webClientViewAttachmentView.thread.mainAttachment.name)}" t-ref="iframeViewerPdf"/>
-            <t t-if="webClientViewAttachmentView.thread.attachmentsInWebClientView.length > 1">
-                <a class="arrow o_move_previous text-center" href="#" t-on-click="webClientViewAttachmentView.onClickPrevious">
+            <iframe t-if="thread.mainAttachment.isPdf" class="mb48" t-attf-src="/web/static/lib/pdfjs/web/viewer.html?file=/web/content/#{thread.mainAttachment.id}?filename%3D#{window.encodeURIComponent(thread.mainAttachment.name)}" t-ref="iframeViewerPdf"/>
+            <t t-if="thread.attachmentsInWebClientView.length > 1">
+                <a class="arrow o_move_previous text-center" href="#" t-on-click="onClickPrevious">
                     <span class="fa fa-chevron-left"/>
                 </a>
-                <a class="arrow o_move_next text-center" href="#" t-on-click="webClientViewAttachmentView.onClickNext">
+                <a class="arrow o_move_next text-center" href="#" t-on-click="onClickNext">
                     <span class="fa fa-chevron-right"/>
                 </a>
             </t>
diff --git a/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.js b/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.js
index ffea92bc3c5..f8cd0c4ddc6 100644
--- a/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.js
+++ b/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.js
@@ -1,9 +1,6 @@
 /** @odoo-module **/
 
-import { useModels } from '@mail/component_hooks/use_models';
-// ensure components are registered beforehand.
-import '@mail/components/web_client_view_attachment_view/web_client_view_attachment_view';
-import { getMessagingComponent } from '@mail/utils/messaging_component';
+import { useMessagingContainer } from '@mail/component_hooks/use_messaging_container';
 
 import { Component, onWillDestroy, onWillUpdateProps } from '@odoo/owl';
 
@@ -30,7 +27,7 @@ export class WebClientViewAttachmentViewContainer extends Component {
      * @override
      */
     setup() {
-        useModels();
+        useMessagingContainer();
         super.setup();
         this.webClientViewAttachmentView = undefined;
         this.webClientViewAttachmentViewId = getNextId();
@@ -78,7 +75,6 @@ export class WebClientViewAttachmentViewContainer extends Component {
 }
 
 Object.assign(WebClientViewAttachmentViewContainer, {
-    components: { WebClientViewAttachmentView: getMessagingComponent('WebClientViewAttachmentView') },
     props: {
         threadId: {
             type: Number,
diff --git a/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.xml b/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.xml
index 8d8cea96dfa..ecaf34726ed 100644
--- a/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.xml
+++ b/addons/mail/static/src/components/web_client_view_attachment_view_container/web_client_view_attachment_view_container.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.WebClientViewAttachmentViewContainer" owl="1">
-        <div t-if="webClientViewAttachmentView and webClientViewAttachmentView.thread.attachmentsInWebClientView.length > 0" class="o_attachment_preview_container">
+        <div t-if="isLoaded and webClientViewAttachmentView and webClientViewAttachmentView.thread.attachmentsInWebClientView.length > 0" class="o_attachment_preview_container">
             <WebClientViewAttachmentView record="webClientViewAttachmentView"/>
         </div>
     </t>
diff --git a/addons/mail/static/src/model/model_core.js b/addons/mail/static/src/model/model_core.js
index 608a32d1d15..0a29d0786ab 100644
--- a/addons/mail/static/src/model/model_core.js
+++ b/addons/mail/static/src/model/model_core.js
@@ -411,6 +411,7 @@ function patchRecordMethods(patch) {
  * @param {function} [definition.componentSetup]
  * @param {Object} [definition.fields]
  * @param {string} [definition.identifyingMode='and']
+ * @param {string} [definition.isLegacyComponent=false]
  * @param {Object} [definition.lifecycleHooks]
  * @param {Object} [definition.modelGetters] Deprecated; use fields instead.
  * @param {Object} [definition.modelMethods]
@@ -420,14 +421,14 @@ function patchRecordMethods(patch) {
  * @param {Object} [definition.recordMethods]
  * @param {string} [definition.template]
  */
-export function registerModel({ componentSetup, fields, identifyingMode = 'and', lifecycleHooks, modelGetters, modelMethods, name, onChanges, recordGetters, recordMethods, template }) {
+export function registerModel({ componentSetup, fields, identifyingMode = 'and', isLegacyComponent = false, lifecycleHooks, modelGetters, modelMethods, name, onChanges, recordGetters, recordMethods, template }) {
     if (!name) {
         throw new Error("Model is lacking a name.");
     }
     if (registry.has(name)) {
         throw new Error(`Cannot register model "${name}": model has already been registered.`);
     }
-    const sectionNames = ['name', 'template', 'componentSetup', 'identifyingMode', 'lifecycleHooks', 'modelMethods', 'modelGetters', 'recordMethods', 'recordGetters', 'fields', 'onChanges'];
+    const sectionNames = ['name', 'template', 'componentSetup', 'identifyingMode', 'isLegacyComponent', 'lifecycleHooks', 'modelMethods', 'modelGetters', 'recordMethods', 'recordGetters', 'fields', 'onChanges'];
     const invalidSectionNames = Object.keys(arguments[0]).filter(x => !sectionNames.includes(x));
     if (invalidSectionNames.length > 0) {
         throw new Error(`Cannot register model "${name}": model definition contains unknown key(s): ${invalidSectionNames.join(", ")}`);
@@ -435,6 +436,7 @@ export function registerModel({ componentSetup, fields, identifyingMode = 'and',
     registry.set(name, new Map([
         ['name', name],
         ['identifyingMode', identifyingMode],
+        ['isLegacyComponent', isLegacyComponent],
         ['lifecycleHooks', new Map()],
         ['modelMethods', new Map()],
         ['modelGetters', new Map()],
diff --git a/addons/mail/static/src/model/model_manager.js b/addons/mail/static/src/model/model_manager.js
index 8805b7774df..248377a9da9 100644
--- a/addons/mail/static/src/model/model_manager.js
+++ b/addons/mail/static/src/model/model_manager.js
@@ -12,6 +12,8 @@ import { followRelations } from '@mail/model/model_utils';
 import { makeDeferred } from '@mail/utils/deferred';
 import { registerMessagingComponent, unregisterMessagingComponent } from '@mail/utils/messaging_component';
 
+import { LegacyComponent } from '@web/legacy/legacy_component';
+
 import { Component } from '@odoo/owl';
 
 /**
@@ -396,7 +398,8 @@ export class ModelManager {
     _applyModelDefinition(model) {
         const definition = registry.get(model.name);
         if (definition.get('template')) {
-            const ModelComponent = { [model.name]: class extends Component {} }[model.name];
+            const ComponentClass = definition.get('isLegacyComponent') ? LegacyComponent : Component;
+            const ModelComponent = { [model.name]: class extends ComponentClass {} }[model.name];
             Object.assign(ModelComponent, {
                 props: { record: Object },
                 template: definition.get('template'),
diff --git a/addons/mail/static/src/models/activity_cell_view.js b/addons/mail/static/src/models/activity_cell_view.js
index 628cb32da73..b556b3a5f21 100644
--- a/addons/mail/static/src/models/activity_cell_view.js
+++ b/addons/mail/static/src/models/activity_cell_view.js
@@ -6,6 +6,7 @@ import { clear } from '@mail/model/model_field_command';
 
 registerModel({
     name: 'ActivityCellView',
+    template: 'mail.ActivityCellView',
     recordMethods: {
         onClick() {
             this.update({ activityListPopoverView: this.activityListPopoverView ? clear() : {} });
@@ -28,7 +29,7 @@ registerModel({
                 }
             },
         }),
-        contentRef: attr(),
+        contentRef: attr({ ref: 'content' }),
         filteredActivities: many('Activity', {
             compute() {
                 return this.thread.activities.filter(activity => activity.type === this.activityType);
diff --git a/addons/mail/static/src/models/activity_view.js b/addons/mail/static/src/models/activity_view.js
index fbecc777f91..bf0227c8118 100644
--- a/addons/mail/static/src/models/activity_view.js
+++ b/addons/mail/static/src/models/activity_view.js
@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -11,9 +10,6 @@ import { sprintf } from '@web/core/utils/strings';
 registerModel({
     name: 'ActivityView',
     template: 'mail.ActivityView',
-    componentSetup() {
-        useRefToModel({ fieldName: 'markDoneButtonRef', refName: 'markDoneButton', });
-    },
     recordMethods: {
         /**
          * Handles the click on a link inside the activity.
@@ -155,7 +151,7 @@ registerModel({
                 return this.activity.mailTemplates.map(mailTemplate => ({ mailTemplate }));
             },
         }),
-        markDoneButtonRef: attr(),
+        markDoneButtonRef: attr({ ref: 'markDoneButton' }),
         markDonePopoverView: one('PopoverView', { inverse: 'activityViewOwnerAsMarkDone', }),
         /**
          * Label for mark as done. This is just for translations purpose.
diff --git a/addons/mail/static/src/models/call_systray_menu.js b/addons/mail/static/src/models/call_systray_menu.js
index 5f26f90bbd4..f58c14064a1 100644
--- a/addons/mail/static/src/models/call_systray_menu.js
+++ b/addons/mail/static/src/models/call_systray_menu.js
@@ -8,6 +8,7 @@ import { sprintf } from '@web/core/utils/strings';
 
 registerModel({
     name: 'CallSystrayMenu',
+    template: 'mail.CallSystrayMenu',
     fields: {
         buttonTitle: attr({ default: '',
             compute() {
diff --git a/addons/mail/static/src/models/chat_window.js b/addons/mail/static/src/models/chat_window.js
index 4cbf958c643..f9b6f134980 100644
--- a/addons/mail/static/src/models/chat_window.js
+++ b/addons/mail/static/src/models/chat_window.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
@@ -8,6 +9,10 @@ import { isEventHandled, markEventHandled } from '@mail/utils/utils';
 registerModel({
     name: 'ChatWindow',
     identifyingMode: 'xor',
+    template: 'mail.ChatWindow',
+    componentSetup() {
+        useUpdateToModel({ methodName: 'onComponentUpdate' });
+    },
     recordMethods: {
         /**
          * Close this chat window.
diff --git a/addons/mail/static/src/models/chat_window_manager.js b/addons/mail/static/src/models/chat_window_manager.js
index 87f1dcf6146..a1b9c252da5 100644
--- a/addons/mail/static/src/models/chat_window_manager.js
+++ b/addons/mail/static/src/models/chat_window_manager.js
@@ -44,6 +44,7 @@ export const BASE_VISUAL = {
 
 registerModel({
     name: 'ChatWindowManager',
+    template: 'mail.ChatWindowManager',
     recordMethods: {
         /**
          * Close all chat windows.
diff --git a/addons/mail/static/src/models/chatter.js b/addons/mail/static/src/models/chatter.js
index 9c15b4e361c..4f20ff5621d 100644
--- a/addons/mail/static/src/models/chatter.js
+++ b/addons/mail/static/src/models/chatter.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 import { clear, insert, link } from '@mail/model/model_field_command';
@@ -22,6 +23,11 @@ const getMessageNextTemporaryId = (function () {
 
 registerModel({
     name: 'Chatter',
+    template: 'mail.Chatter',
+    isLegacyComponent: true,
+    componentSetup() {
+        useComponentToModel({ fieldName: 'component' });
+    },
     recordMethods: {
         focus() {
             if (this.composerView) {
@@ -345,7 +351,7 @@ registerModel({
             },
         }),
         isShowingAttachmentsLoading: attr({ default: false }),
-        scrollPanelRef: attr(),
+        scrollPanelRef: attr({ ref: 'scrollPanel' }),
         /**
          * Determines whether the view should reload after file changed in this chatter,
          * such as from a file upload.
diff --git a/addons/mail/static/src/models/dialog.js b/addons/mail/static/src/models/dialog.js
index 79e1bec3187..2834b6d5a9b 100644
--- a/addons/mail/static/src/models/dialog.js
+++ b/addons/mail/static/src/models/dialog.js
@@ -7,6 +7,7 @@ import { clear } from '@mail/model/model_field_command';
 registerModel({
     name: 'Dialog',
     identifyingMode: 'xor',
+    template: 'mail.Dialog',
     lifecycleHooks: {
         _created() {
             document.addEventListener('click', this._onClickGlobal, true);
diff --git a/addons/mail/static/src/models/dialog_manager.js b/addons/mail/static/src/models/dialog_manager.js
index ffdcd3512b3..1a4054bf4d7 100644
--- a/addons/mail/static/src/models/dialog_manager.js
+++ b/addons/mail/static/src/models/dialog_manager.js
@@ -1,10 +1,15 @@
 /** @odoo-module **/
 
+import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { many } from '@mail/model/model_field';
 
 registerModel({
     name: 'DialogManager',
+    template: 'mail.DialogManager',
+    componentSetup() {
+        useUpdateToModel({ methodName: 'onComponentUpdate' });
+    },
     recordMethods: {
         onComponentUpdate() {
             if (this.dialogs.length > 0) {
diff --git a/addons/mail/static/src/models/discuss_public_view.js b/addons/mail/static/src/models/discuss_public_view.js
index adcafde35dd..20f12197489 100644
--- a/addons/mail/static/src/models/discuss_public_view.js
+++ b/addons/mail/static/src/models/discuss_public_view.js
@@ -6,6 +6,7 @@ import { clear } from '@mail/model/model_field_command';
 
 registerModel({
     name: 'DiscussPublicView',
+    template: 'mail.DiscussPublicView',
     recordMethods: {
         /**
          * Creates and displays the thread view and clears the welcome view.
diff --git a/addons/mail/static/src/models/discuss_view.js b/addons/mail/static/src/models/discuss_view.js
index b92113fefa3..7fdee1622d2 100644
--- a/addons/mail/static/src/models/discuss_view.js
+++ b/addons/mail/static/src/models/discuss_view.js
@@ -6,6 +6,7 @@ import { clear } from '@mail/model/model_field_command';
 
 registerModel({
     name: 'DiscussView',
+    template: 'mail.DiscussView',
     recordMethods: {
         clearIsAddingItem() {
             this.update({
diff --git a/addons/mail/static/src/models/kanban_field_activity_view.js b/addons/mail/static/src/models/kanban_field_activity_view.js
index a9e0950a8eb..d2c1ee25ab2 100644
--- a/addons/mail/static/src/models/kanban_field_activity_view.js
+++ b/addons/mail/static/src/models/kanban_field_activity_view.js
@@ -5,6 +5,7 @@ import { attr, one } from '@mail/model/model_field';
 
 registerModel({
     name: 'KanbanFieldActivityView',
+    template: 'mail.KanbanFieldActivityView',
     fields: {
         activityButtonView: one('ActivityButtonView', { default: {}, inverse: 'kanbanFieldActivityViewOwner', required: true }),
         id: attr({ identifying: true }),
diff --git a/addons/mail/static/src/models/list_field_activity_view.js b/addons/mail/static/src/models/list_field_activity_view.js
index 2c27f8bc87c..1bbcbf86a05 100644
--- a/addons/mail/static/src/models/list_field_activity_view.js
+++ b/addons/mail/static/src/models/list_field_activity_view.js
@@ -6,6 +6,7 @@ import { clear } from '@mail/model/model_field_command';
 
 registerModel({
     name: 'ListFieldActivityView',
+    template: 'mail.ListFieldActivityView',
     fields: {
         activityButtonView: one('ActivityButtonView', { default: {}, inverse: 'listFieldActivityViewOwner', required: true }),
         id: attr({ identifying: true }),
diff --git a/addons/mail/static/src/models/messaging_menu.js b/addons/mail/static/src/models/messaging_menu.js
index cbf8a6ef816..78e2243b72b 100644
--- a/addons/mail/static/src/models/messaging_menu.js
+++ b/addons/mail/static/src/models/messaging_menu.js
@@ -1,11 +1,16 @@
 /** @odoo-module **/
 
+import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, many, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
 
 registerModel({
     name: 'MessagingMenu',
+    template: 'mail.MessagingMenu',
+    componentSetup() {
+        useComponentToModel({ fieldName: 'component' });
+    },
     lifecycleHooks: {
         _created() {
             document.addEventListener('click', this._onClickCaptureGlobal, true);
diff --git a/addons/mail/static/src/models/popover_manager.js b/addons/mail/static/src/models/popover_manager.js
index 37312e7a164..e29ea0caa51 100644
--- a/addons/mail/static/src/models/popover_manager.js
+++ b/addons/mail/static/src/models/popover_manager.js
@@ -5,6 +5,7 @@ import { many } from '@mail/model/model_field';
 
 registerModel({
     name: 'PopoverManager',
+    template: 'mail.PopoverManager',
     fields: {
         // FIXME: dependent on implementation that uses insert order in relations!!
         popoverViews: many('PopoverView', { inverse: 'manager', isCausal: true }),
diff --git a/addons/mail/static/src/models/web_client_view_attachment_view.js b/addons/mail/static/src/models/web_client_view_attachment_view.js
index 918b8bfc282..2c1402d7aaf 100644
--- a/addons/mail/static/src/models/web_client_view_attachment_view.js
+++ b/addons/mail/static/src/models/web_client_view_attachment_view.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
 
@@ -7,6 +8,10 @@ import { hidePDFJSButtons } from '@web/legacy/js/libs/pdfjs';
 
 registerModel({
     name: 'WebClientViewAttachmentView',
+    template: 'mail.WebClientViewAttachmentView',
+    componentSetup() {
+        useUpdateToModel({ methodName: 'onComponentUpdate' });
+    },
     recordMethods: {
         /**
          * @param {MouseEvent} ev
@@ -48,7 +53,7 @@ registerModel({
     },
     fields: {
         id: attr({ identifying: true }),
-        iframeViewerPdfRef: attr(),
+        iframeViewerPdfRef: attr({ ref: 'iframeViewerPdf' }),
         thread: one('Thread', { required: true }),
     },
     onChanges: [
diff --git a/addons/mail/static/src/utils/messaging_component.js b/addons/mail/static/src/utils/messaging_component.js
index e692cfd0329..563311d2d23 100644
--- a/addons/mail/static/src/utils/messaging_component.js
+++ b/addons/mail/static/src/utils/messaging_component.js
@@ -4,7 +4,7 @@ import { useModels } from '@mail/component_hooks/use_models';
 
 import { useRef } from '@odoo/owl';
 
-const componentRegistry = {};
+export const componentRegistry = {};
 
 /**
  * Allows a component to lean on the messaging features: the component is