Allow loading from DataLoader to be cancelled on unmount (#6283)

lms/static/scripts/frontend_apps/components/DataLoader.tsx

@@ -13,8 +13,12 @@ export type DataLoaderProps<Data> = {
    */
   children: ComponentChildren;
 
-  /** Function that fetches data if {@link loaded} is false. */
-  load: () => Promise<Data>;
+  /**
+   * Function that fetches data if {@link loaded} is false.
+   * It provides an abort signal that gets aborted when the DataLoader is
+   * unmounted or the `load` or `onLoad` props change.
+   */
+  load: (signal: AbortSignal) => Promise<Data>;
 
   /**
    * Callback to invoke with the results of {@link load}.
@@ -46,13 +50,17 @@ export default function DataLoader<Data>({
 
   useEffect(() => {
     if (loaded) {
-      return;
+      return () => {};
     }
-    load()
+
+    const controller = new AbortController();
+    load(controller.signal)
       .then(onLoad)
       .catch(err => {
         setError(err);
       });
+
+    return () => controller.abort();
   }, [loaded, load, onLoad]);
 
   if (error) {

lms/static/scripts/frontend_apps/components/test/DataLoader-test.js

@@ -59,4 +59,19 @@ describe('DataLoader', () => {
     assert.isFalse(wrapper.exists('[data-testid="content"]'));
     assert.isFalse(wrapper.exists('SpinnerOverlay'));
   });
+
+  it('aborts loading when DataLoader is unmounted', () => {
+    const onAbort = sinon.stub();
+    const wrapper = mount(
+      <TestContainer
+        load={async signal => {
+          signal.onabort = onAbort;
+          return 'Hello world';
+        }}
+      />,
+    );
+
+    wrapper.unmount();
+    assert.called(onAbort);
+  });
 });