From df3191465b512c1738d0e1e970971a1c4370bbcb Mon Sep 17 00:00:00 2001
From: Abdallah Alhalees <alhalee@amazon.de>
Date: Thu, 1 Dec 2022 10:48:00 +0100
Subject: [PATCH] fix: Prevent empty table from flickering

---
 src/table/use-sticky-header.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/table/use-sticky-header.ts b/src/table/use-sticky-header.ts
index e2e5abfd39..cfedb7e7d4 100644
--- a/src/table/use-sticky-header.ts
+++ b/src/table/use-sticky-header.ts
@@ -47,9 +47,6 @@ export const useStickyHeader = (
   }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);
   useLayoutEffect(() => {
     syncColumnHeaderWidths();
-    // Content is not going to be layed out until the next frame in angular,
-    // so we need to sync the column headers again.
-    setTimeout(() => syncColumnHeaderWidths(), 0);
     const secondaryTable = secondaryTableRef.current;
     const primaryTable = tableWrapperRef.current;
     return () => {
@@ -60,7 +57,7 @@ export const useStickyHeader = (
         primaryTable.style.marginTop = '';
       }
     };
-  });
+  }, [secondaryTableRef, tableWrapperRef, syncColumnHeaderWidths]);
   useResizeObserver(theadRef, syncColumnHeaderWidths);
   const scrollToTop = () => {
     if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {