@jsenv/navi 0.29.496 → 0.29.498

package/dist/jsenv_navi.js

@@ -10024,8 +10024,8 @@ const suspendScrollRecording = () => {
 // the reader reaching for the page: where they are is theirs (see
 // installScrollRestoration).
 let pendingRestoration = null;
-const startRestoration = (position) => {
-  const restoration = { position, due: false };
+const startRestoration = (position, { meanwhile = false } = {}) => {
+  const restoration = { position, due: false, meanwhile };
   pendingRestoration = restoration;
   return restoration;
 };
@@ -10038,6 +10038,7 @@ const putBack = (restoration) => {
   restoration.due = true;
   if (restorationHoldCount) {
     // The page is not whole yet: the last release puts it back.
+    putBackMeanwhile(restoration);
     return;
   }
   if (isDocumentHeld()) {
@@ -10084,6 +10085,24 @@ const isDocumentHeld = () => {
   return false;
 };
 
+// A return is photographed by its route transition as soon as its page has
+// rendered, stand-ins and all, and a position waiting for the page to be whole
+// is written after the movement, seen as a jump. So it is also written into
+// what is there meanwhile, as far as that goes — the browser clamps the rest —
+// and again once the page is whole, when what it stands on has grown or shrunk.
+const putBackMeanwhile = (restoration) => {
+  if (!restoration.meanwhile) {
+    return;
+  }
+  // Out of whatever commit or effect is asking: see scrollTo.
+  queueMicrotask(() => {
+    if (pendingRestoration !== restoration || isDocumentHeld()) {
+      return;
+    }
+    scrollTo(restoration.position);
+  });
+};
+
 // What a page holds instead: not the place, which stays the url's, but the
 // moment it is put back (see useHoldScrollRestoration). Counted: several parts
 // of one page can be waiting.
@@ -10227,6 +10246,7 @@ const putBackOnceAnswered = (restoration) => {
     });
     return;
   }
+  putBackMeanwhile(restoration);
   // A reader drawing its own wait subscribes in an effect, after the first
   // paint (see afterPaint): an answer that came before is drawn only then.
   let waitCount = 2;
@@ -10350,11 +10370,12 @@ const restoreScrollPosition = (url) => {
 };
 
 // A traversal back to `url`. The offset is written once the page returned to is
-// rendered and answered (see putBackOnceAnswered): written sooner, the document
-// still holds the page being left, or a stand-in for the one arriving, and
-// clamps it to that height. It is read at once all the same — a page left
-// taller than the one arriving is clamped by the render itself, and that clamp
-// is a scroll recorded under the url already returned to.
+// rendered (see whenPageRendered): written sooner, the document still holds the
+// page being left and clamps it to that height. Again once it has answered (see
+// putBackOnceAnswered), when it rendered stand-ins (see putBackMeanwhile). It
+// is read at once all the same — a page left taller than the one arriving is
+// clamped by the render itself, and that clamp is a scroll recorded under the
+// url already returned to.
 const restoreScrollPositionOnReturn = (url) => {
   pendingRestoration = null;
   const href = new URL(url, window.location.href).href;
@@ -10363,7 +10384,7 @@ const restoreScrollPositionOnReturn = (url) => {
   if (!position) {
     return;
   }
-  const restoration = startRestoration(position);
+  const restoration = startRestoration(position, { meanwhile: true });
   whenPageRendered(() => {
     putBackOnceAnswered(restoration);
   });
@@ -84872,19 +84893,28 @@ const useListScrollSync = ({
     });
   }, []);
   // What to do when the list's own geometry moves under it, kept fresh for the
-  // observer below (which is installed once).
+  // observer below (which is installed once). A held list is placed inside the
+  // resize delivery, so the browser paints it where it lands; answers whether
+  // it was.
   const onGeometryChangeRef = useRef(null);
   onGeometryChangeRef.current = () => {
-    settleWindow();
-    if (heldSomewhere) {
-      placeWhereHeld();
-      return true;
+    if (!heldSomewhere) {
+      return false;
     }
-    // Items that came in at another size than what stood in for them (a
-    // skeleton becoming its item) leave the window short of the screen, or past
-    // it, and nothing scrolled to say so.
+    settleWindow();
+    placeWhereHeld();
+    return true;
+  };
+  // Items that came in at another size than what stood in for them (a
+  // skeleton becoming its item) leave the window short of the screen, or past
+  // it, and nothing scrolled to say so. Asked on the next frame, not inside
+  // the resize delivery: the window it frames is a render, which resizes what
+  // is observed once more, and the browser gives up on the loop
+  // ("ResizeObserver loop completed with undelivered notifications").
+  const onItemsResizedRef = useRef(null);
+  onItemsResizedRef.current = () => {
+    settleWindow();
     evaluateWindowRef.current("items resized");
-    return false;
   };
   // The box around a held list changing shape is the hold's to answer too: it
   // places the list again, the way it writes every scroll of its own (see
@@ -85032,10 +85062,20 @@ const useListScrollSync = ({
     // which this would undo. The SCROLLER resizing is the window around it
     // changing shape, and then the item that was at the top goes back where it
     // was.
+    let itemsResizedFrame;
     const putTopItemBack = entries => {
       const listResized = entries.some(entry => entry.target === listEl);
-      if (listResized && onGeometryChangeRef.current()) {
-        return;
+      if (listResized) {
+        if (onGeometryChangeRef.current()) {
+          return;
+        }
+        cancelAnimationFrame(itemsResizedFrame);
+        itemsResizedFrame = requestAnimationFrame(() => {
+          if (pageLeftRef.current) {
+            return;
+          }
+          onItemsResizedRef.current();
+        });
       }
       if (!entries.some(entry => entry.target === scrollerEl)) {
         return;
@@ -85088,6 +85128,7 @@ const useListScrollSync = ({
     observer.observe(listEl);
     return () => {
       observer.disconnect();
+      cancelAnimationFrame(itemsResizedFrame);
     };
   }, [scrollerElResolved]);