Rename loadingComponent -> loadingElement

OKTA-415463
<<<Jenkins Check-In of Tested SHA: 0a1fa36 for [email protected]>>>
Artifact: okta-react
Files changed count: 6
PR Link: "okta#153"

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ### Features
 
-- [#67](https://github.com/okta/okta-react/pull/67) Adds `loadingComponent` prop to `LoginCallback` component
+- [#67](https://github.com/okta/okta-react/pull/67) Adds `loadingElement` prop to `LoginCallback` component
 
 ### Bug Fixes
 

README.md

@@ -484,6 +484,10 @@ As with `Route` from `react-router-dom`, `<SecureRoute>` can take one of:
 
 By default, LoginCallback will display any errors from `authState.error`.  If you wish to customise the display of such error messages, you can pass your own component as an `errorComponent` prop to `<LoginCallback>`.  The `authState.error` value will be passed to the `errorComponent` as the `error` prop.
 
+#### loadingElement
+
+By default, LoginCallback will display nothing during handling the callback. If you wish to customize this, you can pass your React element (not component) as `loadingElement` prop to `<LoginCallback>`. Example: `<p>Loading...</p>`
+
 #### onAuthResume
 
 When an external auth (such as a social IDP) redirects back to your application AND your Okta sign-in policies require additional authentication factors before authentication is complete, the redirect to your application redirectUri callback will be an `interaction_required` error.  

src/LoginCallback.tsx

@@ -17,10 +17,10 @@ import OktaError from './OktaError';
 interface LoginCallbackProps {
   errorComponent?: React.ComponentType<{ error: Error }>;
   onAuthResume?: OnAuthResumeFunction;
-  loadingComponent?: React.ReactElement;
+  loadingElement?: React.ReactElement;
 }
 
-const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingComponent = null, onAuthResume }) => { 
+const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingElement = null, onAuthResume }) => { 
   const { oktaAuth, authState } = useOktaAuth();
   const [callbackError, setCallbackError] = React.useState(null);
 
@@ -45,7 +45,7 @@ const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingCo
     return <ErrorReporter error={displayError}/>;
   }
 
-  return loadingComponent;
+  return loadingElement;
 };
 
 export default LoginCallback;

test/e2e/harness/e2e/page-objects/login-callback.po.js

@@ -15,10 +15,10 @@ import { Util } from '../util';
 
 export class LoginCallbackPage {
     waitUntilVisible() {
-      Util.waitElement(this.loadingComponent());
+      Util.waitElement(this.loadingElement());
     }
 
-    loadingComponent() {
+    loadingElement() {
       return element(by.id('login-callback-loading'));
     }
 

test/e2e/harness/src/App.tsx

@@ -58,7 +58,7 @@ const App: React.FC<{
             <LoginCallback 
               {...props} 
               onAuthResume={ onAuthResume } 
-              loadingComponent={ <p id='login-callback-loading'>Loading...</p> }
+              loadingElement={ <p id='login-callback-loading'>Loading...</p> }
             />
           } />
           <Route path='/' component={Home} />

test/jest/loginCallback.test.tsx

@@ -185,41 +185,41 @@ describe('<LoginCallback />', () => {
       expect(wrapper.text()).toBe('');
     });
 
-    it('custom loading component can be passed to render during loading', () => {
-      const MyLoadingComponent = (<p>loading...</p>);
+    it('custom loading element can be passed to render during loading', () => {
+      const MyLoadingElement = (<p>loading...</p>);
 
       const wrapper = mount(
         <Security {...mockProps}>
-          <LoginCallback loadingComponent={MyLoadingComponent}/>
+          <LoginCallback loadingElement={MyLoadingElement}/>
         </Security>
       );
       expect(wrapper.text()).toBe('loading...');
     });
 
-    it('does not render loading component on error', () => {
+    it('does not render loading element on error', () => {
       authState = {
         isAuthenticated: true,
         error: new Error('oh drat!')
       };
-      const MyLoadingComponent = (<p>loading...</p>);
+      const MyLoadingElement = (<p>loading...</p>);
 
       const wrapper = mount(
         <Security {...mockProps}>
-          <LoginCallback loadingComponent={MyLoadingComponent}/>
+          <LoginCallback loadingElement={MyLoadingElement}/>
         </Security>
       );
       expect(wrapper.text()).toBe('Error: oh drat!');
     });
 
-    it('renders loading component if onAuthResume is passed', async () => { 
+    it('renders loading element if onAuthResume is passed', async () => { 
       oktaAuth.isInteractionRequired = jest.fn().mockImplementation( () => true );
       const resumeFunction = jest.fn();
-      const MyLoadingComponent = (<p>loading...</p>);
+      const MyLoadingElement = (<p>loading...</p>);
       jest.spyOn(React, 'useEffect').mockImplementation(f => f())
 
       const wrapper = mount(
         <Security {...mockProps}>
-          <LoginCallback onAuthResume={resumeFunction} loadingComponent={MyLoadingComponent}/>
+          <LoginCallback onAuthResume={resumeFunction} loadingElement={MyLoadingElement}/>
         </Security>
       );
       expect(resumeFunction).toHaveBeenCalled();