woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

💫 Hide the save confirmation after a short time

Browse source
This commit is contained in:
Philipp Stracker 2025-02-07 16:12:04 +01:00
parent 5869c6be21
commit 66dddcff8b
No known key found for this signature in database
1 changed files with 26 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

31
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js
View file

@ -1,6 +1,6 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useCallback, useEffect, useState } from '@wordpress/element';
import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
import TopNavigation from '../../../ReusableComponents/TopNavigation';
import { useSaveSettings } from '../../../../hooks/useSaveSettings';
@ -47,20 +47,25 @@ const SaveStateMessage = () => {
const [ isSaving, setIsSaving ] = useState( false );
const [ showMessage, setShowMessage ] = useState( false );
const { onStarted, onFinished } = CommonHooks.useActivityObserver();
const refHideTimer = useRef( null );
const handleActivityStart = useCallback( ( started ) => {
if ( ! started.match( /^persist/ ) ) {
const handleActivityStart = useCallback(
( started ) => {
if ( isSaving || ! started.match( /^persist/ ) ) {
return;
}
setIsSaving( true );
}, [] );
setShowMessage( false );
},
[ isSaving ]
);
const handleActivityDone = useCallback(
( done, remaining ) => {
if ( remaining.length || ! isSaving ) {
return;
}
setIsSaving( false );
setShowMessage( true );
},
[ isSaving ]
@ -74,6 +79,22 @@ const SaveStateMessage = () => {
onFinished( handleActivityDone );
}, [ onFinished, handleActivityDone ] );
useEffect( () => {
// Clear the timer, every time the "showMessage" flag changes.
if ( refHideTimer.current ) {
clearTimeout( refHideTimer.current );
refHideTimer.current = null;
}
if ( ! showMessage || isSaving ) {
return;
}
// Restart the hide-timer, when the message is visible.
refHideTimer.current = setTimeout( () => {
setShowMessage( false );
}, 2500 );
}, [ showMessage, isSaving ] );
if ( ! showMessage ) {
return null;
}