35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
|
|
export const useActivationOverscan = (enabled: boolean, normalOverscan: number): number => {
|
|
const [recoveryStep, setRecoveryStep] = React.useState(0);
|
|
|
|
React.useEffect(() => {
|
|
if (!enabled) {
|
|
setRecoveryStep(0);
|
|
return;
|
|
}
|
|
|
|
let halfOverscanFrame: number | undefined;
|
|
const paintOpportunityFrame = window.requestAnimationFrame(() => {
|
|
halfOverscanFrame = window.requestAnimationFrame(() => {
|
|
React.startTransition(() => setRecoveryStep(1));
|
|
});
|
|
});
|
|
return () => {
|
|
window.cancelAnimationFrame(paintOpportunityFrame);
|
|
if (halfOverscanFrame !== undefined) window.cancelAnimationFrame(halfOverscanFrame);
|
|
};
|
|
}, [enabled]);
|
|
|
|
React.useEffect(() => {
|
|
if (!enabled || recoveryStep !== 1) return;
|
|
const normalOverscanFrame = window.requestAnimationFrame(() => {
|
|
React.startTransition(() => setRecoveryStep(2));
|
|
});
|
|
return () => window.cancelAnimationFrame(normalOverscanFrame);
|
|
}, [enabled, recoveryStep]);
|
|
|
|
if (!enabled || recoveryStep >= 2) return normalOverscan;
|
|
return recoveryStep === 0 ? 0 : Math.ceil(normalOverscan / 2);
|
|
};
|