[Frame] hookify Loading

UNRELEASED.md

@@ -47,5 +47,8 @@
 - Changed `aria-labelledby` to always exist on `TextField` ([#2401](https://github.com/Shopify/polaris-react/pull/2401))
 - Converted `ButtonGroup > Item` into a functional component ([#2441](https://github.com/Shopify/polaris-react/pull/2441))
 - Refactored BulkActions to make use of `ButtonGroup` ([#2441](https://github.com/Shopify/polaris-react/pull/2441))
+- Migrated `Loading` to use hooks ([#2303](https://github.com/Shopify/polaris-react/pull/2303))
+
+### Deprecations
 
 ### Deprecations

src/components/Frame/components/Loading/Loading.tsx

@@ -1,78 +1,57 @@
-import React from 'react';
-import debounce from 'lodash/debounce';
+import React, {useEffect, useState} from 'react';
 import styles from './Loading.scss';
 
-export interface LoadingProps {}
-
-interface State {
-  progress: number;
-  step: number;
-  animation: number | null;
-}
-
 const INITIAL_STEP = 10;
 const STUCK_THRESHOLD = 99;
 
-export class Loading extends React.Component<LoadingProps, State> {
-  state: State = {
-    progress: 0,
-    step: INITIAL_STEP,
-    animation: null,
-  };
+export function Loading() {
+  const [progress, setProgress] = useState(0.1);
 
-  private ariaValuenow = debounce(() => {
-    const {progress} = this.state;
-    return Math.floor(progress / 10) * 10;
-  }, 15);
+  useEffect(() => {
+    let animation: number;
+    let step = INITIAL_STEP;
+    let currentProgress = 0;
+    let previousProgress = 0;
 
-  componentDidMount() {
-    this.increment();
-  }
+    const increment = () => {
+      if (currentProgress >= STUCK_THRESHOLD) {
+        return;
+      }
 
-  componentWillUnmount() {
-    const {animation} = this.state;
+      currentProgress = Math.min(currentProgress + step, 100);
+      const nextProgress = Math.floor(currentProgress) / 100;
 
-    if (animation != null) {
-      cancelAnimationFrame(animation);
-    }
-  }
+      if (nextProgress !== previousProgress) {
+        setProgress(nextProgress);
+        previousProgress = nextProgress;
+      }
 
-  render() {
-    const {progress} = this.state;
+      step = INITIAL_STEP ** -(currentProgress / 25);
 
-    const customStyles = {
-      transform: `scaleX(${Math.floor(progress) / 100})`,
+      animation = requestAnimationFrame(increment);
     };
 
-    const ariaValuenow = this.ariaValuenow();
+    increment();
 
-    return (
-      <div className={styles.Loading}>
-        <div
-          className={styles.Level}
-          style={customStyles}
-          aria-valuenow={ariaValuenow}
-          aria-valuemin={0}
-          aria-valuemax={100}
-          role="progressbar"
-        />
-      </div>
-    );
-  }
-
-  private increment() {
-    const {progress, step} = this.state;
-
-    if (progress >= STUCK_THRESHOLD) {
-      return;
-    }
+    return () => {
+      cancelAnimationFrame(animation);
+    };
+  }, []);
 
-    const animation = requestAnimationFrame(() => this.increment());
+  const customStyles = {
+    transform: `scaleX(${progress})`,
+  };
 
-    this.setState({
-      progress: Math.min(progress + step, 100),
-      step: INITIAL_STEP ** -(progress / 25),
-      animation,
-    });
-  }
+  return (
+    <div className={styles.Loading}>
+      <div
+        className={styles.Level}
+        style={customStyles}
+        aria-valuenow={progress * 100}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        role="progressbar"
+      />
+    </div>
+  );
 }

src/components/Frame/components/Loading/index.ts

@@ -1 +1 @@
-export {Loading, LoadingProps} from './Loading';
+export {Loading} from './Loading';

src/components/Frame/components/Loading/tests/Loading.test.tsx

@@ -1,17 +1,38 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
+import {animationFrame} from '@shopify/jest-dom-mocks';
+import {act} from 'react-dom/test-utils';
 import {Loading} from '../Loading';
 
 describe('<Loading />', () => {
-  const loading = mountWithAppProvider(<Loading />);
+  beforeEach(() => {
+    animationFrame.mock();
+  });
+
+  afterEach(() => {
+    animationFrame.restore();
+  });
+
+  it('increases over time', () => {
+    const loading = mountWithAppProvider(<Loading />);
 
-  it('mounts', () => {
-    expect(loading.exists()).toBe(true);
+    for (let i = 0; i <= 100; i++) {
+      act(() => animationFrame.runFrame());
+    }
+
+    loading.update();
+
+    expect(loading.find('.Level').prop('aria-valuenow')).toBe(26);
   });
 
-  it('unmounts safely', () => {
+  it('cancels the animationFrame on unmount', () => {
+    const cancelAnimationFrameSpy = jest.spyOn(window, 'cancelAnimationFrame');
+    const loading = mountWithAppProvider(<Loading />);
+
     expect(() => {
       loading.unmount();
     }).not.toThrow();
+
+    expect(cancelAnimationFrameSpy).toHaveBeenCalledTimes(1);
   });
 });

src/components/Frame/components/index.ts

@@ -6,7 +6,7 @@ export {
 
 export {ToastManager, ToastManagerProps} from './ToastManager';
 
-export {Loading, LoadingProps} from './Loading';
+export {Loading} from './Loading';
 
 export {ContextualSaveBar} from './ContextualSaveBar';