Issue 801 - Flickering scrollbar (#809)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 - [#806](https://github.com/plotly/dash-table/pull/806) Fix a bug where fixed rows a misaligned after navigating or editing cells [#803](https://github.com/plotly/dash-table/issues/803)
+- [#809](https://github.com/plotly/dash-table/pull/809) Fix a bug where a scrollbar flickers on table render [#801](https://github.com/plotly/dash-table/issues/801)
 
 ## [4.8.1] - 2020-06-19
 ### Fixed

src/core/browser/scrollbarWidth.ts

@@ -1,4 +1,4 @@
-export default (): Promise<number> => {
+export default (target: HTMLElement): Promise<number> => {
     const parent = document.createElement('div');
     parent.style.position = 'absolute';
     parent.style.visibility = 'hidden';
@@ -11,13 +11,13 @@ export default (): Promise<number> => {
     child.style.height = '100px';
 
     parent.appendChild(child);
-    document.body.appendChild(parent);
+    target.appendChild(parent);
 
     return new Promise<number>(resolve => {
         setTimeout(() => {
             const width = child.clientWidth - parent.clientWidth;
 
-            document.body.removeChild(parent);
+            target.removeChild(parent);
             resolve(width);
         }, 0);
     });

src/dash-table/components/ControlledTable/index.tsx

@@ -308,6 +308,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 
     forceHandleResize = () => this.handleResize();
 
+    getScrollbarWidthOnce = R.once(getScrollbarWidth);
+
     handleResizeIf = memoizeOne((..._: any[]) => {
         const { r0c0, r0c1, r1c0, r1c1 } = this.refs as Refs;
 
@@ -339,15 +341,13 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             setState
         } = this.props;
 
-        const { r1c1 } = this.refs as Refs;
+        const { r1, r1c1 } = this.refs as Refs;
 
         if (!this.isDisplayed(r1c1)) {
             return;
         }
 
-        this.updateStylesheet();
-
-        getScrollbarWidth().then((scrollbarWidth: number) => setState({ scrollbarWidth }));
+        this.getScrollbarWidthOnce(r1).then((scrollbarWidth: number) => setState({ scrollbarWidth }));
 
         const { r0c0, r0c1, r1c0 } = this.refs as Refs;
 
@@ -395,7 +395,6 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             const firstTdBounds = firstVisibleTd.getBoundingClientRect();
 
             const width = firstTdBounds.left - r1c1FragmentBounds.left;
-            const { r1 } = this.refs as Refs;
 
             r0c1.style.marginLeft = `-${width + r1.scrollLeft}px`;
             r1c1.style.marginLeft = `-${width}px`;