fix(library): the wall reads its own width when it stands, not when the visit opens
The shelf is laid out in the width the wall reports, and that width was read once, by the effect that watches the wall's own element. The phone's layout stands where the wall does, so a visit that opens on the phone mounts the wall with nothing to measure: the effect returned with the width still nought and never ran again, and every row of the shelf was laid out one pixel wide — a library of blank boxes until another render made that effect run (SINGLE and ALL THUMBS are two of them, which is why the toggle brought the pictures back). It is read after every render now, the way the window of rows the wall draws already is (see `useWallWindow`), and the effect keeps the resizing itself. Measured on 8090, phone 390 handed to the desk: the tiles were 1x1 px and are now 85x113 (and 120x160 at 1440), all loaded, nothing left in `.lib-noimg`.
This commit is contained in:
@@ -4404,16 +4404,29 @@ function useStripWindow(count: number, on: boolean): { ref: RefObject<HTMLDivEle
|
||||
// longer has is a row that runs past the wall or stops short of it.
|
||||
function useWallWidth(ref: RefObject<HTMLDivElement>, on: boolean): number {
|
||||
const [width, setWidth] = useState(0);
|
||||
// Read off the wall that is up and not off the one this was set up on: the wall
|
||||
// is what the desk draws, and the phone's shelf stands in its place, so a visit
|
||||
// that opens on the phone mounts it with no wall to measure — and the width left
|
||||
// at nought lays every row of the shelf out one pixel wide, which is a wall of
|
||||
// nothing until something else makes the effect below run again. So it is read
|
||||
// after every render, the way the window the wall draws is (see `useWallWindow`).
|
||||
const read = useCallback(() => {
|
||||
const el = ref.current;
|
||||
if (!el || !el.clientWidth) return;
|
||||
setWidth((prev) => (prev === el.clientWidth ? prev : el.clientWidth));
|
||||
}, [ref]);
|
||||
useLayoutEffect(() => {
|
||||
read();
|
||||
});
|
||||
useLayoutEffect(() => {
|
||||
if (!on) return;
|
||||
read();
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const read = () => setWidth((prev) => (prev === el.clientWidth ? prev : el.clientWidth));
|
||||
read();
|
||||
const ro = new ResizeObserver(read);
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, [ref, on]);
|
||||
}, [ref, on, read]);
|
||||
return width;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user