Add loading icon to reviews page.

LEARNER-2332

Since CourseTalk doesn't allow for loading a read and write reviews
page at the same time, this commit adds a loading icon to show that
we need to grab the iframe.

lms/static/sass/features/_course-experience.scss

@@ -360,5 +360,18 @@
   .course-reviews-tool {
     margin: ($baseline * 2) ($baseline * 3);
     position: relative;
+    text-align: center;
+    min-height: 300px;
+
+    .fa.fa-spinner {
+      @include left(50%);
+      font-size: 2rem;
+      margin-top: $baseline*3;
+      position: absolute;
+    }
+
+    iframe {
+      display: block !important;
+    }
   }
 }

openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js

@@ -11,21 +11,32 @@ export class CourseTalkReviews {  // eslint-disable-line import/prefer-default-e
 
     // Initialize page to the read reviews view
     self.currentSrc = options.readSrc;
-    $.getScript(options.readSrc);
+    $.getScript(options.readSrc, () => { // eslint-disable-line func-names
+      $('iframe').load(() => {
+        $(options.loadIcon).hide();
+      });
+    });
     $courseTalkToggleReadWriteReviews.text(toWriteBtnText);
 
     $courseTalkToggleReadWriteReviews.on('click', () => {
+      const switchToReadView = self.currentSrc === options.writeSrc;
       // Cache js file for future button clicks
       $.ajaxSetup({ cache: true });
 
+      // Show the loading icon
+      $(options.loadIcon).show();
+
+      // Update toggle button text
+      const newBtnText = switchToReadView ? toWriteBtnText : toReadBtnText;
+      $courseTalkToggleReadWriteReviews.text(newBtnText);
+
       // Toggle the new coursetalk script object
-      const switchToReadView = self.currentSrc === options.writeSrc;
       self.currentSrc = switchToReadView ? options.readSrc : options.writeSrc;
-      $.getScript(self.currentSrc);
-
-      // Toggle button text on switch to the other view
-      const newText = switchToReadView ? toWriteBtnText : toReadBtnText;
-      $courseTalkToggleReadWriteReviews.text(newText);
+      $.getScript(self.currentSrc, () => { // eslint-disable-line func-names
+        $('iframe').load(() => {
+          $(options.loadIcon).hide();
+        });
+      });
     });
   }
 }

openedx/features/course_experience/templates/course_experience/course_reviews_modules/coursetalk-reviews-fragment.html

@@ -12,6 +12,7 @@ from openedx.features.course_experience import SHOW_REVIEWS_TOOL_FLAG
 
 % if SHOW_REVIEWS_TOOL_FLAG.is_enabled(course.id):
     <div class="coursetalk-read-reviews">
+        <span class="fa fa-spinner fa-spin" aria-hidden="true"></span>
         ## Coursetalk Widget
         <div id="ct-custom-read-review-widget" data-provider="${platform_key}" data-course="${course.id}"></div>
     </div>
@@ -20,6 +21,7 @@ from openedx.features.course_experience import SHOW_REVIEWS_TOOL_FLAG
 <%static:webpack entry="CourseTalkReviews">
     new CourseTalkReviews({
         toggleButton: '.toggle-read-write-reviews',
+        loadIcon: '.coursetalk-read-reviews .fa.fa-spinner',
         readSrc: "${settings.COURSE_TALK_READ_ONLY_SOURCE | n, js_escaped_string}",
         writeSrc: "${settings.COURSE_TALK_WRITE_ONLY_SOURCE | n, js_escaped_string}"
     });