Skip to content

Enhancement/11459 add loading spinner to notice ctas #12026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tofumatt merged 3 commits into from
Jan 6, 2026
Merged

Enhancement/11459 add loading spinner to notice ctas #12026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
de63f16
Add the loading spinner to SetupAnalyticsNotice.
jimmymadon Jan 5, 2026
ede4f1b
Add loading spinner to AnalyticsDisconnectedNotice CTA.
jimmymadon Jan 5, 2026
eb7f3ff
Move doc block to relevant area.
jimmymadon Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion assets/js/components/email-reporting/notices/AnalyticsDisconnectedNotice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useCallback } from '@wordpress/element';
import { useCallback, useState } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -45,6 +45,8 @@ const NoticeWithIntersectionObserver = withIntersectionObserver( Notice );
export default function AnalyticsDisconnectedNotice() {
const isViewOnly = useViewOnly();

const [ inProgress, setInProgress ] = useState( false );

const trackEvents = useNotificationEvents(
EMAIL_REPORTING_ANALYTICS_DISCONNECTED_NOTICE
);
Expand Down Expand Up @@ -74,6 +76,7 @@ export default function AnalyticsDisconnectedNotice() {
);

const handleCTAClick = useCallback( () => {
setInProgress( true );
trackEvents.confirm();
activateAnalytics();
}, [ trackEvents, activateAnalytics ] );
Expand Down Expand Up @@ -115,6 +118,8 @@ export default function AnalyticsDisconnectedNotice() {
? undefined
: {
label: __( 'Connect Analytics', 'google-site-kit' ),
inProgress,
disabled: inProgress,
onClick: handleCTAClick,
}
}
Expand Down
6 changes: 3 additions & 3 deletions assets/js/components/email-reporting/notices/EmailReportingDisabledNotice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ export default function EmailReportingDisabledNotice() {
EMAIL_REPORTING_DISABLED_NOTICE
);

// If the user is on the Admin Settings page already, then there
// will be no navigation when the "Edit settings" CTA is clicked,
// keeping the Settings Panel open. So we should close it.
const { setValue } = useDispatch( CORE_UI );
const onCTAClick = useCallback( () => {
trackEvents.confirm();
// If the user is on the Admin Settings page already, then there
// will be no navigation when the "Edit settings" CTA is clicked,
// keeping the Settings Panel open. So we should close it.
setValue( USER_SETTINGS_SELECTION_PANEL_OPENED_KEY, false );
}, [ setValue, trackEvents ] );

Expand Down
17 changes: 15 additions & 2 deletions assets/js/components/email-reporting/notices/SetupAnalyticsNotice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { createInterpolateElement, useCallback } from '@wordpress/element';
import {
createInterpolateElement,
useCallback,
useState,
} from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -40,6 +44,8 @@ export const EMAIL_REPORTING_SETUP_ANALYTICS_NOTICE_DISMISSED_ITEM =
'email-reporting-setup-analytics-notice';

export default function SetupAnalyticsNotice() {
const [ inProgress, setInProgress ] = useState( false );

const isEmailReportingEnabled = useSelect( ( select ) =>
select( CORE_SITE ).isEmailReportingEnabled()
);
Expand All @@ -66,6 +72,11 @@ export default function SetupAnalyticsNotice() {
MODULE_SLUG_ANALYTICS_4
);

const handleCTAClick = useCallback( () => {
setInProgress( true );
activateAnalytics();
}, [ activateAnalytics ] );

const handleDismiss = useCallback( async () => {
await dismissItem(
EMAIL_REPORTING_SETUP_ANALYTICS_NOTICE_DISMISSED_ITEM
Expand Down Expand Up @@ -110,7 +121,9 @@ export default function SetupAnalyticsNotice() {
) }
ctaButton={ {
label: __( 'Connect Analytics', 'google-site-kit' ),
onClick: activateAnalytics,
inProgress,
disabled: inProgress,
onClick: handleCTAClick,
} }
dismissButton={ {
label: __( 'Maybe later', 'google-site-kit' ),
Expand Down
Loading