From 420c5b78ce9b7332c0dcd1d732c572272af28338 Mon Sep 17 00:00:00 2001
From: Abhishek Raj Pandey <bhishek_rajpandey@yahoo.com>
Date: Tue, 3 Aug 2021 11:57:24 +0545
Subject: [PATCH 1/6] loading spinner wrapper components

---
 .../ComponentLoadingWrapper.jsx               | 21 +++++++++++
 .../ComponentLoadingWrapper.scss              |  0
 .../loadingWrapper/LoadingWrapper.jsx         | 21 +++++++++++
 .../loadingWrapper/LoadingWrapper.scss        | 37 +++++++++++++++++++
 4 files changed, 79 insertions(+)
 create mode 100644 src/components/loadingWrapper/ComponentLoadingWrapper.jsx
 create mode 100644 src/components/loadingWrapper/ComponentLoadingWrapper.scss
 create mode 100644 src/components/loadingWrapper/LoadingWrapper.jsx
 create mode 100644 src/components/loadingWrapper/LoadingWrapper.scss

diff --git a/src/components/loadingWrapper/ComponentLoadingWrapper.jsx b/src/components/loadingWrapper/ComponentLoadingWrapper.jsx
new file mode 100644
index 000000000..b8410f7ff
--- /dev/null
+++ b/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 = true, children }) => {
+  return (
+    <div>
+      {loadingState &&
+        <div className='loading-spinner-container'>
+          <div className='loading-spinner-wrapper'>
+            <Lock className='loading-spinner' />
+          </div>
+        </div>}
+      {children}
+    </div>
+  )
+}
+
+export default ComponentLoadingWrapper
diff --git a/src/components/loadingWrapper/ComponentLoadingWrapper.scss b/src/components/loadingWrapper/ComponentLoadingWrapper.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/loadingWrapper/LoadingWrapper.jsx b/src/components/loadingWrapper/LoadingWrapper.jsx
new file mode 100644
index 000000000..e8cacfcc3
--- /dev/null
+++ b/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-spinner-container'>
+          <div className='loading-spinner-wrapper'>
+            <Lock className='loading-spinner' />
+          </div>
+        </div>}
+      {children}
+    </>
+  )
+}
+
+export default LoadingWrapper
diff --git a/src/components/loadingWrapper/LoadingWrapper.scss b/src/components/loadingWrapper/LoadingWrapper.scss
new file mode 100644
index 000000000..628ed32b1
--- /dev/null
+++ b/src/components/loadingWrapper/LoadingWrapper.scss
@@ -0,0 +1,37 @@
+.loading-spinner-container {
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100vw;
+    height: 100vh;
+    background: var(--background-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+
+    .loading-spinner-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-spinner {
+            color: var(--primary-white);
+            animation: spin-anim 3s linear infinite;
+            height: 50px;
+            width: 50px;
+        }
+    }
+
+}
\ No newline at end of file

From 0bafa839815dad45e8a85f61b3dd725e741b92e1 Mon Sep 17 00:00:00 2001
From: Abhishek Raj Pandey <bhishek_rajpandey@yahoo.com>
Date: Tue, 3 Aug 2021 12:44:20 +0545
Subject: [PATCH 2/6] page loading wrapper and component loading wrapper

---
 .../ComponentLoadingWrapper.jsx               | 10 ++---
 .../ComponentLoadingWrapper.scss              | 37 +++++++++++++++++++
 .../loadingWrapper/LoadingWrapper.jsx         |  6 +--
 .../loadingWrapper/LoadingWrapper.scss        |  2 +-
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/components/loadingWrapper/ComponentLoadingWrapper.jsx b/src/components/loadingWrapper/ComponentLoadingWrapper.jsx
index b8410f7ff..6df1b0b8e 100644
--- a/src/components/loadingWrapper/ComponentLoadingWrapper.jsx
+++ b/src/components/loadingWrapper/ComponentLoadingWrapper.jsx
@@ -6,15 +6,15 @@ import { ReactComponent as Lock } from '../../assets/images/minus-circle-outline
 // Pass loading state to this component as props 'loadingState'
 const ComponentLoadingWrapper = ({ loadingState = true, children }) => {
   return (
-    <div>
+    <>
       {loadingState &&
-        <div className='loading-spinner-container'>
-          <div className='loading-spinner-wrapper'>
-            <Lock className='loading-spinner' />
+        <div className='component-loading-container'>
+          <div className='component-loading-wrapper'>
+            <Lock className='component-loading' />
           </div>
         </div>}
       {children}
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/loadingWrapper/ComponentLoadingWrapper.scss b/src/components/loadingWrapper/ComponentLoadingWrapper.scss
index e69de29bb..50daa85f1 100644
--- a/src/components/loadingWrapper/ComponentLoadingWrapper.scss
+++ b/src/components/loadingWrapper/ComponentLoadingWrapper.scss
@@ -0,0 +1,37 @@
+.component-loading-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 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;
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/loadingWrapper/LoadingWrapper.jsx b/src/components/loadingWrapper/LoadingWrapper.jsx
index e8cacfcc3..a17016cb9 100644
--- a/src/components/loadingWrapper/LoadingWrapper.jsx
+++ b/src/components/loadingWrapper/LoadingWrapper.jsx
@@ -8,9 +8,9 @@ const LoadingWrapper = ({ loadingState = true, children }) => {
   return (
     <>
       {loadingState &&
-        <div className='loading-spinner-container'>
-          <div className='loading-spinner-wrapper'>
-            <Lock className='loading-spinner' />
+        <div className='loading-container'>
+          <div className='loading-wrapper'>
+            <Lock className='loading' />
           </div>
         </div>}
       {children}
diff --git a/src/components/loadingWrapper/LoadingWrapper.scss b/src/components/loadingWrapper/LoadingWrapper.scss
index 628ed32b1..5f05f8745 100644
--- a/src/components/loadingWrapper/LoadingWrapper.scss
+++ b/src/components/loadingWrapper/LoadingWrapper.scss
@@ -28,7 +28,7 @@
 
         .loading-spinner {
             color: var(--primary-white);
-            animation: spin-anim 3s linear infinite;
+            animation: spin-anim 1s linear infinite;
             height: 50px;
             width: 50px;
         }

From 432a3c1b6585321498cb7be93703542cc89870e4 Mon Sep 17 00:00:00 2001
From: Abhishek Raj Pandey <bhishek_rajpandey@yahoo.com>
Date: Tue, 3 Aug 2021 15:42:51 +0545
Subject: [PATCH 3/6] added loading wrapper functions on /myProfile, /library
 and /edit-information

---
 src/actions/userAction.js                     |  1 +
 src/components/button/Button.jsx              | 22 ++++---
 src/components/button/Button.scss             |  8 +++
 src/components/listView/ListView.jsx          | 38 ++++++------
 src/components/listView/ListView.scss         |  4 ++
 .../ComponentLoadingWrapper.jsx               |  2 +-
 .../loadingWrapper/LoadingWrapper.scss        |  6 +-
 .../congratulation/CongratulationScreen.jsx   |  3 +-
 src/screens/dashboard/MyProfile.jsx           | 59 ++++++++-----------
 src/screens/library/Library.jsx               |  1 +
 10 files changed, 80 insertions(+), 64 deletions(-)

diff --git a/src/actions/userAction.js b/src/actions/userAction.js
index eb10da583..c203fc71f 100644
--- a/src/actions/userAction.js
+++ b/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)
diff --git a/src/components/button/Button.jsx b/src/components/button/Button.jsx
index c464ee99f..66b8c4024 100644
--- a/src/components/button/Button.jsx
+++ b/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>
   )
 }
 
diff --git a/src/components/button/Button.scss b/src/components/button/Button.scss
index 163d394c3..15b95eefb 100644
--- a/src/components/button/Button.scss
+++ b/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;
diff --git a/src/components/listView/ListView.jsx b/src/components/listView/ListView.jsx
index f7cea02d5..aab084630 100644
--- a/src/components/listView/ListView.jsx
+++ b/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>
     </>
   )
diff --git a/src/components/listView/ListView.scss b/src/components/listView/ListView.scss
index 22961cd72..feaace834 100644
--- a/src/components/listView/ListView.scss
+++ b/src/components/listView/ListView.scss
@@ -1,3 +1,7 @@
+.list-container {
+  position: relative;
+}
+
 .listview-container > h4 {
   width: 100%;
   margin-bottom: 16px;
diff --git a/src/components/loadingWrapper/ComponentLoadingWrapper.jsx b/src/components/loadingWrapper/ComponentLoadingWrapper.jsx
index 6df1b0b8e..47bbf171d 100644
--- a/src/components/loadingWrapper/ComponentLoadingWrapper.jsx
+++ b/src/components/loadingWrapper/ComponentLoadingWrapper.jsx
@@ -4,7 +4,7 @@ import { ReactComponent as Lock } from '../../assets/images/minus-circle-outline
 
 // Wrapper function for loading spinner
 // Pass loading state to this component as props 'loadingState'
-const ComponentLoadingWrapper = ({ loadingState = true, children }) => {
+const ComponentLoadingWrapper = ({ loadingState = false, children }) => {
   return (
     <>
       {loadingState &&
diff --git a/src/components/loadingWrapper/LoadingWrapper.scss b/src/components/loadingWrapper/LoadingWrapper.scss
index 5f05f8745..c95742bc2 100644
--- a/src/components/loadingWrapper/LoadingWrapper.scss
+++ b/src/components/loadingWrapper/LoadingWrapper.scss
@@ -1,4 +1,4 @@
-.loading-spinner-container {
+.loading-container {
     position: fixed;
     top: 0%;
     left: 0%;
@@ -10,7 +10,7 @@
     align-items: center;
     z-index: 5;
 
-    .loading-spinner-wrapper {
+    .loading-wrapper {
         width: 100px;
         height: 100px;
         display: flex;
@@ -26,7 +26,7 @@
             }
         }
 
-        .loading-spinner {
+        .loading {
             color: var(--primary-white);
             animation: spin-anim 1s linear infinite;
             height: 50px;
diff --git a/src/screens/congratulation/CongratulationScreen.jsx b/src/screens/congratulation/CongratulationScreen.jsx
index ace61012a..b28fc210c 100644
--- a/src/screens/congratulation/CongratulationScreen.jsx
+++ b/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>
diff --git a/src/screens/dashboard/MyProfile.jsx b/src/screens/dashboard/MyProfile.jsx
index e68506886..ca14b243d 100644
--- a/src/screens/dashboard/MyProfile.jsx
+++ b/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>
   )
 }
 
diff --git a/src/screens/library/Library.jsx b/src/screens/library/Library.jsx
index 84394f1c7..000de22db 100644
--- a/src/screens/library/Library.jsx
+++ b/src/screens/library/Library.jsx
@@ -53,6 +53,7 @@ const Library = () => {
                 setNewCollection={setNewCollection}
                 modalActive={modalActive}
                 setModalActive={setModalActive}
+                loadingState={resourceList.loading}
               />
             </div>
           ))}

From 1cc67916710abbfab1d24bb14e06b7e1cc49b1de Mon Sep 17 00:00:00 2001
From: Laxman Maharjan <email@mlaxman.com.np>
Date: Tue, 3 Aug 2021 21:17:46 +0545
Subject: [PATCH 4/6] changing background

---
 src/components/loadingWrapper/ComponentLoadingWrapper.scss | 2 +-
 src/components/loadingWrapper/LoadingWrapper.scss          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/loadingWrapper/ComponentLoadingWrapper.scss b/src/components/loadingWrapper/ComponentLoadingWrapper.scss
index 50daa85f1..a5806ecf1 100644
--- a/src/components/loadingWrapper/ComponentLoadingWrapper.scss
+++ b/src/components/loadingWrapper/ComponentLoadingWrapper.scss
@@ -4,7 +4,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(255, 255, 255, 0.6);
+    background: rgba(0, 0, 0, 0.6);
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/components/loadingWrapper/LoadingWrapper.scss b/src/components/loadingWrapper/LoadingWrapper.scss
index c95742bc2..e43e4792a 100644
--- a/src/components/loadingWrapper/LoadingWrapper.scss
+++ b/src/components/loadingWrapper/LoadingWrapper.scss
@@ -5,6 +5,7 @@
     width: 100vw;
     height: 100vh;
     background: var(--background-color);
+    background: rgba(0, 0, 0, 0.6);
     display: flex;
     justify-content: center;
     align-items: center;

From c7a622c30c2ae029e8bfeb2c4af4cccdef74402c Mon Sep 17 00:00:00 2001
From: Laxman Maharjan <email@mlaxman.com.np>
Date: Fri, 6 Aug 2021 22:25:11 +0545
Subject: [PATCH 5/6] library page error

---
 src/screens/library/Library.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/screens/library/Library.jsx b/src/screens/library/Library.jsx
index 000de22db..1de6beadd 100644
--- a/src/screens/library/Library.jsx
+++ b/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,7 +54,7 @@ const Library = () => {
                 setNewCollection={setNewCollection}
                 modalActive={modalActive}
                 setModalActive={setModalActive}
-                loadingState={resourceList.loading}
+                // loadingState={resourceList.loading}
               />
             </div>
           ))}
@@ -73,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
-      ? <>
+      ? <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} />
   )
 }
 

From 727fe4be181878138981b7685facab897e16c490 Mon Sep 17 00:00:00 2001
From: Laxman Maharjan <email@mlaxman.com.np>
Date: Fri, 6 Aug 2021 22:28:51 +0545
Subject: [PATCH 6/6] length

---
 src/screens/library/Library.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/library/Library.jsx b/src/screens/library/Library.jsx
index 1de6beadd..d0338db0d 100644
--- a/src/screens/library/Library.jsx
+++ b/src/screens/library/Library.jsx
@@ -78,7 +78,7 @@ const LibraryCategory = ({ title, search, setNewCollection, modalActive, setModa
   //   return (<div>Loading...</div>)
   // }
   return (
-    libraryData?.resources.length > 0
+    libraryData?.resources?.length > 0
       ? <ComponentLoadingWrapper loadingState={isLoading}>
         <ListView
           title={title} data={libraryData?.resources}