[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.
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user