fix(AnalyticalTable): skip first table paint as long as column width …

…has not been calculated (#406)
SAP · Apr 6, 2020 · 528d048 · 528d048
1 parent 6e3d549
commit 528d048
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 13 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AnalyticalTable Alternate Row Color 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -535,7 +537,9 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
 `;
 
 exports[`AnalyticalTable Loading - Loader 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -1069,7 +1073,9 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
 `;
 
 exports[`AnalyticalTable Loading - Placeholder 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -1588,7 +1594,9 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
 `;
 
 exports[`AnalyticalTable Tree Table 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -2301,7 +2309,9 @@ exports[`AnalyticalTable Tree Table 1`] = `
 `;
 
 exports[`AnalyticalTable custom row height 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -2835,7 +2845,9 @@ exports[`AnalyticalTable custom row height 1`] = `
 `;
 
 exports[`AnalyticalTable render without data 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -3127,7 +3139,9 @@ exports[`AnalyticalTable render without data 1`] = `
 `;
 
 exports[`AnalyticalTable test Asc desc 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -3661,7 +3675,9 @@ exports[`AnalyticalTable test Asc desc 1`] = `
 `;
 
 exports[`AnalyticalTable test Asc desc 2`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -4195,7 +4211,9 @@ exports[`AnalyticalTable test Asc desc 2`] = `
 `;
 
 exports[`AnalyticalTable test Asc desc 3`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -4729,7 +4747,9 @@ exports[`AnalyticalTable test Asc desc 3`] = `
 `;
 
 exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -5263,7 +5283,9 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
 `;
 
 exports[`AnalyticalTable with highlight row 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >
@@ -5931,7 +5953,9 @@ exports[`AnalyticalTable with highlight row 1`] = `
 `;
 
 exports[`AnalyticalTable without selection Column 1`] = `
-<div>
+<div
+  style="visibility: hidden;"
+>
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
   >

diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -400,8 +400,18 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     [currentlyFocusedCell]
   );
 
+  const inlineStyle = useMemo(() => {
+    if(tableState.tableClientWidth > 0) {
+      return style;
+    }
+    return {
+      ...style,
+      visibility: 'hidden' as 'hidden'
+    };
+  }, [tableState.tableClientWidth, style]);
+
   return (
-    <div className={className} style={style} title={tooltip} ref={analyticalTableRef} {...passThroughProps}>
+    <div className={className} style={inlineStyle} title={tooltip} ref={analyticalTableRef} {...passThroughProps}>
       {title && <TitleBar>{title}</TitleBar>}
       {typeof renderExtension === 'function' && <div>{renderExtension()}</div>}
       <div className={tableContainerClasses.valueOf()} ref={tableRef}>