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(