[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.

1 files changed, 4 insertions, 1 deletions

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 38a96f04bca..6bf2bdc29c6 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