Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix redundant confetti on LYS task congrats page (#47838) 

* Add useRef to ensure confetti is only trigerred once

* Changelog
This commit is contained in:
Ilyas Foo 2024-05-27 21:01:40 +08:00 committed by GitHub
parent 977f8289af
commit 012f0d3418
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-47791-confetti-pop-every-render Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Added useRef to ensure confetti animation is only run once

7
packages/js/components/src/confetti-animation/index.ts
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import confetti from 'canvas-confetti';
import { useEffect } from '@wordpress/element';
import { useEffect, useRef } from '@wordpress/element';
/**
* Note: This was copied over from https://github.com/Automattic/wp-calypso/blob/a39539547780871d0371a20fcf21c767a86a1010/packages/components/src/confetti/index.ts
@ -83,9 +83,12 @@ export const ConfettiAnimation = ( {
delay = 0,
colors = COLORS,
} ) => {
const hasRun = useRef( false );
useEffect( () => {
if ( trigger ) {
if ( ! hasRun.current && trigger ) {
setTimeout( () => fireConfetti( colors ), delay );
hasRun.current = true;
}
}, [ trigger, delay, colors ] );

4
plugins/woocommerce/changelog/fix-47791-confetti-pop-every-render Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Added useRef to ensure confetti animation is only run once