@jsenv/navi 0.29.57 → 0.29.58

package/dist/jsenv_navi.js

@@ -58451,6 +58451,7 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   memoryBudget?: number,
  *   renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
  *   renderError?: (failure: {error: any, retry: () => void, start: number, end: number}) => import("ignore:preact").ComponentChildren,
+ *   onRequestStateChange?: (state: {busy: boolean, refreshing: boolean, range: {start: number, end: number}|null}) => void,
  * }>}
  * @param {(item: any, index: number, state: {refreshing: boolean}) => any} props.renderItem
  *   What one row is, given the item and where it sits. `state.refreshing` says
@@ -58488,6 +58489,14 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   a `retry` to call, and the `start`/`end` of the range that failed. Defaults
  *   to an inline message with a retry button, drawn on the row the user is
  *   looking at.
+ * @param {(state: {busy: boolean, refreshing: boolean, range: {start: number, end: number}|null}) => void} [props.onRequestStateChange]
+ *   Called when the run starts or stops asking for rows — for the screen around
+ *   the list to say that it is looking (the rows themselves have skeletons and
+ *   `refreshing` already). `busy` covers every ask, first slice and holes
+ *   opened by scrolling included; `refreshing` is the subset where rows already
+ *   held are being read again; `range` is what is being asked for, `null` once
+ *   nothing is. A range called off and asked again right away stays one `busy`,
+ *   and a list unmounted while asking says `busy: false` on its way out.
  */
 const ListItems = ({
   renderItem,
@@ -58499,7 +58508,8 @@ const ListItems = ({
   renderGroupLabel,
   groupLabelProps,
   renderSkeleton,
-  renderError
+  renderError,
+  onRequestStateChange
 }) => {
   const ownerId = useId();
   const virtual = useContext(ListVirtualContext);
@@ -58508,7 +58518,8 @@ const ListItems = ({
   const store = useItemStore({
     count,
     itemsAction,
-    memoryBudget
+    memoryBudget,
+    onRequestStateChange
   });
   const renderRowSkeleton = renderSkeleton === undefined ? virtual.renderSkeleton : renderSkeleton;
   // A row on its way takes the room the list reserves for it: anything else
@@ -58782,6 +58793,12 @@ const ListItemsFailure = ({
 // hits the network again.
 const ITEM_STORE_MAX_DEFAULT = 1000;
 const ITEM_STORE_KEEP_AROUND = 250;
+const rangeIsSame = (a, b) => {
+  if (!a || !b) {
+    return a === b;
+  }
+  return a.start === b.start && a.end === b.end;
+};
 
 // The rows a run has, and how it gets more. Two shapes behind one reader: the
 // caller holds them (items/count/itemStart), or the run asked for them and
@@ -58791,12 +58808,17 @@ const ITEM_STORE_KEEP_AROUND = 250;
 const useItemStore = ({
   count,
   itemsAction,
-  memoryBudget
+  memoryBudget,
+  onRequestStateChange
 }) => {
   // What the source kept of the collection when the screen it was on went away
   // (a range reader keeps the composition: see resource_range_reader.js). The
   // rows are drawn from it right away and the window is asked for again — the
   // revalidation below, entered from a fresh mount rather than from a write.
+  // A reader is an interface, not just a function that answers a range: a list
+  // handed something else keeps drawing rows and quietly gives up everything
+  // the reader holds for it (see resource_range_reader.js).
+  useRef(false);
   const pagesRef = useRef(null);
   let restored = false;
   if (!pagesRef.current) {
@@ -58864,6 +58886,51 @@ const useItemStore = ({
       virtual.refreshingSignal.value = virtual.refreshingSignal.peek() - 1;
     };
   }, [refreshing]);
+
+  // What the run is doing, for the screen around the list to draw: the list has
+  // its own skeletons, what is around it has to be told. Read from the request
+  // itself rather than pushed from each place that touches it, so a range
+  // called off and asked again right away stays one uninterrupted ask.
+  const requestStateRef = useRef({
+    busy: false,
+    refreshing: false,
+    range: null
+  });
+  const onRequestStateChangeRef = useRef(onRequestStateChange);
+  onRequestStateChangeRef.current = onRequestStateChange;
+  const publishRequestState = () => {
+    const request = requestRef.current;
+    const busy = request.busy;
+    const state = {
+      busy,
+      refreshing: busy && request.revalidating,
+      range: busy ? {
+        start: request.start,
+        end: request.end
+      } : null
+    };
+    const previous = requestStateRef.current;
+    if (previous.busy === state.busy && previous.refreshing === state.refreshing && rangeIsSame(previous.range, state.range)) {
+      return;
+    }
+    requestStateRef.current = state;
+    if (onRequestStateChangeRef.current) {
+      onRequestStateChangeRef.current(state);
+    }
+  };
+  // A list taken off the screen while it was asking leaves nothing ringing
+  // behind it: whoever is drawing "looking for rows" has to stop.
+  useLayoutEffect(() => {
+    return () => {
+      if (requestStateRef.current.busy && onRequestStateChangeRef.current) {
+        onRequestStateChangeRef.current({
+          busy: false,
+          refreshing: false,
+          range: null
+        });
+      }
+    };
+  }, []);
   const store = {
     rowCount,
     failure,
@@ -58954,7 +59021,7 @@ const useItemStore = ({
           end = start + budget - 1;
         }
       }
-      useLayoutEffect(() => {
+      const ask = () => {
         if (start === -1) {
           return;
         }
@@ -59027,6 +59094,7 @@ const useItemStore = ({
               staleRef.current = false;
               setRefreshing(false);
             }
+            publishRequestState();
           }
           if (revalidating && !current) {
             // Rows of a composition already superseded by a newer ask: keeping
@@ -59073,6 +59141,7 @@ const useItemStore = ({
           }
           request.busy = false;
           request.revalidating = false;
+          publishRequestState();
           if (revalidating) {
             // The rows from before stay: a revalidation that failed has
             // nothing better to put in their place.
@@ -59101,6 +59170,10 @@ const useItemStore = ({
         } else {
           done(result);
         }
+      };
+      useLayoutEffect(() => {
+        ask();
+        publishRequestState();
       });
     }
   };