fix flickering message

Author: dhasilva

projects/packages/forms/src/dashboard/components/empty-responses/index.tsx

@@ -28,7 +28,6 @@ import type { Integration } from '../../../types/index.ts';
 
 type UseInstallAkismetReturn = {
 	shouldShowAkismetCta: boolean;
-	isIntegrationsLoading: boolean;
 	wrapperBody: string;
 	isInstallingAkismet: boolean;
 	canPerformAkismetAction: boolean;
@@ -48,20 +47,16 @@ type EmptyResponsesProps = {
  * @return {UseInstallAkismetReturn} An object containing the necessary data and functions to handle Akismet installation and activation.
  */
 const useInstallAkismet = (): UseInstallAkismetReturn => {
-	const { akismetIntegration, isIntegrationsLoading } = useSelect(
-		( select: SelectIntegrations ) => {
-			const store = select( INTEGRATIONS_STORE );
-			const integrations = store.getIntegrations() || [];
-
-			return {
-				akismetIntegration: integrations.find(
-					( integration: Integration ) => integration.id === 'akismet'
-				),
-				isIntegrationsLoading: store.isIntegrationsLoading(),
-			};
-		},
-		[]
-	) as { akismetIntegration?: Integration; isIntegrationsLoading: boolean };
+	const { akismetIntegration } = useSelect( ( select: SelectIntegrations ) => {
+		const store = select( INTEGRATIONS_STORE );
+		const integrations = store.getIntegrations() || [];
+
+		return {
+			akismetIntegration: integrations.find(
+				( integration: Integration ) => integration.id === 'akismet'
+			),
+		};
+	}, [] ) as { akismetIntegration?: Integration };
 
 	const { refreshIntegrations } = useDispatch( INTEGRATIONS_STORE ) as IntegrationsDispatch;
 
@@ -142,7 +137,6 @@ const useInstallAkismet = (): UseInstallAkismetReturn => {
 
 	return {
 		shouldShowAkismetCta,
-		isIntegrationsLoading,
 		wrapperBody,
 		isInstallingAkismet,
 		canPerformAkismetAction,
@@ -167,7 +161,6 @@ const EmptyResponses = ( { status, isSearch, readStatusFilter }: EmptyResponsesP
 	const emptyTrashDays = useConfigValue( 'emptyTrashDays' ) ?? 0;
 	const {
 		shouldShowAkismetCta,
-		isIntegrationsLoading,
 		wrapperBody,
 		isInstallingAkismet,
 		canPerformAkismetAction,
@@ -210,7 +203,7 @@ const EmptyResponses = ( { status, isSearch, readStatusFilter }: EmptyResponsesP
 	);
 
 	if ( status === 'spam' ) {
-		if ( shouldShowAkismetCta && ! isIntegrationsLoading ) {
+		if ( shouldShowAkismetCta ) {
 			return (
 				<EmptyWrapper
 					heading={ noSpamHeading }

projects/packages/forms/src/dashboard/inbox/stage/index.js

@@ -3,9 +3,11 @@
  */
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import { JetpackLogo } from '@automattic/jetpack-components';
+import { isSimpleSite } from '@automattic/jetpack-script-data';
 import { Badge } from '@automattic/ui';
 import { ExternalLink, Modal } from '@wordpress/components';
 import { useResizeObserver, useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews/wp';
 import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useCallback, useMemo, useState } from '@wordpress/element';
@@ -19,6 +21,7 @@ import { useSearchParams } from 'react-router';
  * Internal dependencies
  */
 import useConfigValue from '../../../hooks/use-config-value.ts';
+import { INTEGRATIONS_STORE } from '../../../store/integrations/index.ts';
 import CreateFormButton from '../../components/create-form-button/index.tsx';
 import EmptyResponses from '../../components/empty-responses/index.tsx';
 import EmptySpamButton from '../../components/empty-spam-button/index.tsx';
@@ -137,6 +140,23 @@ export default function InboxView() {
 		totalItems,
 		totalPages,
 	} = useInboxData();
+	const isAkismetStatusPending = useSelect(
+		select => {
+			const store = select( INTEGRATIONS_STORE );
+			const integrations = store.getIntegrations() || [];
+			const isIntegrationsLoading = store.isIntegrationsLoading();
+			const akismetIntegration = integrations.find( integration => integration.id === 'akismet' );
+
+			return (
+				statusFilter === 'spam' &&
+				! isSimpleSite() &&
+				( isIntegrationsLoading || ! akismetIntegration || akismetIntegration.__isPartial )
+			);
+		},
+		[ statusFilter ]
+	);
+
+	const isInboxLoading = isLoadingData || isAkismetStatusPending;
 
 	useEffect( () => {
 		const _filters = view.filters?.reduce( ( accumulator, { field, value } ) => {
@@ -497,7 +517,7 @@ export default function InboxView() {
 				fields={ fields }
 				actions={ actions }
 				data={ records || EMPTY_ARRAY }
-				isLoading={ isLoadingData }
+				isLoading={ isInboxLoading }
 				view={ view }
 				onChangeView={ setView }
 				selection={ selection }