From cefb966d6fd87a218d893afa25ac2a3bfec5278e Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 17 Dec 2024 15:25:34 -0500
Subject: [PATCH] Manage fetch concurrency

---
 kolibri/core/content/api.py                   |  4 +--
 .../coach/assets/src/composables/useFetch.js  | 31 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/kolibri/core/content/api.py b/kolibri/core/content/api.py
index 83724ca071a..a59f6caa8b9 100644
--- a/kolibri/core/content/api.py
+++ b/kolibri/core/content/api.py
@@ -962,8 +962,8 @@ def recommendations_for(self, request, **kwargs):
 #    run into an issue where we hit a SQL parameters limit in the queries in here.
 # If we find that this page size is too high, we should lower it, but for the reasons noted above, we
 # should not raise it.
-NUM_CHILDREN = 12
-NUM_GRANDCHILDREN_PER_CHILD = 12
+NUM_CHILDREN = 2
+NUM_GRANDCHILDREN_PER_CHILD = 2
 
 
 class TreeQueryMixin(object):
diff --git a/kolibri/plugins/coach/assets/src/composables/useFetch.js b/kolibri/plugins/coach/assets/src/composables/useFetch.js
index 3a4c3f580ed..4f11872000a 100644
--- a/kolibri/plugins/coach/assets/src/composables/useFetch.js
+++ b/kolibri/plugins/coach/assets/src/composables/useFetch.js
@@ -60,6 +60,9 @@ export default function useFetch(options) {
   const count = ref(null);
   const loadingMore = ref(false);
 
+  // useFetch metadata to manage synchronization of fetches
+  const _fetchCount = ref(0);
+
   const hasMore = computed(() => moreParams.value != null);
 
   const _setData = (response, loadingMore) => {
@@ -80,12 +83,25 @@ export default function useFetch(options) {
 
   const fetchData = async (...args) => {
     loading.value = true;
+    loadingMore.value = false; // Reset loading more state
     error.value = null;
+    _fetchCount.value += 1;
+    const currentFetchCount = _fetchCount.value;
+
+    // If the fetch count has changed, it means that a new fetch has been triggered
+    // and this fetch is no longer relevant
+    const newFetchHasStarted = () => currentFetchCount !== _fetchCount.value;
 
     try {
       const response = await fetchMethod(...args);
+      if (newFetchHasStarted()) {
+        return;
+      }
       _setData(response);
     } catch (err) {
+      if (newFetchHasStarted()) {
+        return;
+      }
       error.value = err;
     }
 
@@ -93,17 +109,28 @@ export default function useFetch(options) {
   };
 
   const fetchMore = async (...args) => {
-    if (!moreParams.value || !fetchMoreMethod) {
+    if (!moreParams.value || !fetchMoreMethod || loadingMore.value) {
       return;
     }
 
     loadingMore.value = true;
     error.value = null;
+    const currentFetchCount = _fetchCount.value;
+
+    // If the fetch count or fetch more count has changed, it means that a new fetch has been
+    // triggered and this fetch is no longer relevant
+    const newFetchHasStarted = () => currentFetchCount !== _fetchCount.value;
 
     try {
       const response = await fetchMoreMethod(moreParams.value, ...args);
-      _setData(response, loadingMore.value);
+      if (newFetchHasStarted()) {
+        return;
+      }
+      _setData(response, true);
     } catch (err) {
+      if (newFetchHasStarted()) {
+        return;
+      }
       error.value = err;
     }