[PERF] project,*: download smaller avatars in portal view

Description:
Portal routes `/my/tickets` or `/my/tasks` were reported slow to
load with many items.

Analysis:
The avatars that are loaded are of too large sizes (encoded in base64)
compared to their rendering size. `img.o_avatar` limits the
dimensions to `1.7145em` (roughly `27px` on desktop), so it's
useless to load `avatar_1024` for those image sources. This has a
significant impact when the user has a slow connection, the server
is hosted far away from the user, or the images used are of badly
compressed (so each images takes a quite a few MiB).

Fix:
Scan for all instances of the usage of `avatar_1024` on an `<img>`
with the class `o_avatar` and reduce it to `avatar_128`.

Reference:
opw-3470171

closes odoo/odoo#142103

Related: odoo/enterprise#50678
Signed-off-by: Xavier Bol (xbo) <xbo@odoo.com>
This commit is contained in:
Victor Piryns (pivi)
2023-11-16 11:44:55 +00:00
committed by Xavier Bol (xbo)
parent 3a870ad17a
commit 36cd3ec68c
4 changed files with 4 additions and 4 deletions
@@ -145,7 +145,7 @@
</h6>
<div class="o_portal_contact_details d-flex flex-column gap-2">
<div class="d-flex justify-content-start align-items-center gap-2">
<img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(invoice.invoice_user_id.avatar_1024)" alt="Contact"/>
<img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(invoice.invoice_user_id.avatar_128)" alt="Contact"/>
<div>
<h6 class="mb-0" t-out="invoice.invoice_user_id.name"/>
<a href="#discussion" class="d-flex align-items-center gap-2 small fw-bold">
+1 -1
View File
@@ -805,7 +805,7 @@
</div>
<div t-attf-class="{{'offcanvas-body' if isOffcanvas else 'mt-3'}}">
<div class="d-flex justify-content-start align-items-center gap-3 mb-4">
<img class="o_portal_contact_img rounded o_object_fit_cover" t-att-src="image_data_uri(user_id.partner_id.avatar_1024)" alt="Contact" width="50"/>
<img class="o_portal_contact_img rounded o_object_fit_cover" t-att-src="image_data_uri(user_id.partner_id.avatar_128)" alt="Contact" width="50"/>
<div class="d-flex flex-column justify-content-center">
<h5 class="mb-0" t-out="user_id.name"/>
<p class="mb-0 text-muted" t-out="user_id.company_name"/>
@@ -188,7 +188,7 @@
<t t-foreach="task.user_ids" t-as="user">
<div t-attf-class="o_portal_contact_details d-flex flex-column gap-2 {{ 'mb-3' if len(task.user_ids) > 1 else '' }}">
<div class="d-flex justify-content-start align-items-center gap-2">
<img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(user.avatar_1024)"/>
<img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(user.avatar_128)"/>
<h6 class="mb-0" t-field="user.name"></h6>
</div>
<div t-out="user" t-options='{"widget": "contact", "fields": ["email", "phone"]}'/>
+1 -1
View File
@@ -160,7 +160,7 @@
<h6><small class="text-muted">Purchase Representative</small></h6>
<div class="o_portal_contact_details d-flex flex-column gap-2">
<div class="d-flex justify-content-start align-items-center gap-2">
<img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(order.user_id.avatar_1024)" alt="Contact"/>
<img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(order.user_id.avatar_128)" alt="Contact"/>
<div>
<h6 class="mb-0" t-out="order.user_id.name"/>
<a href="#discussion" class="small fw-bold">Send message</a>