From c6bcf9fa674abdc971d275bc8f60c45082d67568 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Tue, 21 Mar 2023 19:30:24 +0800
Subject: [PATCH] Fix incorrect data while loading in useRecommendedPlugins.

See the incorrect data issue in https://github.com/woocommerce/woocommerce/pull/37126#discussion_r1141936304.
---
 .../DiscoverTools/useRecommendedPlugins.ts    | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts
index a17107498e6..277f964426e 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts
@@ -15,7 +15,10 @@ const selector = 'getRecommendedPlugins';
 const category = 'marketing';
 
 export const useRecommendedPlugins = () => {
-	const { data: dataRecommendedChannels } = useRecommendedChannels();
+	const {
+		loading: loadingRecommendedChannels,
+		data: dataRecommendedChannels,
+	} = useRecommendedChannels();
 	const { invalidateResolution, installAndActivateRecommendedPlugin } =
 		useDispatch( STORE_KEY );
 
@@ -24,25 +27,28 @@ export const useRecommendedPlugins = () => {
 		invalidateResolution( selector, [ category ] );
 	};
 
-	const { isLoading, plugins } = useSelect( ( select ) => {
-		const { getRecommendedPlugins, hasFinishedResolution } =
-			select( STORE_KEY );
+	const { loading: loadingRecommendedPlugins, data: dataRecommendedPlugins } =
+		useSelect( ( select ) => {
+			const { getRecommendedPlugins, hasFinishedResolution } =
+				select( STORE_KEY );
 
-		return {
-			isLoading: ! hasFinishedResolution( selector, [ category ] ),
-			plugins: getRecommendedPlugins< RecommendedPlugin[] >( category ),
-		};
-	}, [] );
+			return {
+				loading: ! hasFinishedResolution( selector, [ category ] ),
+				data: getRecommendedPlugins< RecommendedPlugin[] >( category ),
+			};
+		}, [] );
+
+	const loading = loadingRecommendedPlugins || loadingRecommendedChannels;
 
 	const recommendedPluginsWithoutChannels = differenceWith(
-		plugins,
+		dataRecommendedPlugins,
 		dataRecommendedChannels || [],
 		( a, b ) => a.product === b.product
 	);
 
 	return {
-		isInitializing: ! recommendedPluginsWithoutChannels.length && isLoading,
-		isLoading,
+		isInitializing: ! recommendedPluginsWithoutChannels.length && loading,
+		isLoading: loading,
 		plugins: recommendedPluginsWithoutChannels,
 		installAndActivate,
 	};