diff --git a/src/authWrapper.js b/src/authWrapper.js
index d76cb93..f85c48e 100644
--- a/src/authWrapper.js
+++ b/src/authWrapper.js
@@ -9,7 +9,7 @@ const defaults = {
 }
 
 export default (args) => {
-  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName } = {
+  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName, LoadingComponent } = {
     ...defaults,
     ...args
   }
@@ -19,11 +19,17 @@ export default (args) => {
     const displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component'
 
     class UserAuthWrapper extends Component {
+      constructor() {
+        super();
+        this.state = { loading: true };
+      }
 
       componentDidMount() {
         if (this.props.preAuthAction) {
           this.props.preAuthAction();
         }
+        // reset the loading state once component is mounted.
+        this.setState({loading: false})
       }
 
       static displayName = `${wrapperDisplayName}(${displayName})`;
@@ -39,7 +45,20 @@ export default (args) => {
 
       render() {
         const { isAuthenticated, isAuthenticating } = this.props
-        if (isAuthenticated) {
+        if (this.state.loading) {
+          /**
+           * If loading component is not provided then render the authenticating component as a fallback, Since mostly
+           * authenticating component will be a loader or a spinner.
+           */
+          return (
+            <React.Fragment>
+              {LoadingComponent
+                ? <LoadingComponent />
+                : <AuthenticatingComponent {...this.props} />
+              }
+            </React.Fragment>
+          )
+        }else if (isAuthenticated) {
           return <DecoratedComponent {...this.props} />
         } else if (isAuthenticating) {
           return <AuthenticatingComponent {...this.props} />