Scroll to top when the sequenceId or unitId changes (#63)

* Scroll to top when the sequenceId or unitId changes

* Add a spinner to the unit.

src/courseware/course/sequence/SequenceContent.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PageLoading from '../../../PageLoading';
@@ -14,6 +14,11 @@ function SequenceContent({
 }) {
   const sequence = useModel('sequences', sequenceId);
 
+  // Go back to the top of the page whenever the unit or sequence changes.
+  useEffect(() => {
+    global.scrollTo(0, 0);
+  }, [sequenceId, unitId]);
+
   if (gated) {
     return (
       <Suspense

src/courseware/course/sequence/Unit.jsx

@@ -117,6 +117,11 @@ function Unit({
           />
         </Suspense>
       )}
+      {!hasLoaded && (
+        <PageLoading
+          srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
+        />
+      )}
       <div className="unit-iframe-wrapper">
         <iframe
           id="unit-iframe"