[v4][Loading] Remove withContext

UNRELEASED-V4.md

@@ -32,6 +32,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Upgraded the `Navigation` component from legacy context API to use createContext ([#1402](https://github.com/Shopify/polaris-react/pull/1402))
 - Updated `ThemeProvider` to no longer use `componentWillReceiveProps`([#1254](https://github.com/Shopify/polaris-react/pull/1254))
 - Removed unused context from `Scrollable` ([#1253](https://github.com/Shopify/polaris-react/pull/1253))
+- Removed `withContext` from `Loading` ([#1497](https://github.com/Shopify/polaris-react/pull/1497))
 - Upgraded the `Banner`, `Card`, and `Modal` components from legacy context API to use createContext ([#786](https://github.com/Shopify/polaris-react/pull/786))
 - Refactored `Frame` and its subcomponents to use the `createContext` API instead of legacy context ([#803](https://github.com/Shopify/polaris-react/pull/803))
 

src/components/Loading/Loading.tsx

@@ -1,54 +1,31 @@
 import * as React from 'react';
-import compose from '@shopify/react-compose';
 import {Loading as AppBridgeLoading} from '@shopify/app-bridge/actions';
-import {FrameContextType, FrameContext} from '../Frame';
-import withContext from '../WithContext';
-import {WithContextTypes} from '../../types';
-import {withAppProvider, WithAppProviderProps} from '../AppProvider';
+import {FrameContext} from '../Frame';
+import {usePolaris} from '../../hooks';
 
 export interface Props {}
-export type ComposedProps = Props &
-  WithAppProviderProps &
-  WithContextTypes<FrameContextType>;
 
-export class Loading extends React.PureComponent<ComposedProps, never> {
-  private appBridgeLoading: AppBridgeLoading.Loading | undefined;
-
-  componentDidMount() {
-    const {
-      polaris: {appBridge},
-      context,
-    } = this.props;
+export default React.memo(function Loading() {
+  const appBridgeLoading = React.useRef<AppBridgeLoading.Loading>();
+  const {appBridge} = usePolaris();
+  const frame = React.useContext(FrameContext);
 
+  React.useEffect(() => {
     if (appBridge == null) {
-      context.startLoading();
+      frame.startLoading();
     } else {
-      this.appBridgeLoading = AppBridgeLoading.create(appBridge);
-      this.appBridgeLoading.dispatch(AppBridgeLoading.Action.START);
-    }
-  }
-
-  componentWillUnmount() {
-    const {
-      polaris: {appBridge},
-      context,
-    } = this.props;
-
-    if (appBridge == null) {
-      context.stopLoading();
-    } else if (this.appBridgeLoading != null) {
-      this.appBridgeLoading.dispatch(AppBridgeLoading.Action.STOP);
+      appBridgeLoading.current = AppBridgeLoading.create(appBridge);
+      appBridgeLoading.current.dispatch(AppBridgeLoading.Action.START);
     }
-  }
-
-  render() {
-    return null;
-  }
-}
 
-export default compose<Props>(
-  withContext<Props, WithAppProviderProps, FrameContextType>(
-    FrameContext.Consumer,
-  ),
-  withAppProvider(),
-)(Loading);
+    return () => {
+      if (appBridge == null) {
+        frame.stopLoading();
+      } else if (appBridgeLoading.current != null) {
+        appBridgeLoading.current.dispatch(AppBridgeLoading.Action.STOP);
+      }
+    };
+  }, []);
+
+  return null;
+});