KCircularloader replaces the view more button when fetching more reso…

…urces
learningequality · Jan 30, 2024 · fd0b6d5 · fd0b6d5
1 parent 519ce79
commit fd0b6d5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizResources.js b/kolibri/plugins/coach/assets/src/composables/useQuizResources.js
@@ -8,7 +8,7 @@ import useFetchTree from './useFetchTree';
 import { QuizExercise } from './quizCreationSpecs.js';
 
 const logger = logging.getLogger(__filename);
-
+const _loadingMore = ref(false);
 /**
  * @typedef {Object} QuizResourcesConfig
  * @property { computed <string|null|undefined> } topicId - The id of the root node to fetch the
@@ -102,11 +102,16 @@ export default function useQuizResources({ topicId } = {}) {
    */
   async function fetchMoreQuizResources() {
     set(_loading, true);
+    set(_loadingMore, true);
     return fetchMore().then(async results => {
       set(_resources, [...get(_resources), ...results]);
       return annotateTopicsWithDescendantCounts(
         results.filter(({ kind }) => kind === ContentNodeKinds.TOPIC).map(topic => topic.id)
-      ).then(() => set(_loading, false));
+      ).then(() =>{
+        set(_loading, false);
+        set(_loadingMore, false);
+      }
+      );
     });
   }
 
@@ -126,6 +131,7 @@ export default function useQuizResources({ topicId } = {}) {
     setResources,
     resources: computed(() => get(_resources)),
     loading: computed(() => get(_loading) || get(treeLoading)),
+    loadingMore: computed(() => get(_loadingMore)),
     fetchQuizResources,
     fetchMoreQuizResources,
     hasCheckbox,

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -65,6 +65,7 @@
         :contentCardMessage="selectionMetadata"
         :contentCardLink="contentLink"
         :selectAllIndeterminate="selectAllIndeterminate"
+        :loadingMoreState="loadingMore"
         @changeselectall="toggleTopicInWorkingResources"
         @change_content_card="toggleSelected"
         @moreresults="fetchMoreQuizResources"
@@ -171,6 +172,7 @@
         hasMore,
         annotateTopicsWithDescendantCounts,
         setResources,
+        loadingMore,
       } = useQuizResources({ topicId });
 
       const _loading = ref(true);
@@ -249,6 +251,7 @@
         hasCheckbox,
         loading,
         hasMore,
+        loadingMore,
         fetchMoreQuizResources,
         resetWorkingResourcePool,
         contentPresentInWorkingResourcePool,

diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
@@ -39,13 +39,13 @@
 
     <template>
       <KButton
-        v-if="showButton"
+        v-if="showButton && !loadingMoreState"
         :text="coreString('viewMoreAction')"
         :primary="false"
         @click="$emit('moreresults')"
       />
       <KCircularLoader
-        v-if="viewMoreButtonState === 'waiting'"
+        v-if="viewMoreButtonState === 'waiting' & loadingMoreState"
         :delay="false"
       />
       <!-- TODO introduce messages in next version -->
@@ -120,6 +120,10 @@
         type: Function, // ContentNode => Route
         required: true,
       },
+      loadingMoreState:{
+        type: Boolean,
+        default: false,
+      }
     },
     computed: {
       showButton() {