From 0a9b72721416283571264e844b49489adb7f1227 Mon Sep 17 00:00:00 2001
From: Jay Laiche <jay.laiche@shopify.com>
Date: Wed, 24 Apr 2024 10:33:48 -0400
Subject: [PATCH] [IndexTable] Fix CSS transition of `IndexTable` `loading`
 (#11805)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Closes https://github.com/Shopify/polaris/issues/11803 <!-- link to
issue if one exists -->

Fixes an issue where the `loading` prop on `IndexTable` would not
trigger the "loading panel" to appear. This was due to the
`CSSTransition` component not functioning as expected and not applying
expected CSS classes.

I opted to ditch `CSSTransition` altogether and just directly apply the
transitions in CSS for a simpler approach.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

[Example in
`web`](https://admin.web.pf-variants-save-refetch-after.jay-laiche.us.spin.dev/store/shop1/products/2)

- Make price changes to any variants in the "variants" card and save the
product
- Observe that the "Loading variants..." panel appears after save,
indicating reloading/refreshing of variants. It should disappear once
reloading is complete.

<details>
<summary>Example video from storybook</summary>


https://github.com/Shopify/polaris/assets/11605788/5b7b9e06-b268-41ba-ada2-8a4ccdd64bb6

</details>

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/wild-sloths-begin.md               |  5 ++
 .../IndexTable/IndexTable.module.css          | 38 ++++++---------
 .../src/components/IndexTable/IndexTable.tsx  | 48 +++++++------------
 3 files changed, 35 insertions(+), 56 deletions(-)
 create mode 100644 .changeset/wild-sloths-begin.md

diff --git a/.changeset/wild-sloths-begin.md b/.changeset/wild-sloths-begin.md
new file mode 100644
index 00000000000..26e2a5e7728
--- /dev/null
+++ 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
index fcb5a75adb2..882e82b5506 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.module.css
+++ b/polaris-react/src/components/IndexTable/IndexTable.module.css
@@ -36,30 +36,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);
@@ -72,6 +48,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 var(--p-motion-duration-0) 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.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx
index a817a194880..5d334acfbb3 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.tsx
@@ -8,7 +8,6 @@ import React, {
   useLayoutEffect,
 } from 'react';
 import {SortAscendingIcon, SortDescendingIcon} from '@shopify/polaris-icons';
-import {CSSTransition} from 'react-transition-group';
 import type {SpaceScale} from '@shopify/polaris-tokens';
 
 import {debounce} from '../../utilities/debounce';
@@ -47,7 +46,6 @@ import type {
   Width,
   TooltipOverlayProps,
 } from '../Tooltip';
-import {useTheme} from '../../utilities/use-theme';
 
 import {getTableHeadingsBySelector} from './utilities';
 import {ScrollContainer, Cell, Row} from './components';
@@ -163,8 +161,6 @@ function IndexTableBase({
   pagination,
   ...restProps
 }: IndexTableBaseProps) {
-  const theme = useTheme();
-
   const {
     loading,
     bulkSelectState,
@@ -192,7 +188,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);
@@ -501,36 +496,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(