Merge pull request #597 from topcoder-platform/TCA-1260_hide-fcc-frame-while-loading

TCA-1260 - Hide the FCC frame while the contents are loading -> dev

Author: vas3a

src-ts/tools/learn/free-code-camp/FreeCodeCamp.module.scss

@@ -48,6 +48,24 @@
     }
 }
 
+.course-iframe {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.course-frame-loader {
+    margin-left: $space-xxxxl;
+    margin-right: $space-xxxxl;
+    width: calc(100% - 2 * $space-xxxxl);
+
+    + iframe {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+
 .wrapBreadcrumb {
     position: relative;
 
@@ -66,4 +84,4 @@
             bottom: $space-lg;
         }
     }
-}
+}

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -76,6 +76,8 @@ const FreeCodeCamp: FC<{}> = () => {
         = useState(textFormatGetSafeString(routeParams.module))
     const [lessonParam, setLessonParam]: [string, Dispatch<SetStateAction<string>>]
         = useState(textFormatGetSafeString(routeParams.lesson))
+    const [fccFrameReady, setFccFrameReady]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState(false)
 
     const {
         certificationProgress: certificateProgress,
@@ -205,6 +207,8 @@ const FreeCodeCamp: FC<{}> = () => {
     }
 
     const handleFccLessonReady: (lessonPath: string) => void = useCallback((lessonPath: string) => {
+        // mark fcc frame as being ready once we get the first "lesson ready"
+        setFccFrameReady(true)
 
         const [nLessonPath, modulePath, coursePath]: Array<string> = lessonPath.replace(/\/$/, '')
             .split('/')
@@ -622,12 +626,16 @@ const FreeCodeCamp: FC<{}> = () => {
                             onNavigate={handleNavigate}
                         />
                         <hr />
-                        <FccFrame
-                            lesson={lesson}
-                            onFccLessonChange={handleFccLessonReady}
-                            onFccLessonComplete={handleFccLessonComplete}
-                            onFccLastLessonNavigation={handleFccLastLessonNavigation}
-                        />
+
+                        <div className={styles['course-iframe']}>
+                            <LoadingSpinner className={styles['course-frame-loader']} hide={fccFrameReady} />
+                            <FccFrame
+                                lesson={lesson}
+                                onFccLessonChange={handleFccLessonReady}
+                                onFccLessonComplete={handleFccLessonComplete}
+                                onFccLastLessonNavigation={handleFccLastLessonNavigation}
+                            />
+                        </div>
                     </div>
                 </div>
             )}