Update minor style and visual loading (#19)

src/courseware/sequence/Sequence.jsx

@@ -1,5 +1,7 @@
 /* eslint-disable no-use-before-define */
-import React, { useEffect, useContext, Suspense } from 'react';
+import React, {
+  useEffect, useContext, Suspense, useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -71,6 +73,13 @@ function Sequence({
     };
   }, [bannerText]);
 
+  const [unitHasLoaded, setUnitHasLoaded] = useState(false);
+  const handleUnitLoaded = () => {
+    setUnitHasLoaded(true);
+  };
+  useEffect(() => {
+    setUnitHasLoaded(false);
+  }, [activeUnitId]);
 
   return (
     <>
@@ -105,33 +114,36 @@ function Sequence({
           <Unit
             key={activeUnitId}
             id={activeUnitId}
+            onLoaded={handleUnitLoaded}
           />
         )}
       </div>
-      <div className="unit-content-container below-unit-navigation">
-        <Button
-          className="btn-outline-secondary previous-button w-25 mr-2"
-          onClick={handlePrevious}
-        >
-          <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
-          <FormattedMessage
-            id="learn.sequence.navigation.after.unit.previous"
-            description="The button to go to the previous unit"
-            defaultMessage="Previous"
-          />
-        </Button>
-        <Button
-          className="btn-outline-primary next-button w-75"
-          onClick={handleNext}
-        >
-          <FormattedMessage
-            id="learn.sequence.navigation.after.unit.next"
-            description="The button to go to the next unit"
-            defaultMessage="Next"
-          />
-          <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
-        </Button>
-      </div>
+      {unitHasLoaded ? (
+        <div className="unit-content-container below-unit-navigation">
+          <Button
+            className="btn-outline-secondary previous-button w-25 mr-2"
+            onClick={handlePrevious}
+          >
+            <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
+            <FormattedMessage
+              id="learn.sequence.navigation.after.unit.previous"
+              description="The button to go to the previous unit"
+              defaultMessage="Previous"
+            />
+          </Button>
+          <Button
+            className="btn-outline-primary next-button w-75"
+            onClick={handleNext}
+          >
+            <FormattedMessage
+              id="learn.sequence.navigation.after.unit.next"
+              description="The button to go to the next unit"
+              defaultMessage="Next"
+            />
+            <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
+          </Button>
+        </div>
+      ) : null}
     </>
   );
 }

src/courseware/sequence/Unit.jsx

@@ -9,6 +9,7 @@ function Unit({
   bookmarked,
   bookmarkedUpdateState,
   displayName,
+  onLoaded,
   id,
   ...props
 }) {
@@ -16,12 +17,19 @@ function Unit({
   const iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0`;
 
   const [iframeHeight, setIframeHeight] = useState(0);
+  const [hasLoaded, setHasLoaded] = useState(false);
   useEffect(() => {
     global.onmessage = (event) => {
       const { type, payload } = event.data;
 
       if (type === 'plugin.resize') {
         setIframeHeight(payload.height);
+        if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
+          setHasLoaded(true);
+          if (onLoaded) {
+            onLoaded();
+          }
+        }
       }
     };
   }, []);
@@ -65,11 +73,13 @@ Unit.propTypes = {
   displayName: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   removeBookmark: PropTypes.func.isRequired,
+  onLoaded: PropTypes.func,
 };
 
 Unit.defaultProps = {
   bookmarked: false,
   bookmarkedUpdateState: undefined,
+  onLoaded: undefined,
 };
 
 const mapStateToProps = (state, props) => state.courseBlocks.blocks[props.id] || {};

src/index.scss

@@ -100,6 +100,7 @@ $primary: #1176B2;
     }
     &.complete {
       background-color: #EEF7E5;
+      color: $success;
     }
     &:first-child {
       margin-left: 0;
@@ -108,6 +109,7 @@ $primary: #1176B2;
   .previous-btn, .next-btn {
     flex-basis: 10em;
     min-width: 9em;
+    color: theme-color('gray', 700);
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -120,20 +122,6 @@ $primary: #1176B2;
   }
 }
 
-.below-unit-navigation {
-  display: flex;
-  justify-content: center;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  .previous-button,
-  .next-button {
-    border-radius: 4px;
-    &:focus:before {
-      border-radius: 6px;
-    }
-  }
-}
-
 .unit-content-container {
   padding-left: 20px;
   padding-right: 20px;
@@ -146,6 +134,23 @@ $primary: #1176B2;
     padding-right: 40px;
   }
 }
+
+.below-unit-navigation {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding-left: 6rem;
+  padding-right: 6rem;
+  .previous-button,
+  .next-button {
+    border-radius: 4px;
+    &:focus:before {
+      border-radius: 6px;
+    }
+  }
+}
+
 #unit-iframe {
   max-width: 1024px;
   width: 100%;