Editor: Add loading state to the 'PageAttributesParent' component (#6…

…9062) Unlinked contributors: mapk, ItsJonQ, MichaelArestad. Co-authored-by: Mamaduka <[email protected]> Co-authored-by: karmatosed <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: iandunn <[email protected]>
WordPress · Feb 11, 2025 · ceb88fa · ceb88fa
1 parent aaa5aee
commit ceb88fa
Showing 1 changed file with 55 additions and 38 deletions.
diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js
@@ -61,47 +61,63 @@ export const getItemPriority = ( name, searchValue ) => {
 export function PageAttributesParent() {
 	const { editPost } = useDispatch( editorStore );
 	const [ fieldValue, setFieldValue ] = useState( false );
-	const { isHierarchical, parentPostId, parentPostTitle, pageItems } =
-		useSelect(
-			( select ) => {
-				const { getPostType, getEntityRecords, getEntityRecord } =
-					select( coreStore );
-				const { getCurrentPostId, getEditedPostAttribute } =
-					select( editorStore );
-				const postTypeSlug = getEditedPostAttribute( 'type' );
-				const pageId = getEditedPostAttribute( 'parent' );
-				const pType = getPostType( postTypeSlug );
-				const postId = getCurrentPostId();
-				const postIsHierarchical = pType?.hierarchical ?? false;
-				const query = {
-					per_page: 100,
-					exclude: postId,
-					parent_exclude: postId,
-					orderby: 'menu_order',
-					order: 'asc',
-					_fields: 'id,title,parent',
-				};
+	const {
+		isHierarchical,
+		parentPostId,
+		parentPostTitle,
+		pageItems,
+		isLoading,
+	} = useSelect(
+		( select ) => {
+			const {
+				getPostType,
+				getEntityRecords,
+				getEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const { getCurrentPostId, getEditedPostAttribute } =
+				select( editorStore );
+			const postTypeSlug = getEditedPostAttribute( 'type' );
+			const pageId = getEditedPostAttribute( 'parent' );
+			const pType = getPostType( postTypeSlug );
+			const postId = getCurrentPostId();
+			const postIsHierarchical = pType?.hierarchical ?? false;
+			const query = {
+				per_page: 100,
+				exclude: postId,
+				parent_exclude: postId,
+				orderby: 'menu_order',
+				order: 'asc',
+				_fields: 'id,title,parent',
+			};
 
-				// Perform a search when the field is changed.
-				if ( !! fieldValue ) {
-					query.search = fieldValue;
-				}
+			// Perform a search when the field is changed.
+			if ( !! fieldValue ) {
+				query.search = fieldValue;
+			}
 
-				const parentPost = pageId
-					? getEntityRecord( 'postType', postTypeSlug, pageId )
-					: null;
+			const parentPost = pageId
+				? getEntityRecord( 'postType', postTypeSlug, pageId )
+				: null;
 
-				return {
-					isHierarchical: postIsHierarchical,
-					parentPostId: pageId,
-					parentPostTitle: parentPost ? getTitle( parentPost ) : '',
-					pageItems: postIsHierarchical
-						? getEntityRecords( 'postType', postTypeSlug, query )
-						: null,
-				};
-			},
-			[ fieldValue ]
-		);
+			return {
+				isHierarchical: postIsHierarchical,
+				parentPostId: pageId,
+				parentPostTitle: parentPost ? getTitle( parentPost ) : '',
+				pageItems: postIsHierarchical
+					? getEntityRecords( 'postType', postTypeSlug, query )
+					: null,
+				isLoading: postIsHierarchical
+					? isResolving( 'getEntityRecords', [
+							'postType',
+							postTypeSlug,
+							query,
+					  ] )
+					: false,
+			};
+		},
+		[ fieldValue ]
+	);
 
 	const parentOptions = useMemo( () => {
 		const getOptionsFromTree = ( tree, level = 0 ) => {
@@ -187,6 +203,7 @@ export function PageAttributesParent() {
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleChange }
 			hideLabelFromVision
+			isLoading={ isLoading }
 		/>
 	);
 }