From ace2bb0e69d33807cdc26842ee7fa85320c5bedb Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 4 Aug 2022 18:19:13 +0300
Subject: [PATCH 1/2] TCA-176 - add loading spinner on my-learnings page

---
 .../learn/my-learning/MyLearning.module.scss  | 10 +++
 src-ts/tools/learn/my-learning/MyLearning.tsx | 66 +++++++++++--------
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/src-ts/tools/learn/my-learning/MyLearning.module.scss b/src-ts/tools/learn/my-learning/MyLearning.module.scss
index 1bf71cb38..c0a505fd7 100755
--- a/src-ts/tools/learn/my-learning/MyLearning.module.scss
+++ b/src-ts/tools/learn/my-learning/MyLearning.module.scss
@@ -1,5 +1,10 @@
 @import '../../../lib/styles/includes';
 
+.wrap {
+    flex: 1 1 auto;
+    position: relative;
+}
+
 .content-layout {
     background: $black-5;
 }
@@ -34,6 +39,7 @@
     gap: $pad-lg;
     display: flex;
     flex-direction: column;
+    position: relative;
     &:empty {
         display: none;
     }
@@ -57,4 +63,8 @@
             flex: 1 1 0;
         }
     }
+}
+
+.loading-spinner {
+    background: none;
 }
\ No newline at end of file
diff --git a/src-ts/tools/learn/my-learning/MyLearning.tsx b/src-ts/tools/learn/my-learning/MyLearning.tsx
index 2d408485f..f27f3f62d 100755
--- a/src-ts/tools/learn/my-learning/MyLearning.tsx
+++ b/src-ts/tools/learn/my-learning/MyLearning.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext, useMemo } from 'react'
 
-import { Breadcrumb, BreadcrumbItemModel, ContentLayout, Portal, profileContext, ProfileContextData } from '../../../lib'
+import { Breadcrumb, BreadcrumbItemModel, ContentLayout, LoadingSpinner, Portal, profileContext, ProfileContextData } from '../../../lib'
 import {
     AllCertificationsProviderData,
     LearnCertification,
@@ -24,9 +24,11 @@ interface CertificatesByIdType {
 
 const MyLearning: FC<{}> = () => {
 
-    const { profile }: ProfileContextData = useContext(profileContext)
-    const { completed, inProgress }: UserCertificationsProviderData = useUserCertifications()
-    const { certifications }: AllCertificationsProviderData = useAllCertifications()
+    const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
+    const { completed, inProgress, ready: coursesReady }: UserCertificationsProviderData = useUserCertifications()
+    const { certifications, ready: certificatesReady }: AllCertificationsProviderData = useAllCertifications()
+
+    const ready: boolean = profileReady && coursesReady && certificatesReady;
 
     const certificatesById: CertificatesByIdType = useMemo(() => (
         certifications.reduce((certifs, certificate) => {
@@ -46,6 +48,8 @@ const MyLearning: FC<{}> = () => {
         <ContentLayout contentClass={styles['content-layout']}>
             <Breadcrumb items={breadcrumb} />
             <div className={styles['wrap']}>
+                <LoadingSpinner hide={ready} className={styles['loading-spinner']} />
+
                 <Portal portalId='page-subheader-portal-el'>
                     <div className={styles['hero-wrap']}>
                         <WaveHero
@@ -60,36 +64,40 @@ const MyLearning: FC<{}> = () => {
                     </div>
                 </Portal>
 
-                <div className={styles['courses-area']}>
-                    {inProgress.map((certif) => (
-                        <MyCourseInProgressCard
-                            certification={certificatesById[certif.certificationId]}
-                            key={certif.certificationId}
-                            theme='detailed'
-                            currentLesson={certif.currentLesson}
-                            completedPercentage={certif.courseProgressPercentage / 100}
-                            startDate={certif.startDate}
-                        />
-                    ))}
-                </div>
-
-                {!!completed.length && (
-                    <div className={styles['courses-area']}>
-                        <div className={styles['title-line']}>
-                            <LearningHat />
-                            <h2 className='details'>Completed Courses</h2>
-                        </div>
-
-                        <div className={styles['cards-wrap']}>
-                            {completed.map((certif) => (
-                                <MyCourseCompletedCard
+                {ready && (
+                    <>
+                        <div className={styles['courses-area']}>
+                            {inProgress.map((certif) => (
+                                <MyCourseInProgressCard
                                     certification={certificatesById[certif.certificationId]}
                                     key={certif.certificationId}
-                                    completed={certif.completedDate}
+                                    theme='detailed'
+                                    currentLesson={certif.currentLesson}
+                                    completedPercentage={certif.courseProgressPercentage / 100}
+                                    startDate={certif.startDate}
                                 />
                             ))}
                         </div>
-                    </div>
+
+                        {!!completed.length && (
+                            <div className={styles['courses-area']}>
+                                <div className={styles['title-line']}>
+                                    <LearningHat />
+                                    <h2 className='details'>Completed Courses</h2>
+                                </div>
+
+                                <div className={styles['cards-wrap']}>
+                                    {completed.map((certif) => (
+                                        <MyCourseCompletedCard
+                                            certification={certificatesById[certif.certificationId]}
+                                            key={certif.certificationId}
+                                            completed={certif.completedDate}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </>
                 )}
             </div>
         </ContentLayout>

From a1a20ead831a134da79312fd9e9a8a9f5a94b1d0 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 4 Aug 2022 18:22:48 +0300
Subject: [PATCH 2/2] lint fixes

---
 src-ts/tools/learn/my-learning/MyLearning.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ts/tools/learn/my-learning/MyLearning.tsx b/src-ts/tools/learn/my-learning/MyLearning.tsx
index f27f3f62d..115f63ce6 100755
--- a/src-ts/tools/learn/my-learning/MyLearning.tsx
+++ b/src-ts/tools/learn/my-learning/MyLearning.tsx
@@ -28,7 +28,7 @@ const MyLearning: FC<{}> = () => {
     const { completed, inProgress, ready: coursesReady }: UserCertificationsProviderData = useUserCertifications()
     const { certifications, ready: certificatesReady }: AllCertificationsProviderData = useAllCertifications()
 
-    const ready: boolean = profileReady && coursesReady && certificatesReady;
+    const ready: boolean = profileReady && coursesReady && certificatesReady
 
     const certificatesById: CertificatesByIdType = useMemo(() => (
         certifications.reduce((certifs, certificate) => {