Update welcome banner state after red bubble slugs load

Automattic · Mar 7, 2025 · 6d40418 · 6d40418
1 parent c56a188
commit 6d40418
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/projects/packages/my-jetpack/_inc/data/welcome-banner/use-welcome-banner.ts b/projects/packages/my-jetpack/_inc/data/welcome-banner/use-welcome-banner.ts
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useEffect } from 'react';
 import { useValueStore } from '../../context/value-store/valueStoreContext';
 import {
 	QUERY_DISMISS_WELCOME_BANNER_KEY,
@@ -32,6 +32,17 @@ const useWelcomeBanner = () => {
 		redBubbleAlertKeys.includes( 'welcome-banner-active' )
 	);
 
+	useEffect( () => {
+		if ( ! isRedBubbleAlertsLoading && ! isRedBubbleAlertsError ) {
+			setIsWelcomeBannerVisible( redBubbleAlertKeys.includes( 'welcome-banner-active' ) );
+		}
+	}, [
+		isRedBubbleAlertsError,
+		isRedBubbleAlertsLoading,
+		redBubbleAlertKeys,
+		setIsWelcomeBannerVisible,
+	] );
+
 	const { mutate: handleDismissWelcomeBanner } = useSimpleMutation( {
 		name: QUERY_DISMISS_WELCOME_BANNER_KEY,
 		query: {