feat(react): use native CSS transition for IndexTable loading

Shopify · Mar 29, 2024 · d466758 · d466758
1 parent 0c26884
commit d466758
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 84 deletions.
diff --git a/.changeset/wild-sloths-begin.md b/.changeset/wild-sloths-begin.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `IndexTable` `loading` prop to correctly show/hide loading UI when prop value changes
diff --git a/polaris-react/src/components/IndexTable/IndexTable.module.css b/polaris-react/src/components/IndexTable/IndexTable.module.css
@@ -34,30 +34,6 @@
   border-radius: 0;
 }
 
-.LoadingContainer-enter {
-  opacity: 0;
-  transform: translateY(-100%);
-}
-
-.LoadingContainer-enter-active {
-  opacity: 1;
-  transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
-    transform var(--p-motion-duration-100) var(--p-motion-ease-out);
-  transform: translateY(0);
-}
-
-.LoadingContainer-exit {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.LoadingContainer-exit-active {
-  opacity: 0;
-  transform: translateY(-100%);
-  transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-in),
-    transform var(--p-motion-duration-100) var(--p-motion-ease-in);
-}
-
 .LoadingPanel {
   position: absolute;
   z-index: var(--p-z-index-2);
@@ -70,6 +46,20 @@
   background: var(--p-color-bg-surface);
   padding: var(--p-space-200) var(--p-space-400);
   box-shadow: var(--p-shadow-300);
+  opacity: 0;
+  transform: translateY(-100%);
+  transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-in),
+    transform var(--p-motion-duration-100) var(--p-motion-ease-in),
+    visibility 0s linear var(--p-motion-duration-100);
+  visibility: hidden;
+
+  &.LoadingPanelEntered {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
+      transform var(--p-motion-duration-100) var(--p-motion-ease-out);
+  }
 
   .LoadingPanelRow {
     display: flex;

diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -1491,6 +1491,8 @@ export function WithBulkActionsAndSelectionAcrossPages() {
 }
 
 export function WithLoadingState() {
+  const [loading, setLoading] = useState(true);
+
   const customers = [
     {
       id: '3410',
@@ -1574,34 +1576,37 @@ export function WithLoadingState() {
   );
 
   return (
-    <LegacyCard>
-      <IndexTable
-        condensed={useBreakpoints().smDown}
-        resourceName={resourceName}
-        itemCount={customers.length}
-        selectedItemsCount={
-          allResourcesSelected ? 'All' : selectedResources.length
-        }
-        onSelectionChange={handleSelectionChange}
-        loading
-        headings={[
-          {title: 'Name'},
-          {title: 'Location'},
-          {
-            alignment: 'end',
-            id: 'order-count',
-            title: 'Order count',
-          },
-          {
-            alignment: 'end',
-            id: 'amount-spent',
-            title: 'Amount spent',
-          },
-        ]}
-      >
-        {rowMarkup}
-      </IndexTable>
-    </LegacyCard>
+    <>
+      <Button onClick={() => setLoading(!loading)}>Toggle loading state</Button>
+      <LegacyCard>
+        <IndexTable
+          condensed={useBreakpoints().smDown}
+          resourceName={resourceName}
+          itemCount={customers.length}
+          selectedItemsCount={
+            allResourcesSelected ? 'All' : selectedResources.length
+          }
+          onSelectionChange={handleSelectionChange}
+          loading={loading}
+          headings={[
+            {title: 'Name'},
+            {title: 'Location'},
+            {
+              alignment: 'end',
+              id: 'order-count',
+              title: 'Order count',
+            },
+            {
+              alignment: 'end',
+              id: 'amount-spent',
+              title: 'Amount spent',
+            },
+          ]}
+        >
+          {rowMarkup}
+        </IndexTable>
+      </LegacyCard>
+    </>
   );
 }
 

diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx
@@ -1,6 +1,5 @@
 import React, {useRef, useState, useEffect, useCallback, useMemo} from 'react';
 import {SortAscendingIcon, SortDescendingIcon} from '@shopify/polaris-icons';
-import {CSSTransition} from 'react-transition-group';
 import {themeDefault, toPx} from '@shopify/polaris-tokens';
 import type {SpaceScale} from '@shopify/polaris-tokens';
 
@@ -41,7 +40,6 @@ import type {
   Width,
   TooltipOverlayProps,
 } from '../Tooltip';
-import {useTheme} from '../../utilities/use-theme';
 
 import {getTableHeadingsBySelector} from './utilities';
 import {ScrollContainer, Cell, Row} from './components';
@@ -156,8 +154,6 @@ function IndexTableBase({
   pagination,
   ...restProps
 }: IndexTableBaseProps) {
-  const theme = useTheme();
-
   const {
     loading,
     bulkSelectState,
@@ -184,7 +180,6 @@ function IndexTableBase({
   const tableElement = useRef<HTMLTableElement>(null);
   const tableBodyElement = useRef<Element | null>(null);
   const condensedListElement = useRef<HTMLUListElement>(null);
-  const loadingElement = useRef<HTMLDivElement>(null);
 
   const [tableInitialized, setTableInitialized] = useState(false);
   const [stickyWrapper, setStickyWrapper] = useState<HTMLElement | null>(null);
@@ -541,36 +536,25 @@ function IndexTableBase({
 
   const paginatedSelectAllAction = getPaginatedSelectAllAction();
 
-  const loadingTransitionClassNames = {
-    enter: styles['LoadingContainer-enter'],
-    enterActive: styles['LoadingContainer-enter-active'],
-    exit: styles['LoadingContainer-exit'],
-    exitActive: styles['LoadingContainer-exit-active'],
-  };
-
   const loadingMarkup = (
-    <CSSTransition
-      in={loading}
-      classNames={loadingTransitionClassNames}
-      timeout={parseInt(theme.motion['motion-duration-100'], 10)}
-      nodeRef={loadingElement}
-      appear
-      unmountOnExit
+    <div
+      className={classNames(
+        styles.LoadingPanel,
+        loading && styles.LoadingPanelEntered,
+      )}
     >
-      <div className={styles.LoadingPanel} ref={loadingElement}>
-        <div className={styles.LoadingPanelRow}>
-          <Spinner size="small" />
-          <span className={styles.LoadingPanelText}>
-            {i18n.translate(
-              'Polaris.IndexTable.resourceLoadingAccessibilityLabel',
-              {
-                resourceNamePlural: resourceName.plural.toLocaleLowerCase(),
-              },
-            )}
-          </span>
-        </div>
+      <div className={styles.LoadingPanelRow}>
+        <Spinner size="small" />
+        <span className={styles.LoadingPanelText}>
+          {i18n.translate(
+            'Polaris.IndexTable.resourceLoadingAccessibilityLabel',
+            {
+              resourceNamePlural: resourceName.plural.toLocaleLowerCase(),
+            },
+          )}
+        </span>
       </div>
-    </CSSTransition>
+    </div>
   );
 
   const stickyTableClassNames = classNames(