Merge pull request #11392 from rtibbles/quiz_score_report

Attempt to fix issues seemingly caused by global loading state not being observed.
learningequality · Oct 17, 2023 · e1b6d2c · e1b6d2c
2 parents ad308de + 782aa60
commit e1b6d2c
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 9 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue b/kolibri/plugins/coach/assets/src/views/CoachImmersivePage.vue
@@ -12,7 +12,7 @@
       :loading="loading"
       :appearanceOverrides="appearanceOverrides"
     >
-      <div class="coach-main">
+      <div v-if="!coreLoading" class="coach-main">
         <slot></slot>
       </div>
     </ImmersivePage>
@@ -103,6 +103,7 @@
     },
     computed: {
       ...mapState({
+        coreLoading: state => state.core.loading,
         error: state => state.core.error,
       }),
     },

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -4,7 +4,8 @@
     :route="homePageLink"
     :appBarTitle="exam.title || ''"
   >
-    <KGrid :gridStyle="gridStyle">
+    <KCircularLoader v-if="loading" />
+    <KGrid v-else :gridStyle="gridStyle">
       <!-- this.$refs.questionListWrapper is referenced inside AnswerHistory for scrolling -->
       <KGridItem
         v-if="windowIsLarge"
@@ -237,6 +238,9 @@
       };
     },
     computed: {
+      ...mapState({
+        loading: state => state.core.loading,
+      }),
       ...mapState('examViewer', ['exam', 'contentNodeMap', 'questions', 'questionNumber']),
       gridStyle() {
         if (!this.windowIsSmall) {

diff --git a/kolibri/plugins/learn/assets/src/views/LearnExamReportViewer.vue b/kolibri/plugins/learn/assets/src/views/LearnExamReportViewer.vue
@@ -5,7 +5,8 @@
     :appBarTitle="exam.title || ''"
   >
     <KPageContainer :topMargin="50" class="container">
-      <div v-if="exerciseContentNodes && exerciseContentNodes.length">
+      <KCircularLoader v-if="loading" />
+      <div v-else-if="exerciseContentNodes && exerciseContentNodes.length">
         <ExamReport
           :contentId="exam.id"
           :title="exam.title"
@@ -67,6 +68,7 @@
       ...mapState({
         userName: state => state.core.session.full_name,
         userId: state => state.core.session.user_id,
+        loading: state => state.core.loading,
       }),
       homePageLink() {
         return {

diff --git a/kolibri/plugins/learn/assets/src/views/YourClasses/index.vue b/kolibri/plugins/learn/assets/src/views/YourClasses/index.vue
@@ -39,6 +39,8 @@
       </CardLink>
     </CardGrid>
 
+    <KCircularLoader v-else-if="loading" />
+
     <p v-else-if="!loading">
       {{ $tr('noClasses') }}
     </p>

diff --git a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
@@ -3,7 +3,8 @@
   <LearnAppBarPage
     :appBarTitle="learnString('learnLabel')"
   >
-    <div id="main" role="main">
+    <KCircularLoader v-if="loading" />
+    <div v-else id="main" role="main">
       <KBreadcrumbs :items="breadcrumbs" :ariaLabel="learnString('classesAndAssignmentsLabel')" />
       <h1 class="classroom-name">
         <KLabeledIcon icon="classes" :label="className" />
@@ -60,9 +61,10 @@
       const activeLessons = computed(() => getClassActiveLessons(get(classId)));
       const activeQuizzes = computed(() => getClassActiveQuizzes(get(classId)));
 
+      let pollTimeoutId;
+
       function schedulePoll() {
-        const timeoutId = setTimeout(pollForUpdates, 30000);
-        return timeoutId;
+        pollTimeoutId = setTimeout(pollForUpdates, 30000);
       }
 
       function pollForUpdates() {
@@ -71,10 +73,8 @@
         });
       }
 
-      let pollTimeoutId;
-
       onBeforeMount(() => {
-        pollTimeoutId = schedulePoll();
+        schedulePoll();
       });
 
       onBeforeUnmount(() => {
@@ -87,6 +87,12 @@
         activeQuizzes,
       };
     },
+    props: {
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+    },
     computed: {
       breadcrumbs() {
         return [

diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -43,6 +43,7 @@
         {{ $tr('noResourcesInLesson') }}
       </p>
     </div>
+    <KCircularLoader v-else />
   </LearnAppBarPage>
 
 </template>