From 394123704b86308c010b453c917453e5fd864ec0 Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Wed, 15 May 2019 13:03:09 -0400
Subject: [PATCH] Removed withContext from loading

changelog
---
 UNRELEASED-V4.md                   |  1 +
 src/components/Loading/Loading.tsx | 65 ++++++++++--------------------
 2 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/UNRELEASED-V4.md b/UNRELEASED-V4.md
index f02278be716..b116cf5ee90 100644
--- a/UNRELEASED-V4.md
+++ b/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))
 
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
index 4226fdec4a0..fcd6470b9ad 100644
--- a/src/components/Loading/Loading.tsx
+++ b/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;
+});