Prevent layout recalculations in some animations

This commit is contained in:
Fedor Indutny 2022-11-23 12:13:13 -08:00 committed by GitHub
parent 97454b6bac
commit e3299b0445
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 52 additions and 27 deletions

View file

@ -115,33 +115,33 @@ export function CallingToastManager(props: PropsType): JSX.Element {
toast = screenSharingToast;
}
const [toastMessage, setToastMessage] = useState('');
const [isVisible, setIsVisible] = useState(false);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const dismissToast = useCallback(() => {
if (timeoutRef) {
setToastMessage('');
setIsVisible(false);
}
}, [setToastMessage, timeoutRef]);
}, [setIsVisible, timeoutRef]);
useEffect(() => {
if (toast) {
if (toast.type === 'dismissable') {
clearTimeoutIfNecessary(timeoutRef.current);
timeoutRef.current = setTimeout(dismissToast, DEFAULT_LIFETIME);
}
setIsVisible(toast !== undefined);
}, [toast]);
setToastMessage(toast.message);
useEffect(() => {
if (toast?.type === 'dismissable') {
clearTimeoutIfNecessary(timeoutRef.current);
timeoutRef.current = setTimeout(dismissToast, DEFAULT_LIFETIME);
}
return () => {
clearTimeoutIfNecessary(timeoutRef.current);
};
}, [dismissToast, setToastMessage, timeoutRef, toast]);
}, [dismissToast, setIsVisible, timeoutRef, toast]);
return (
<CallingToast isVisible={Boolean(toastMessage)} onClick={dismissToast}>
{toastMessage}
<CallingToast isVisible={isVisible} onClick={dismissToast}>
{toast?.message}
</CallingToast>
);
}