3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-28 17:57:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(ideal-image): fix waypoint initial scroll bug (#11026)

Browse source 
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
1 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImage/waypoint.tsx
View file

@ -18,6 +18,18 @@ function addEventListener(
return () => element.removeEventListener(type, listener, options); 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 Position = 'above' | 'inside' | 'below' | 'invisible';
type Props = { type Props = {
@ -70,12 +82,15 @@ class WaypointClient extends React.Component<Props> {
{passive: true}, {passive: true},
); );
const unsubscribeInitialScroll = subscribeMicrotask(() => {
this._handleScroll();
});
this.unsubscribe = () => { this.unsubscribe = () => {
unsubscribeScroll(); unsubscribeScroll();
unsubscribeResize(); unsubscribeResize();
unsubscribeInitialScroll();
}; };
this._handleScroll();
} }
override componentDidUpdate() { override componentDidUpdate() {