From 271f3c9f3c695e6f002a3c6c510619c67090099d Mon Sep 17 00:00:00 2001
From: Harry Rein <hrein@edx.org>
Date: Wed, 4 Oct 2017 14:41:53 -0400
Subject: [PATCH] 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.
---
 .../sass/features/_course-experience.scss     | 13 +++++++++
 .../course_experience/js/CourseTalkReviews.js | 27 +++++++++++++------
 .../coursetalk-reviews-fragment.html          |  2 ++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss
index 5a9fe4120e..8c0a5d882c 100644
--- a/lms/static/sass/features/_course-experience.scss
+++ b/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;
+    }
   }
 }
diff --git a/openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js b/openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js
index fd197b2e40..9f1c6d9b19 100644
--- a/openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js
+++ b/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 });
 
-      // Toggle the new coursetalk script object
-      const switchToReadView = self.currentSrc === options.writeSrc;
-      self.currentSrc = switchToReadView ? options.readSrc : options.writeSrc;
-      $.getScript(self.currentSrc);
+      // Show the loading icon
+      $(options.loadIcon).show();
 
-      // Toggle button text on switch to the other view
-      const newText = switchToReadView ? toWriteBtnText : toReadBtnText;
-      $courseTalkToggleReadWriteReviews.text(newText);
+      // Update toggle button text
+      const newBtnText = switchToReadView ? toWriteBtnText : toReadBtnText;
+      $courseTalkToggleReadWriteReviews.text(newBtnText);
+
+      // Toggle the new coursetalk script object
+      self.currentSrc = switchToReadView ? options.readSrc : options.writeSrc;
+      $.getScript(self.currentSrc, () => { // eslint-disable-line func-names
+        $('iframe').load(() => {
+          $(options.loadIcon).hide();
+        });
+      });
     });
   }
 }
diff --git a/openedx/features/course_experience/templates/course_experience/course_reviews_modules/coursetalk-reviews-fragment.html b/openedx/features/course_experience/templates/course_experience/course_reviews_modules/coursetalk-reviews-fragment.html
index 258f46a867..f33dcb4302 100644
--- a/openedx/features/course_experience/templates/course_experience/course_reviews_modules/coursetalk-reviews-fragment.html
+++ b/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}"
     });