From 528d048705d162112d173e66d0a726873e397328 Mon Sep 17 00:00:00 2001
From: vbersch <viktor.bersch@sap.com>
Date: Mon, 6 Apr 2020 17:01:23 +0200
Subject: [PATCH] fix(AnalyticalTable): skip first table paint as long as
 column width has not been calculated (#406)

---
 .../AnalyticalTable.test.tsx.snap             | 48 ++++++++++++++-----
 .../src/components/AnalyticalTable/index.tsx  | 12 ++++-
 2 files changed, 47 insertions(+), 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
index 1b005021569..af5f82e69fd 100644
--- 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
index 26d7a30a2f7..326d6925200 100644
--- 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}>