Update the IndexTable component to prevent a scrollbar flash when t…

…he table is rendered Co-authored-by: Marc Thomas <marc.thomas@shopify.com>
Shopify · Apr 2, 2024 · 1ed8948 · 1ed8948
1 parent e8fda67
commit 1ed8948
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/.changeset/tricky-beans-fold.md b/.changeset/tricky-beans-fold.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[IndexTable] Initially hide the scrollbar and update scrollbar padding
diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx
@@ -134,7 +134,7 @@ export interface TableHeadingRect {
   offsetLeft: number;
 }
 
-const SCROLL_BAR_PADDING = 4;
+const SCROLL_BAR_PADDING = 16;
 const SCROLL_BAR_DEBOUNCE_PERIOD = 300;
 
 function IndexTableBase({
@@ -188,8 +188,7 @@ function IndexTableBase({
 
   const [tableInitialized, setTableInitialized] = useState(false);
   const [stickyWrapper, setStickyWrapper] = useState<HTMLElement | null>(null);
-  const [hideScrollContainer, setHideScrollContainer] =
-    useState<boolean>(false);
+  const [hideScrollContainer, setHideScrollContainer] = useState<boolean>(true);
 
   const tableHeadings = useRef<HTMLElement[]>([]);
   const stickyTableHeadings = useRef<HTMLElement[]>([]);