[IndexTable, ProgressBar] - stop console.errors being reported about findDOMNode (#7925)

<!--
  ☝️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
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

While developing in another repo using Polaris, I am getting
console.errors about findDOMNode being deprecated. This is because the
`CSSTransition` component from `react-transition-group` was not being
passed a `nodeRef` properly. This change will properly pass the
`nodeRef` and stop the console.errors.

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

### WHAT is this pull request doing?

Passes the correct prop so that CSSTransition will work properly and
React won't complain.

[Without change](https://screenshot.click/15-43-beovu-byqtb.mp4) vs
[with change](https://screenshot.click/15-44-344aj-f0r4h.mp4).

<!--
  Summary of the changes committed.

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

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>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- not sure how? the doc just links to cross-browser testing, is this
necessary?
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- N/A
- [ ] Updated the component's `README.md` with documentation changes -
N/A
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide - N/A

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

Author: jas7457

.changeset/mean-bananas-drum.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated `IndexTable` and `ProgressBar` to no longer log errors about deprecated `React.findDOMNode`

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -148,6 +148,7 @@ function IndexTableBase({
   const scrollableContainerElement = useRef<HTMLDivElement>(null);
   const tableElement = useRef<HTMLTableElement>(null);
   const condensedListElement = useRef<HTMLUListElement>(null);
+  const loadingElement = useRef<HTMLDivElement>(null);
 
   const [tableInitialized, setTableInitialized] = useState(false);
   const [stickyWrapper, setStickyWrapper] = useState<HTMLElement | null>(null);
@@ -512,10 +513,11 @@ function IndexTableBase({
       in={loading}
       classNames={loadingTransitionClassNames}
       timeout={parseInt(motion['duration-100'], 10)}
+      nodeRef={loadingElement}
       appear
       unmountOnExit
     >
-      <div className={styles.LoadingPanel}>
+      <div className={styles.LoadingPanel} ref={loadingElement}>
         <div className={styles.LoadingPanelRow}>
           <Spinner size="small" />
           <span className={styles.LoadingPanelText}>

polaris-react/src/components/Modal/components/Dialog/Dialog.tsx

@@ -10,6 +10,8 @@ import {TrapFocus} from '../../../TrapFocus';
 
 import styles from './Dialog.scss';
 
+type CSSTransitionProps = React.ComponentProps<typeof CSSTransition>;
+
 export interface DialogProps {
   labelledBy?: string;
   instant?: boolean;
@@ -117,7 +119,7 @@ const fadeUpClasses = {
   exitActive: classNames(styles.animateFadeUp, styles.exited),
 };
 
-function FadeUp({children, ...props}: any) {
+function FadeUp({children, ...props}: CSSTransitionProps) {
   return (
     <CSSTransition {...props} classNames={fadeUpClasses}>
       {children}

polaris-react/src/components/ProgressBar/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {CSSTransition} from 'react-transition-group';
 import {motion} from '@shopify/polaris-tokens';
 
@@ -45,6 +45,7 @@ export function ProgressBar({
   ariaLabelledBy,
 }: ProgressBarProps) {
   const i18n = useI18n();
+  const indicatorRef = useRef<HTMLDivElement>(null);
 
   const className = classNames(
     styles.ProgressBar,
@@ -78,12 +79,14 @@ export function ProgressBar({
         in
         appear
         timeout={parseInt(progressBarDuration, 10)}
+        nodeRef={indicatorRef}
         classNames={{
           appearActive: styles.IndicatorAppearActive,
           appearDone: styles.IndicatorAppearDone,
         }}
       >
         <div
+          ref={indicatorRef}
           className={styles.Indicator}
           style={
             {