Loading spinner and implementations

src/actions/userAction.js

@@ -276,6 +276,7 @@ export const getMyDetails = () => async (dispatch) => {
 export const updateUser = (user, history) => async (dispatch, getState) => {
   try {
     dispatch({ type: USER_UPDATE_REQUEST })
+    dispatch({ type: USER_DETAILS_REQUEST })
     const { userLogin: { userInfo } } = getState()
     const userProfileFormData = new FormData()
     userProfileFormData.append('firstName', user.firstName)

src/components/button/Button.jsx

@@ -1,16 +1,20 @@
 import React from 'react'
 import './Button.scss'
+import ComponentLoadingWrapper from '../loadingWrapper/ComponentLoadingWrapper'
 
-const Button = ({ name, onClick, disabled = false, className }) => {
+const Button = ({ name, onClick, disabled = false, className, loadingState }) => {
   return (
-    <button
-      type='submit'
-      className={`btn-default ${className}`}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {name}
-    </button>
+    <div className='btn-container'>
+      <button
+        type='submit'
+        className={`btn-default ${className}`}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {name}
+      </button>
+      <ComponentLoadingWrapper loadingState={loadingState} />
+    </div>
   )
 }
 

src/components/button/Button.scss

@@ -1,3 +1,11 @@
+.btn-container {
+  position: relative;
+  height: 100%;
+  width: auto !important;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
 .btn-default {
   align-items: center;
   justify-content: center;

src/components/listView/ListView.jsx

@@ -2,28 +2,32 @@ import { useState } from 'react'
 import CardLayout from '../../layout/cardLayout/CardLayout'
 import useSizeFinder from '../../utils/sizeFinder'
 import './ListView.scss'
+import ComponentLoadingWrapper from '../loadingWrapper/ComponentLoadingWrapper'
 
-const ListView = ({ data, title, setNewCollection, setModalActive, modalActive }) => {
+const ListView = ({ data, title, setNewCollection, setModalActive, modalActive, loadingState }) => {
   const windowWidth = useSizeFinder()
   return (
     <>
       <div className='listview-container'>
-        <h4>{title}</h4>
-        {
-          windowWidth > 1000
-            ? data && data.map(item => {
-                return (
-                  <ListViewCardComponent item={item} modalActive={modalActive} setModalActive={setModalActive} />
-                )
-              })
-            : <CardLayout data={data}>
-              {data && data.map(item => {
-                return (
-                  <ListViewCardComponent item={item} modalActive={modalActive} setModalActive={setModalActive} />
-                )
-              })}
-              </CardLayout>
-        }
+        <ComponentLoadingWrapper loadingState={loadingState}>
+          <h4>{title}</h4>
+          {
+            windowWidth > 1000
+              ? data && data.map(item => {
+                  return (
+                    <ListViewCardComponent item={item} modalActive={modalActive} setModalActive={setModalActive} />
+                  )
+                })
+              : <CardLayout data={data}>
+                {data && data.map(item => {
+                  return (
+                    <ListViewCardComponent item={item} modalActive={modalActive} setModalActive={setModalActive} />
+                  )
+                })}
+                </CardLayout>
+          }
+        </ComponentLoadingWrapper>
+
       </div>
     </>
   )

src/components/listView/ListView.scss

@@ -1,3 +1,7 @@
+.list-container {
+  position: relative;
+}
+
 .listview-container > h4 {
   width: 100%;
   margin-bottom: 16px;

src/components/loadingWrapper/ComponentLoadingWrapper.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import './ComponentLoadingWrapper.scss'
+import { ReactComponent as Lock } from '../../assets/images/minus-circle-outline.svg'
+
+// Wrapper function for loading spinner
+// Pass loading state to this component as props 'loadingState'
+const ComponentLoadingWrapper = ({ loadingState = false, children }) => {
+  return (
+    <>
+      {loadingState &&
+        <div className='component-loading-container'>
+          <div className='component-loading-wrapper'>
+            <Lock className='component-loading' />
+          </div>
+        </div>}
+      {children}
+    </>
+  )
+}
+
+export default ComponentLoadingWrapper

src/components/loadingWrapper/ComponentLoadingWrapper.scss

@@ -0,0 +1,37 @@
+.component-loading-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+
+    .component-loading-wrapper {
+        width: 100px;
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        @keyframes spin-anim {
+            0% {
+                transform: rotate( 0deg );
+            }
+            100% {
+                transform: rotate( 360deg );
+            }
+        }
+
+        .component-loading {
+            color: var(--primary-white);
+            animation: spin-anim 1s linear infinite;
+            height: 50px;
+            width: 50px;
+        }
+    }
+
+}

src/components/loadingWrapper/LoadingWrapper.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import './LoadingWrapper.scss'
+import { ReactComponent as Lock } from '../../assets/images/minus-circle-outline.svg'
+
+// Wrapper function for loading spinner
+// Pass loading state to this component as props 'loadingState'
+const LoadingWrapper = ({ loadingState = true, children }) => {
+  return (
+    <>
+      {loadingState &&
+        <div className='loading-container'>
+          <div className='loading-wrapper'>
+            <Lock className='loading' />
+          </div>
+        </div>}
+      {children}
+    </>
+  )
+}
+
+export default LoadingWrapper

src/components/loadingWrapper/LoadingWrapper.scss

@@ -0,0 +1,38 @@
+.loading-container {
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100vw;
+    height: 100vh;
+    background: var(--background-color);
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+
+    .loading-wrapper {
+        width: 100px;
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        @keyframes spin-anim {
+            0% {
+                transform: rotate( 0deg );
+            }
+            100% {
+                transform: rotate( 360deg );
+            }
+        }
+
+        .loading {
+            color: var(--primary-white);
+            animation: spin-anim 1s linear infinite;
+            height: 50px;
+            width: 50px;
+        }
+    }
+
+}

src/screens/congratulation/CongratulationScreen.jsx

@@ -33,7 +33,7 @@ function CongratulationScreen () {
   })
 
   const userDetails = useSelector((state) => state.userDetails)
-  const { user } = userDetails
+  const { user, loading } = userDetails
   const onSubmit = ({ firstName, lastName, phone, birthday, email }) => {
     const attachments = profileImage
     dispatch(
@@ -140,6 +140,7 @@ function CongratulationScreen () {
                       <Button
                         name='Continue'
                         onClick={handleSubmit(onSubmit)}
+                        loadingState={loading}
                       />
                     </div>
                   </div>

src/screens/dashboard/MyProfile.jsx

@@ -12,6 +12,7 @@ import { getMyDetails } from '../../actions/userAction'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom/cjs/react-router-dom.min'
 import VerificationModal from '../../components/verificationModal/VerificationModal'
+import LoadingWrapper from '../../components/loadingWrapper/LoadingWrapper'
 
 function MyProfile () {
   const [showEmailVerificationModal, setShowEmailVerificationModal] = useState(false)
@@ -48,41 +49,33 @@ function MyProfile () {
     setShowPhoneVerificationModal(bool)
   }
   return (
-    <>
+    <LoadingWrapper loadingState={loading}>
       {
-      loading
-        ? <div><p>Loading...</p></div>
-        : (
-          <>
-            {
-            showEmailVerificationModal &&
-              <VerificationModal type='email' clickHandler={emailClickHandler} />
-            }
-            {
-            showPhoneVerificationModal &&
-              <VerificationModal type='phone' clickHandler={phoneClickHandler} />
-            }
-            <DashboardLayout title='My Profile'>
-              <div className='x10-4-0-my-personals'>
-                <div className='flex-col-2'>
-                  <div className='frame-2923'>
-                    <BackButton location='/dashboard' />
-                  </div>
-                  <div className='profile border-1px-onyx'>
-                    <div className='profile-info'>
-                      <PersonalInformation user={user} />
-                      <ContactInformation user={user} verification={verification} />
-                      <AdditionalInformation user={user} />
-                    </div>
-                    <EditInformation clickHandler={editUserInformation} image={user?.attachments && process.env.REACT_APP_CDN_BASE_URL + '/attachments/' + user.attachments} />
-                  </div>
-                </div>
+        showEmailVerificationModal &&
+          <VerificationModal type='email' clickHandler={emailClickHandler} />
+        }
+      {
+        showPhoneVerificationModal &&
+          <VerificationModal type='phone' clickHandler={phoneClickHandler} />
+        }
+      <DashboardLayout title='My Profile'>
+        <div className='x10-4-0-my-personals'>
+          <div className='flex-col-2'>
+            <div className='frame-2923'>
+              <BackButton location='/dashboard' />
+            </div>
+            <div className='profile border-1px-onyx'>
+              <div className='profile-info'>
+                <PersonalInformation user={user} />
+                <ContactInformation user={user} verification={verification} />
+                <AdditionalInformation user={user} />
               </div>
-            </DashboardLayout>
-          </>
-          )
-    }
-    </>
+              <EditInformation clickHandler={editUserInformation} image={user?.attachments && process.env.REACT_APP_CDN_BASE_URL + '/attachments/' + user.attachments} />
+            </div>
+          </div>
+        </div>
+      </DashboardLayout>
+    </LoadingWrapper>
   )
 }
 

src/screens/library/Library.jsx

@@ -12,6 +12,7 @@ import SubHeader from '../../components/subHeader/SubHeader'
 import { useHistory } from 'react-router-dom'
 import useGetFetchData from '../../utils/useGetFetchData'
 import { GET_LIBRARY } from '../../utils/urlConstants'
+import ComponentLoadingWrapper from '../../components/loadingWrapper/ComponentLoadingWrapper'
 
 const Library = () => {
   const userLogin = useSelector((state) => state.userLogin)
@@ -53,6 +54,7 @@ const Library = () => {
                 setNewCollection={setNewCollection}
                 modalActive={modalActive}
                 setModalActive={setModalActive}
+                // loadingState={resourceList.loading}
               />
             </div>
           ))}
@@ -72,20 +74,21 @@ const LibraryCategory = ({ title, search, setNewCollection, modalActive, setModa
     GET_LIBRARY + '?pageNumber=' + pageNumber + '&category=' + title.toLowerCase() + '&search=' + (search || ''),
     { title, pageNumber, search }
   )
-  if (isLoading) {
-    return (<div>Loading...</div>)
-  }
+  // if (isLoading) {
+  //   return (<div>Loading...</div>)
+  // }
   return (
-    libraryData?.resources.length > 0
-      ? <>
+    libraryData?.resources?.length > 0
+      ? <ComponentLoadingWrapper loadingState={isLoading}>
         <ListView
           title={title} data={libraryData?.resources}
           setNewCollection={setNewCollection}
           modalActive={modalActive}
           setModalActive={setModalActive}
+          loadingState={isLoading}
         />
         <Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} resourceList={libraryData} />
-      </> : <></>
+      </ComponentLoadingWrapper> : <ComponentLoadingWrapper loadingState={isLoading} />
   )
 }