MDL-79194 core_courseformat: optimize section reload

course/format/amd/src/local/content.js

@@ -545,17 +545,37 @@ export default class Component extends BaseComponent {
                 }
             );
             promise.then((html, js) => {
+                // Other state change can reload the CM or the section before this one.
+                if (!document.contains(cmitem)) {
+                    return;
+                }
                 Templates.replaceNode(cmitem, html, js);
                 this._indexContents();
                 pendingReload.resolve();
                 return;
-            }).catch();
+            }).catch(() => {
+                pendingReload.resolve();
+            });
         };
-        debouncedReload = debounce(reload, 200);
+        debouncedReload = debounce(reload, 200, {cancel: true});
         this.debouncedReloads.set(pendingKey, debouncedReload);
         return debouncedReload;
     }
 
+    /**
+     * Cancel the active reload CM debounced function, if any.
+     * @param {Number} cmId
+     */
+    _cancelDebouncedReloadCm(cmId) {
+        const pendingKey = `courseformat/content:reloadCm_${cmId}`;
+        const debouncedReload = this.debouncedReloads.get(pendingKey);
+        if (!debouncedReload) {
+            return;
+        }
+        debouncedReload.cancel();
+        this.debouncedReloads.delete(pendingKey);
+    }
+
     /**
      * Reload a course section contents.
      *
@@ -569,6 +589,10 @@ export default class Component extends BaseComponent {
         const pendingReload = new Pending(`courseformat/content:reloadSection_${element.id}`);
         const sectionitem = this.getElement(this.selectors.SECTION, element.id);
         if (sectionitem) {
+            // Cancel any pending reload because the section will reload cms too.
+            for (const cmId of element.cmlist) {
+                this._cancelDebouncedReloadCm(cmId);
+            }
             const promise = Fragment.loadFragment(
                 'core_courseformat',
                 'section',
@@ -584,7 +608,9 @@ export default class Component extends BaseComponent {
                 this._indexContents();
                 pendingReload.resolve();
                 return;
-            }).catch();
+            }).catch(() => {
+                pendingReload.resolve();
+            });
         }
     }
 

lib/amd/src/utils.js

@@ -87,13 +87,15 @@ const debounceMap = new Map();
  * @param {Number} wait The number of milliseconds to wait after the final attempt to execute
  * @param {Object} [options]
  * @param {boolean} [options.pending=false] Whether to wrap the debounced method in a pending promise
+ * @param {boolean} [options.cancel=false] Whether to add a cancel method to the debounced function
  * @return {Function}
  */
 export const debounce = (
     func,
     wait,
     {
         pending = false,
+        cancel = false,
     } = {},
 ) => {
     let timeout = null;
@@ -119,6 +121,12 @@ export const debounce = (
         }, wait);
     };
 
+    if (cancel) {
+        returnedFunction.cancel = () => {
+            clearTimeout(timeout);
+        };
+    }
+
     return returnedFunction;
 };