fix(ideal-image): fix waypoint initial scroll bug (#11026)
Some checks failed
Argos CI / take-screenshots (push) Has been cancelled
Build Hash Router / Build Hash Router (push) Has been cancelled
Canary Release / Publish Canary (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
Continuous Releases / Continuous Releases (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (18.0) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (20) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (22) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (node-modules, -s) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (node-modules, -st) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (pnp, -s) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (pnp, -st) (push) Has been cancelled
E2E Tests / E2E — npm (push) Has been cancelled
E2E Tests / E2E — pnpm (push) Has been cancelled

fiw waypoint initial scroll bug
This commit is contained in:
Sébastien Lorber 2025-03-24 15:31:37 +01:00 committed by GitHub
parent 43fdb825e8
commit e64e0e7c96
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -18,6 +18,18 @@ function addEventListener(
return () => element.removeEventListener(type, listener, options);
}
// Because waypoint may fire before the setState() updates due to batching
// queueMicrotask is a better option than setTimeout() or React.flushSync()
// See https://github.com/facebook/docusaurus/issues/11018
// See https://github.com/civiccc/react-waypoint/blob/0905ac5a073131147c96dd0694bd6f1b6ee8bc97/src/onNextTick.js
function subscribeMicrotask(callback: () => void) {
let subscribed = true;
queueMicrotask(() => {
if (subscribed) callback();
});
return () => (subscribed = false);
}
type Position = 'above' | 'inside' | 'below' | 'invisible';
type Props = {
@ -70,12 +82,15 @@ class WaypointClient extends React.Component<Props> {
{passive: true},
);
const unsubscribeInitialScroll = subscribeMicrotask(() => {
this._handleScroll();
});
this.unsubscribe = () => {
unsubscribeScroll();
unsubscribeResize();
unsubscribeInitialScroll();
};
this._handleScroll();
}
override componentDidUpdate() {