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):