Adds ui placeholders for selecting publishing principles

packages/js/src/settings/components/formik-page-select-field.js

@@ -40,7 +40,6 @@ const FormikPageSelectField = ( { name, id, className = "", ...props } ) => {
 	const { fetchPages } = useDispatchSettings();
 	const [ { value, ...field }, , { setTouched, setValue } ] = useField( { type: "select", name, id, ...props } );
 	const [ status, setStatus ] = useState( ASYNC_ACTION_STATUS.idle );
-	const [ initialPagesFound, setInitialPagesFound ] = useState( false );
 	const [ queriedPageIds, setQueriedPageIds ] = useState( [] );
 	const canCreatePages = useSelectSettings( "selectPreference", [], "canCreatePages", false );
 	const createPageUrl = useSelectSettings( "selectPreference", [], "createPageUrl", "" );
@@ -77,8 +76,8 @@ const FormikPageSelectField = ( { name, id, className = "", ...props } ) => {
 	const handleQueryChange = useCallback( event => debouncedFetchPages( event.target.value ), [ debouncedFetchPages ] );
 
 	useEffect( () => {
-			setQueriedPageIds( map( pages, page => page.id ) );
-	}, [ pages, initialPagesFound ] );
+		setQueriedPageIds( map( pages, page => page.id ) );
+	}, [ pages ] );
 
 	return (
 		<AutocompleteField

packages/js/src/settings/store/pages.js

@@ -2,12 +2,14 @@
 import { createEntityAdapter, createSelector, createSlice } from "@reduxjs/toolkit";
 import apiFetch from "@wordpress/api-fetch";
 import { buildQueryString } from "@wordpress/url";
-import { get, map, trim } from "lodash";
+import { map, trim } from "lodash";
 import { ASYNC_ACTION_NAMES, ASYNC_ACTION_STATUS } from "../constants";
 
 const pagesAdapter = createEntityAdapter();
 
 export const FETCH_PAGES_ACTION_NAME = "fetchPages";
+// Global abort controller for this reducer to abort requests made by multiple selects.
+let abortController;
 
 /**
  * @param {Object} queryData The query data.
@@ -82,7 +84,6 @@ export const pageSelectors = {
 	selectPageIds: pageAdapterSelectors.selectIds,
 	selectPageById: pageAdapterSelectors.selectById,
 	selectPages: pageAdapterSelectors.selectEntities,
-	selectPagesFetchStatus: state => get( state, "pages.status", {} ),
 };
 pageSelectors.selectPagesWith = createSelector(
 	[
@@ -106,10 +107,19 @@ export const pageActions = {
 	fetchPages,
 };
 
+
 export const pageControls = {
-	[ FETCH_PAGES_ACTION_NAME ]: async( { payload } ) => apiFetch( {
-		path: `/wp/v2/pages?${ buildQueryString( payload ) }`,
-	} ),
+	[ FETCH_PAGES_ACTION_NAME ]: async( { payload } ) => {
+		if ( abortController ) {
+			abortController?.abort();
+		}
+
+		abortController = new AbortController();
+		await apiFetch( {
+			path: `/wp/v2/pages?${ buildQueryString( payload ) }`,
+			signal: abortController?.signal,
+		} );
+	},
 };
 
 export default pagesSlice.reducer;