From a3c0d6ee714277819f541c6fa24934db55dfef0c Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Wed, 29 Apr 2020 07:21:35 +0000
Subject: [PATCH] [FIX] web: list: prevent flickering
Have a list view with "badge" field component and 'decoration-xxx'
attributes (on that field). Before this commit, it flickered when
the user refreshed the list (for instance, by clicking on the list
icon in the view switcher). The badges were displayed with a grey
background (i.e. no decoration) for a brief moment, before their
style was applied.
Their style is applied in the mounted hook, which is called by
'on_attach_callback' (legacy version of mounted). However, the list
renderer computes its column widths in 'on_attach_callback', which
produces a repaint.
This commit moves this operation to the end of on_attach_callback,
such that other processing (like applying the badges style) is done
before the repaint.
---
.../web/static/src/js/views/list/list_editable_renderer.js | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/addons/web/static/src/js/views/list/list_editable_renderer.js b/addons/web/static/src/js/views/list/list_editable_renderer.js
index 38a96f04bcaf..6bf2bdc29c67 100644
--- a/addons/web/static/src/js/views/list/list_editable_renderer.js
+++ b/addons/web/static/src/js/views/list/list_editable_renderer.js
@@ -128,8 +128,11 @@ ListRenderer.include({
*/
on_attach_callback: function () {
this.isInDOM = true;
- this._freezeColumnWidths();
this._super();
+ // _freezeColumnWidths requests style information, which produces a
+ // repaint, so we call it after _super to prevent flickering (in case
+ // other code would also modify the DOM post rendering/before repaint)
+ this._freezeColumnWidths();
},
/**
* The list renderer needs to know if it is in the DOM to properly compute
--
GitLab