intro loader implemented

src/routes/Intro/Intro.js

@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { useRouteFocused } = require('stremio-router');
+const { Modal, useRouteFocused } = require('stremio-router');
 const { Button, useBinaryState, useCoreEvent } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const CredentialsTextInput = require('./CredentialsTextInput');
@@ -24,6 +24,7 @@ const Intro = ({ queryParams }) => {
     const marketingRef = React.useRef();
     const errorRef = React.useRef();
     const [passwordRestModalOpen, openPasswordRestModal, closePasswordResetModal] = useBinaryState(false);
+    const [loaderModalOpen, openLoaderModal, closeLoaderModal] = useBinaryState(false);
     const [state, dispatch] = React.useReducer(
         (state, action) => {
             switch (action.type) {
@@ -132,6 +133,8 @@ const Intro = ({ queryParams }) => {
             dispatch({ type: 'error', error: 'Invalid password' });
             return;
         }
+        dispatch({ type: 'error', error: '' });
+        openLoaderModal();
         core.dispatch({
             action: 'Ctx',
             args: {
@@ -178,6 +181,7 @@ const Intro = ({ queryParams }) => {
             dispatch({ type: 'error', error: 'You must accept the Privacy Policy' });
             return;
         }
+        openLoaderModal();
         core.dispatch({
             action: 'Ctx',
             args: {
@@ -252,6 +256,7 @@ const Intro = ({ queryParams }) => {
     }, [queryParams]);
     React.useEffect(() => {
         if (typeof state.error === 'string' && state.error.length > 0) {
+            closeLoaderModal();
             errorRef.current.scrollIntoView();
         }
     }, [state.error]);
@@ -355,6 +360,15 @@ const Intro = ({ queryParams }) => {
                     :
                     null
             }
+            {
+                loaderModalOpen ?
+                    <Modal className={styles['modal-container']}>
+                        <div className={styles['label']}>Authenticating...</div>
+                        <Icon className={styles['icon']} icon={'ic_user'} />
+                    </Modal>
+                    :
+                    null
+            }
         </div>
     );
 };

src/routes/Intro/styles.less

@@ -149,4 +149,37 @@
             }
         }
     }
+}
+
+.modal-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-background80);
+
+    .label {
+        margin-bottom: 1rem;
+        font-size: 2rem;
+        color: var(--color-surfacelighter);
+        animation: 1s linear infinite alternate flash;
+    }
+
+    .icon {
+        flex: none;
+        width: 5rem;
+        height: 5rem;
+        fill: var(--color-surfacelighter);
+        animation: 1s linear infinite alternate flash;
+    }
+
+    @keyframes flash {
+        0% {
+            opacity: 0.4;
+        }
+
+        100% {
+            opacity: 1.0;
+        }
+    }
 }