Create isComplementaryAreaLoading selector

WordPress · Feb 3, 2023 · 573ddf9 · 573ddf9
1 parent 0657420
commit 573ddf9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
@@ -12,7 +12,6 @@ import { __ } from '@wordpress/i18n';
 import { check, starEmpty, starFilled } from '@wordpress/icons';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as viewportStore } from '@wordpress/viewport';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -104,17 +103,16 @@ function ComplementaryArea( {
 	const { isLoading, isActive, isPinned, activeArea, isSmall, isLarge } =
 		useSelect(
 			( select ) => {
-				const { getActiveComplementaryArea, isItemPinned } =
-					select( interfaceStore );
+				const {
+					getActiveComplementaryArea,
+					isComplementaryAreaLoading,
+					isItemPinned,
+				} = select( interfaceStore );
 
-				const isVisible = select( preferencesStore ).get(
-					scope,
-					'isComplementaryAreaVisible'
-				);
 				const _activeArea = getActiveComplementaryArea( scope );
 
 				return {
-					isLoading: isVisible && _activeArea === undefined,
+					isLoading: isComplementaryAreaLoading( scope ),
 					isActive: _activeArea === identifier,
 					isPinned: isItemPinned( scope, identifier ),
 					activeArea: _activeArea,
@@ -147,14 +145,7 @@ function ComplementaryArea( {
 		} else if ( activeArea === undefined && isSmall ) {
 			disableComplementaryArea( scope, identifier );
 		}
-	}, [
-		activeArea,
-		isActiveByDefault,
-		scope,
-		identifier,
-		isSmall,
-		isLoading,
-	] );
+	}, [ activeArea, isActiveByDefault, scope, identifier, isSmall ] );
 
 	return (
 		<>

diff --git a/packages/interface/src/store/selectors.js b/packages/interface/src/store/selectors.js
@@ -28,14 +28,26 @@ export const getActiveComplementaryArea = createRegistrySelector(
 		}
 
 		// Return `null` to indicate the user hid the complementary area.
-		if ( ! isComplementaryAreaVisible ) {
+		if ( isComplementaryAreaVisible === false ) {
 			return null;
 		}
 
 		return state?.complementaryAreas?.[ scope ];
 	}
 );
 
+export const isComplementaryAreaLoading = createRegistrySelector(
+	( select ) => ( state, scope ) => {
+		const isVisible = select( preferencesStore ).get(
+			scope,
+			'isComplementaryAreaVisible'
+		);
+		const identifier = state?.complementaryAreas?.[ scope ];
+
+		return isVisible && identifier === undefined;
+	}
+);
+
 /**
  * Returns a boolean indicating if an item is pinned or not.
  *