fix(useLoading): stay loading until every overlapping promise settles

.changeset/use-loading-overlapping-calls.md

@@ -0,0 +1,5 @@
+---
+'react-simplikit': patch
+---
+
+`useLoading` now keeps `loading` as `true` until every promise passed to `startLoading` has settled. Before, when two calls overlapped, the first promise to settle set `loading` to `false` while the other was still pending.

packages/react-simplikit/src/hooks/useLoading/useLoading.spec.ts

@@ -82,4 +82,72 @@ describe('useLoading', () => {
     // No errors should occur, and the loading state should not update after unmount
     expect(true).toBe(true);
   });
+  it('should stay loading until every overlapping promise has settled', async () => {
+    const { result } = await renderHookSSR(() => useLoading());
+    const [, startLoading] = result.current;
+
+    let resolveFirst: () => void = () => {};
+    let resolveSecond: () => void = () => {};
+    const first = new Promise<void>(resolve => {
+      resolveFirst = resolve;
+    });
+    const second = new Promise<void>(resolve => {
+      resolveSecond = resolve;
+    });
+
+    await act(async () => {
+      startLoading(first);
+      startLoading(second);
+    });
+
+    expect(result.current[0]).toBe(true);
+
+    await act(async () => {
+      resolveFirst();
+      await first;
+    });
+
+    expect(result.current[0]).toBe(true);
+
+    await act(async () => {
+      resolveSecond();
+      await second;
+    });
+
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should stay loading while another promise is pending after one rejects', async () => {
+    const { result } = await renderHookSSR(() => useLoading());
+    const [, startLoading] = result.current;
+
+    let rejectFirst: (error: Error) => void = () => {};
+    let resolveSecond: () => void = () => {};
+    const first = new Promise<void>((_, reject) => {
+      rejectFirst = reject;
+    });
+    const second = new Promise<void>(resolve => {
+      resolveSecond = resolve;
+    });
+
+    let firstResult: Promise<void> = Promise.resolve();
+    await act(async () => {
+      firstResult = startLoading(first);
+      startLoading(second);
+    });
+
+    await act(async () => {
+      rejectFirst(new Error('failed'));
+      await expect(firstResult).rejects.toThrow('failed');
+    });
+
+    expect(result.current[0]).toBe(true);
+
+    await act(async () => {
+      resolveSecond();
+      await second;
+    });
+
+    expect(result.current[0]).toBe(false);
+  });
 });

packages/react-simplikit/src/hooks/useLoading/useLoading.ts

@@ -33,15 +33,20 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 export function useLoading(): [boolean, <T>(promise: Promise<T>) => Promise<T>] {
   const [loading, setLoading] = useState(false);
   const ref = useIsMountedRef();
+  // Counts the promises that have not settled yet, so that `loading` stays `true`
+  // until the last of several overlapping calls finishes.
+  const pendingCountRef = useRef(0);
 
   const startTransition = useCallback(
     async <T>(promise: Promise<T>) => {
+      pendingCountRef.current += 1;
       try {
         setLoading(true);
         const data = await promise;
         return data;
       } finally {
-        if (ref.isMounted) {
+        pendingCountRef.current -= 1;
+        if (ref.isMounted && pendingCountRef.current === 0) {
           setLoading(false);
         }
       }