fix: annuler les deux RAFs au cleanup pour éviter la double transition
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
Le cleanup n'annulait que raf1. Si raf1 avait déjà tiré avant le cleanup React, raf2 restait en queue et déclenchait une deuxième transition (l'aller-retour visible à la fin de chaque frame). Fix : stocker raf2 dans la closure et l'annuler aussi. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -114,8 +114,10 @@ export function HeatMap({ transactions }: HeatMapProps) {
|
||||
update();
|
||||
|
||||
// 5. Simultaneously: canvas fades in, overlay fades out → true crossfade
|
||||
const raf = requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
// Both RAF ids must be cancelled on cleanup to avoid double-transition
|
||||
let raf2 = 0;
|
||||
const raf1 = requestAnimationFrame(() => {
|
||||
raf2 = requestAnimationFrame(() => {
|
||||
const DURATION = '0.55s ease-in-out';
|
||||
canvas.style.transition = `opacity ${DURATION}`;
|
||||
canvas.style.opacity = '1';
|
||||
@@ -124,7 +126,7 @@ export function HeatMap({ transactions }: HeatMapProps) {
|
||||
});
|
||||
});
|
||||
|
||||
return () => cancelAnimationFrame(raf);
|
||||
return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); };
|
||||
}, [transactions]);
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user