Renders DataForm component only when data has been fetched

packages/dataviews/README.md

@@ -442,6 +442,10 @@ const fields = [
 - `type`: either `regular` or `panel`.
 - `fields`: a list of fields ids that should be rendered.
 
+#### `isLoading`: `boolean`
+
+Whether the data is loading. `false` by default.
+
 #### `onChange`: `function`
 
 Callback function that receives an object with the edits done by the user.
@@ -520,7 +524,7 @@ The unique identifier of the action.
 - Required
 - Example: `move-to-trash`
 
-### `label` 
+### `label`
 
 The user facing description of the action.
 

packages/dataviews/src/components/dataform/index.tsx

@@ -16,13 +16,14 @@ export default function DataForm< Item >( {
 	form,
 	fields,
 	onChange,
+	isLoading = false,
 }: DataFormProps< Item > ) {
 	const normalizedFields = useMemo(
 		() => normalizeFields( fields ),
 		[ fields ]
 	);
 
-	if ( ! form.fields ) {
+	if ( ! form.fields || isLoading ) {
 		return null;
 	}
 

packages/dataviews/src/types.ts

@@ -543,6 +543,7 @@ export interface DataFormProps< Item > {
 	fields: Field< Item >[];
 	form: Form;
 	onChange: ( value: Record< string, any > ) => void;
+	isLoading?: boolean;
 }
 
 export interface FieldLayoutProps< Item > {

packages/edit-site/src/components/post-edit/index.js

@@ -35,17 +35,22 @@ const fieldsWithBulkEditSupport = [
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
-	const { record } = useSelect(
+	const { record, hasFinishedResolution } = useSelect(
 		( select ) => {
+			const args = [ 'postType', postType, ids[ 0 ] ];
+
+			const {
+				getEditedEntityRecord,
+				hasFinishedResolution: hasFinished,
+			} = select( coreDataStore );
+
 			return {
 				record:
-					ids.length === 1
-						? select( coreDataStore ).getEditedEntityRecord(
-								'postType',
-								postType,
-								ids[ 0 ]
-						  )
-						: null,
+					ids.length === 1 ? getEditedEntityRecord( ...args ) : null,
+				hasFinishedResolution: hasFinished(
+					'getEditedEntityRecord',
+					args
+				),
 			};
 		},
 		[ postType, ids ]
@@ -162,6 +167,7 @@ function PostEditForm( { postType, postId } ) {
 			<PostEditHeader postType={ postType } postId={ postId } />
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
+				isLoading={ ! hasFinishedResolution }
 				fields={ fieldsWithDependency }
 				form={ form }
 				onChange={ onChange }