Revert "Performance Optimization. (#141)" (#169)

This reverts commit c528eb1768.

package-lock.json

@@ -4691,31 +4691,6 @@
         }
       }
     },
-    "@loadable/component": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.14.1.tgz",
-      "integrity": "sha512-UQBZfZrp1FLTf8RNhljXNHFNY4QhAA1L2+GOEeABBFre9TD0aFyQh3Sai5QxcOfy+FTbjIfti5iHaNRR7yUzEQ==",
-      "requires": {
-        "@babel/runtime": "^7.7.7",
-        "hoist-non-react-statics": "^3.3.1",
-        "react-is": "^16.12.0"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.12.18",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.18.tgz",
-          "integrity": "sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "regenerator-runtime": {
-          "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-        }
-      }
-    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

package.json

@@ -44,7 +44,6 @@
     "@fortawesome/free-regular-svg-icons": "5.15.1",
     "@fortawesome/free-solid-svg-icons": "5.15.1",
     "@fortawesome/react-fontawesome": "0.1.13",
-    "@loadable/component": "^5.14.1",
     "babel-polyfill": "6.26.0",
     "classnames": "^2.2.6",
     "extract-react-intl-messages": "^4.1.1",

src/common-components/UnAuthOnlyRoute.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import { DEFAULT_REDIRECT_URL } from '../data/constants';
+
+/**
+ * This wrapper redirects the requester to our default redirect url if they are
+ * already authenticated.
+ */
+const UnAuthOnlyRoute = (props) => {
+  const { authenticatedUser, config } = React.useContext(AppContext);
+
+  if (authenticatedUser) {
+    global.location.href = config.LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+    return null;
+  }
+
+  return <Route {...props} />;
+};
+
+export default UnAuthOnlyRoute;

src/common-components/UnAuthenticatedRoute.jsx

@@ -1,36 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useEffect } from 'react';
-import { Route, useRouteMatch } from 'react-router-dom';
-import { AppContext } from '@edx/frontend-platform/react';
-import { sendPageEvent } from '@edx/frontend-platform/analytics';
-
-import { DEFAULT_REDIRECT_URL } from '../data/constants';
-
-/**
- * This wrapper redirects the requester to our default redirect url if they are
- * already authenticated.
- */
-const UnAuthenticatedRoute = (props) => {
-  const { authenticatedUser, config } = React.useContext(AppContext);
-  const match = useRouteMatch({
-    path: props.path,
-    exact: props.exact,
-    strict: props.strict,
-    sensitive: props.sensitive,
-  });
-
-  if (authenticatedUser) {
-    global.location.href = config.LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
-    return null;
-  }
-
-  useEffect(() => {
-    if (match) {
-      sendPageEvent('login_and_registration', props.path.replace('/', ''));
-    }
-  }, [match]);
-
-  return <Route {...props} />;
-};
-
-export default UnAuthenticatedRoute;

src/common-components/index.jsx

@@ -1,7 +1,7 @@
 export { default as HeaderLayout } from './HeaderLayout';
 export { default as RedirectLogistration } from './RedirectLogistration';
 export { default as registerIcons } from './RegisterFaIcons';
-export { default as UnAuthenticatedRoute } from './UnAuthenticatedRoute';
+export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as SocialAuthProviders } from './SocialAuthProviders';
 export { default as ThirdPartyAuthAlert } from './ThirdPartyAuthAlert';
@@ -12,4 +12,3 @@ export { default as APIFailureMessage } from './APIFailureMessage';
 export { default as reducer } from './data/reducers';
 export { default as saga } from './data/sagas';
 export { storeName } from './data/selectors';
-export { default as Spinner } from './Spinner';

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -1,36 +1,31 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import { mount } from 'enzyme';
 import { BrowserRouter as Router, MemoryRouter, Switch } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
-import * as analytics from '@edx/frontend-platform/analytics';
 
-import { UnAuthenticatedRoute } from '..';
-import { DEFAULT_REDIRECT_URL, LOGIN_PAGE, REGISTER_PAGE } from '../../data/constants';
+import { UnAuthOnlyRoute } from '..';
+import { DEFAULT_REDIRECT_URL, LOGIN_PAGE } from '../../data/constants';
 
 const RRD = require('react-router-dom');
 // Just render plain div with its children
+// eslint-disable-next-line react/prop-types
 RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
 module.exports = RRD;
 
-jest.mock('@edx/frontend-platform/analytics');
-analytics.sendPageEvent = jest.fn();
-
 const TestApp = () => (
   <Router>
     <div>
       <Switch>
-        <UnAuthenticatedRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
-        <UnAuthenticatedRoute path={REGISTER_PAGE} render={() => (<span>Register Page</span>)} />
+        <UnAuthOnlyRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
       </Switch>
     </div>
   </Router>
 );
 
-describe('UnAuthenticatedRoute', () => {
-  const routerWrapper = (initialEntry) => (
-    <MemoryRouter initialEntries={[initialEntry || LOGIN_PAGE]}>
+describe('UnAuthOnlyRoute', () => {
+  const routerWrapper = () => (
+    <MemoryRouter initialEntries={[LOGIN_PAGE]}>
       <TestApp />
     </MemoryRouter>
   );
@@ -65,14 +60,4 @@ describe('UnAuthenticatedRoute', () => {
 
     expect(wrapper.find('span').text()).toBe('Login Page');
   });
-
-  it('send page event when login page is rendered', () => {
-    mount(routerWrapper());
-    expect(analytics.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
-  });
-
-  it('send page event when register page is rendered', () => {
-    mount(routerWrapper(REGISTER_PAGE));
-    expect(analytics.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register');
-  });
 });

src/forgot-password/ForgotPasswordPage.jsx

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
+import { sendPageEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Alert,
@@ -63,6 +64,8 @@ const ForgotPasswordPage = (props) => {
     return error;
   };
 
+  sendPageEvent('login_and_registration', 'reset');
+
   return (
     <Formik
       initialValues={{ email: '' }}

src/forgot-password/LoadableForgotPasswordPage.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import loadable from '@loadable/component';
-import Spinner from '../common-components/Spinner';
-
-const LoadableComponent = loadable(() => import('./ForgotPasswordPage.jsx'), {
-  fallback: <Spinner />,
-});
-
-const LoadableForgotPasswordPage = () => <LoadableComponent />;
-
-export default LoadableForgotPasswordPage;

src/forgot-password/index.js

@@ -1,4 +1,4 @@
-export { default } from './LoadableForgotPasswordPage';
+export { default } from './ForgotPasswordPage';
 export { default as reducer } from './data/reducers';
 export { FORGOT_PASSWORD } from './data/actions';
 export { default as saga } from './data/sagas';

src/index.jsx

@@ -7,19 +7,20 @@ import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Redirect, Route, Switch } from 'react-router-dom';
+
 import { messages as headerMessages } from '@edx/frontend-component-header';
 
 import configureStore from './data/configureStore';
-import LoadableForgotPasswordPage from './forgot-password';
-import LoadableRegistrationPage from './register';
-import LoadableLoginPage from './login';
-import LoadableResetPasswordPage from './reset-password';
+import { RegistrationPage } from './register';
+import { LoginPage } from './login';
 import {
   LOGIN_PAGE, PAGE_NOT_FOUND, REGISTER_PAGE, RESET_PAGE, PASSWORD_RESET_CONFIRM,
 } from './data/constants';
+import ForgotPasswordPage from './forgot-password';
 import {
-  HeaderLayout, UnAuthenticatedRoute, registerIcons, NotFoundPage,
+  HeaderLayout, UnAuthOnlyRoute, registerIcons, NotFoundPage,
 } from './common-components';
+import ResetPasswordPage from './reset-password';
 import appMessages from './i18n';
 
 import './index.scss';
@@ -34,10 +35,10 @@ subscribe(APP_READY, () => {
           <Route exact path="/">
             <Redirect to={PAGE_NOT_FOUND} />
           </Route>
-          <UnAuthenticatedRoute exact path={LOGIN_PAGE} component={LoadableLoginPage} />
-          <UnAuthenticatedRoute exact path={REGISTER_PAGE} component={LoadableRegistrationPage} />
-          <UnAuthenticatedRoute exact path={RESET_PAGE} component={LoadableForgotPasswordPage} />
-          <Route exact path={PASSWORD_RESET_CONFIRM} component={LoadableResetPasswordPage} />
+          <UnAuthOnlyRoute exact path={LOGIN_PAGE} component={LoginPage} />
+          <UnAuthOnlyRoute exact path={REGISTER_PAGE} component={RegistrationPage} />
+          <UnAuthOnlyRoute exact path={RESET_PAGE} component={ForgotPasswordPage} />
+          <Route exact path={PASSWORD_RESET_CONFIRM} component={ResetPasswordPage} />
           <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
           <Route path="*">
             <Redirect to={PAGE_NOT_FOUND} />

src/login/LoadableLoginPage.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import loadable from '@loadable/component';
-import Spinner from '../common-components/Spinner';
-
-const LoadableComponent = loadable(() => import('./LoginPage.jsx'), {
-  fallback: <Spinner />,
-});
-
-const LoadableLoginPage = () => <LoadableComponent />;
-
-export default LoadableLoginPage;

src/login/LoginHelpLinks.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -30,17 +29,19 @@ const LoginHelpLinks = (props) => {
   };
 
   const forgotPasswordLink = () => (
-    <Link
-      to={RESET_PAGE}
+    <Hyperlink
+      className="field-link"
+      destination={RESET_PAGE}
       onClick={handleForgotPasswordLinkClickEvent}
     >
       {intl.formatMessage(messages['forgot.password.link'])}
-    </Link>
+    </Hyperlink>
   );
 
   const signUpLink = () => (
-    <Link to={REGISTER_PAGE}>{intl.formatMessage(messages['register.link'])}</Link>
-
+    <Hyperlink className="field-link" destination={REGISTER_PAGE}>
+      {intl.formatMessage(messages['register.link'])}
+    </Hyperlink>
   );
 
   const loginIssueSupportURL = (config) => (config.LOGIN_ISSUE_SUPPORT_LINK

src/login/LoginPage.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Skeleton from 'react-loading-skeleton';
-import { Link } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -38,6 +37,7 @@ class LoginPage extends React.Component {
   constructor(props, context) {
     super(props, context);
 
+    sendPageEvent('login_and_registration', 'login');
     this.state = {
       password: '',
       email: '',
@@ -197,13 +197,9 @@ class LoginPage extends React.Component {
               ) : null}
               <p>
                 {intl.formatMessage(messages['first.time.here'])}
-                <Link
-                  to={REGISTER_PAGE}
-                  className="text-info ml-1"
-                  onClick={this.handleCreateAccountLinkClickEvent}
-                >
-                  {intl.formatMessage(messages['create.an.account'])}
-                </Link>
+                <Hyperlink className="ml-1" destination={REGISTER_PAGE} onClick={this.handleCreateAccountLinkClickEvent}>
+                  {intl.formatMessage(messages['create.an.account'])}.
+                </Hyperlink>
               </p>
               <hr className="mt-0 border-gray-200" />
               <h3 className="text-left mt-2 mb-3">

src/login/index.js

@@ -1,4 +1,4 @@
-export { default } from './LoadableLoginPage';
+export { default as LoginPage } from './LoginPage';
 export { default as reducer } from './data/reducers';
 export { default as saga } from './data/sagas';
 export { storeName } from './data/selectors';

src/login/messages.jsx

@@ -48,7 +48,7 @@ const messages = defineMessages({
   },
   'create.an.account': {
     id: 'create.an.account',
-    defaultMessage: 'Create an account.',
+    defaultMessage: 'Create an account',
     description: 'Message on button to return to register page',
   },
   'or.sign.in.with': {

src/login/tests/LoginHelpLinks.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import * as analytics from '@edx/frontend-platform/analytics';
 import { mount } from 'enzyme';
@@ -21,9 +20,7 @@ describe('LoginHelpLinks', () => {
 
   const reduxWrapper = children => (
     <IntlProvider locale="en">
-      <Router>
-        {children}
-      </Router>
+      {children}
     </IntlProvider>
   );
 

src/login/tests/LoginPage.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import configureStore from 'redux-mock-store';
@@ -19,6 +18,7 @@ import { COMPLETE_STATE, PENDING_STATE } from '../../data/constants';
 jest.mock('@edx/frontend-platform/analytics');
 
 analytics.sendTrackEvent = jest.fn();
+analytics.sendPageEvent = jest.fn();
 
 const IntlLoginFailureMessage = injectIntl(LoginFailureMessage);
 const IntlLoginPage = injectIntl(LoginPage);
@@ -61,11 +61,7 @@ describe('LoginPage', () => {
 
   const reduxWrapper = children => (
     <IntlProvider locale="en">
-      <Provider store={store}>
-        <Router>
-          {children}
-        </Router>
-      </Provider>
+      <Provider store={store}>{children}</Provider>
     </IntlProvider>
   );
 
@@ -381,6 +377,11 @@ describe('LoginPage', () => {
     expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.bi.register_form.toggled', { category: 'user-engagement' });
   });
 
+  it('send page event when login page is rendered', () => {
+    mount(reduxWrapper(<IntlLoginPage {...props} />));
+    expect(analytics.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
+  });
+
   it('send tracking and page events when institutional button is clicked', () => {
     store = mockStore({
       ...initialState,

src/login/tests/__snapshots__/LoginPage.test.jsx.snap

@@ -13,11 +13,13 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
       <p>
         First time here?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/register"
           onClick={[Function]}
+          target="_self"
         >
-          Create an account.
+          Create an account
+          .
         </a>
       </p>
       <hr
@@ -197,11 +199,13 @@ exports[`LoginPage should match default section snapshot 1`] = `
       <p>
         First time here?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/register"
           onClick={[Function]}
+          target="_self"
         >
-          Create an account.
+          Create an account
+          .
         </a>
       </p>
       <hr
@@ -383,11 +387,13 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
       <p>
         First time here?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/register"
           onClick={[Function]}
+          target="_self"
         >
-          Create an account.
+          Create an account
+          .
         </a>
       </p>
       <hr
@@ -531,11 +537,13 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
       <p>
         First time here?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/register"
           onClick={[Function]}
+          target="_self"
         >
-          Create an account.
+          Create an account
+          .
         </a>
       </p>
       <hr
@@ -716,11 +724,13 @@ exports[`LoginPage should show error message 1`] = `
       <p>
         First time here?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/register"
           onClick={[Function]}
+          target="_self"
         >
-          Create an account.
+          Create an account
+          .
         </a>
       </p>
       <hr

src/register/LoadableRegistrationPage.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import loadable from '@loadable/component';
-import Spinner from '../common-components/Spinner';
-
-const LoadableComponent = loadable(() => import('./RegistrationPage.jsx'), {
-  fallback: <Spinner />,
-});
-
-const LoadableRegistrationPage = () => <LoadableComponent />;
-
-export default LoadableRegistrationPage;

src/register/RegistrationPage.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import camelCase from 'lodash.camelcase';
 import { connect } from 'react-redux';
@@ -7,7 +6,7 @@ import Skeleton from 'react-loading-skeleton';
 import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
   injectIntl, intlShape, getCountryList, getLocale, FormattedMessage,
 } from '@edx/frontend-platform/i18n';
@@ -37,7 +36,9 @@ class RegistrationPage extends React.Component {
   constructor(props, context) {
     super(props, context);
 
+    sendPageEvent('login_and_registration', 'register');
     this.intl = props.intl;
+
     this.state = {
       email: '',
       name: '',
@@ -435,13 +436,9 @@ class RegistrationPage extends React.Component {
               )}
               <p>
                 {intl.formatMessage(messages['already.have.an.edx.account'])}
-                <Link
-                  to={LOGIN_PAGE}
-                  className="text-info ml-1"
-                  onClick={this.handleLoginLinkClickEvent}
-                >
+                <Hyperlink className="ml-1" destination={LOGIN_PAGE} onClick={this.handleLoginLinkClickEvent}>
                   {intl.formatMessage(messages['sign.in.hyperlink'])}
-                </Link>
+                </Hyperlink>
               </p>
               <hr className="mb-3 border-gray-200" />
               <h3 className="mb-3">{intl.formatMessage(messages['create.a.new.account'])}</h3>

src/register/index.js

@@ -1,4 +1,4 @@
-export { default } from './LoadableRegistrationPage';
+export { default as RegistrationPage } from './RegistrationPage';
 export { default as reducer } from './data/reducers';
 export { default as saga } from './data/sagas';
 export { storeName } from './data/selectors';

src/register/tests/RegistrationPage.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import configureStore from 'redux-mock-store';
@@ -19,6 +18,7 @@ import { fetchRealtimeValidations, registerNewUser } from '../data/actions';
 jest.mock('@edx/frontend-platform/analytics');
 
 analytics.sendTrackEvent = jest.fn();
+analytics.sendPageEvent = jest.fn();
 
 const IntlRegistrationPage = injectIntl(RegistrationPage);
 const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
@@ -76,11 +76,7 @@ describe('RegistrationPageTests', () => {
 
   const reduxWrapper = children => (
     <IntlProvider locale="en">
-      <Provider store={store}>
-        <Router>
-          {children}
-        </Router>
-      </Provider>
+      <Provider store={store}>{children}</Provider>
     </IntlProvider>
   );
 
@@ -133,6 +129,11 @@ describe('RegistrationPageTests', () => {
     expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.bi.login_form.toggled', { category: 'user-engagement' });
   });
 
+  it('send page event when register page is rendered', () => {
+    mount(reduxWrapper(<IntlRegistrationPage {...props} />));
+    expect(analytics.sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register');
+  });
+
   it('should show optional fields section on optional check enabled', () => {
     const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
     registrationPage.find('input#optional').simulate('change', { target: { checked: true } });

src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap

@@ -13,9 +13,10 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
       <p>
         Already have an edX account?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/login"
           onClick={[Function]}
+          target="_self"
         >
           Sign in.
         </a>
@@ -1561,9 +1562,10 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
       <p>
         Already have an edX account?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/login"
           onClick={[Function]}
+          target="_self"
         >
           Sign in.
         </a>
@@ -3070,9 +3072,10 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
       <p>
         Already have an edX account?
         <a
-          className="text-info ml-1"
+          className="ml-1"
           href="/login"
           onClick={[Function]}
+          target="_self"
         >
           Sign in.
         </a>

src/reset-password/LoadableResetPasswordPage.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import loadable from '@loadable/component';
-import Spinner from '../common-components/Spinner';
-
-const LoadableComponent = loadable(() => import('./ResetPasswordPage.jsx'), {
-  fallback: <Spinner />,
-});
-
-const LoadableResetPasswordPage = () => <LoadableComponent />;
-
-export default LoadableResetPasswordPage;

src/reset-password/ResetPasswordPage.jsx

@@ -18,8 +18,8 @@ import ResetSuccessMessage from './ResetSuccess';
 import {
   AuthnValidationFormGroup,
   APIFailureMessage,
-  Spinner,
 } from '../common-components';
+import Spinner from './Spinner';
 import { API_RATELIMIT_ERROR, INTERNAL_SERVER_ERROR } from '../data/constants';
 
 const ResetPasswordPage = (props) => {

src/reset-password/index.js

@@ -1,4 +1,4 @@
-export { default } from './LoadableResetPasswordPage';
+export { default } from './ResetPasswordPage';
 export { default as reducer } from './data/reducers';
 export { RESET_PASSWORD } from './data/actions';
 export { default as saga } from './data/sagas';