Request variations conditionally (#47360)

* Get variations conditionally

* Make second call conditionally

* Add changelog

* Remove usesContext from JSON

packages/js/product-editor/changelog/dev-47359_request_variations_conditionally

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Request variations conditionally #47360

packages/js/product-editor/src/blocks/product-fields/variation-items/edit.tsx

@@ -32,7 +32,7 @@ import { EmptyState } from './empty-state';
 
 export function Edit( {
 	attributes,
-	context,
+	context: { isInSelectedTab },
 }: ProductEditorBlockEditProps< VariationOptionsBlockAttributes > ) {
 	const noticeDimissed = useRef( false );
 	const { invalidateResolution } = useDispatch(
@@ -79,14 +79,19 @@ export function Edit( {
 			);
 
 			return {
-				totalCountWithoutPrice: productHasOptions
-					? getProductVariationsTotalCount< number >(
-							totalCountWithoutPriceRequestParams
-					  )
-					: 0,
+				totalCountWithoutPrice:
+					isInSelectedTab && productHasOptions
+						? getProductVariationsTotalCount< number >(
+								totalCountWithoutPriceRequestParams
+						  )
+						: 0,
 			};
 		},
-		[ productHasOptions, totalCountWithoutPriceRequestParams ]
+		[
+			isInSelectedTab,
+			productHasOptions,
+			totalCountWithoutPriceRequestParams,
+		]
 	);
 
 	const {
@@ -184,6 +189,7 @@ export function Edit( {
 	return (
 		<div { ...blockProps }>
 			<VariationsTable
+				isVisible={ isInSelectedTab }
 				ref={ variationTableRef as React.Ref< HTMLDivElement > }
 				noticeText={ noticeText }
 				onNoticeDismiss={ () => {
@@ -220,7 +226,7 @@ export function Edit( {
 					}
 				} }
 			/>
-			{ context.isInSelectedTab && <VariableProductTour /> }
+			{ isInSelectedTab && <VariableProductTour /> }
 		</div>
 	);
 }

packages/js/product-editor/src/components/variations-table/use-variations/use-variations.ts

@@ -8,13 +8,7 @@ import {
 	ProductVariation,
 } from '@woocommerce/data';
 import { dispatch, resolveSelect } from '@wordpress/data';
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -487,7 +481,7 @@ export function useVariations( { productId }: UseVariationsProps ) {
 
 	const wasGenerating = useRef( false );
 
-	useEffect( () => {
+	function getCurrentVariations() {
 		if ( isGenerating ) {
 			setFilters( [] );
 			onClearSelection();
@@ -508,7 +502,7 @@ export function useVariations( { productId }: UseVariationsProps ) {
 		}
 
 		wasGenerating.current = Boolean( isGenerating );
-	}, [ productId, isGenerating ] );
+	}
 
 	return {
 		isLoading,
@@ -541,5 +535,6 @@ export function useVariations( { productId }: UseVariationsProps ) {
 		isGenerating,
 		onGenerate,
 		variationsError: generateError ?? getVariationsError,
+		getCurrentVariations,
 	};
 }

packages/js/product-editor/src/components/variations-table/variations-table.tsx

@@ -15,6 +15,7 @@ import {
 	Fragment,
 	forwardRef,
 	useMemo,
+	useEffect,
 } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -35,6 +36,7 @@ import { VariationsTableRow } from './variations-table-row';
 import { MultipleUpdateMenu } from './variation-actions-menus';
 
 type VariationsTableProps = {
+	isVisible?: boolean;
 	noticeText?: string;
 	noticeStatus?: 'error' | 'warning' | 'success' | 'info';
 	onNoticeDismiss?: () => void;
@@ -97,6 +99,7 @@ export const VariationsTable = forwardRef<
 	VariationsTableProps
 >( function Table(
 	{
+		isVisible = false,
 		noticeText,
 		noticeActions = [],
 		noticeStatus = 'error',
@@ -158,8 +161,15 @@ export const VariationsTable = forwardRef<
 		isGenerating,
 		variationsError,
 		onGenerate,
+		getCurrentVariations,
 	} = useVariations( { productId } );
 
+	useEffect( () => {
+		if ( isVisible ) {
+			getCurrentVariations();
+		}
+	}, [ isVisible, isGenerating, productId ] );
+
 	function handleEmptyTableStateActionClick() {
 		onGenerate( productAttributes );
 	}