Edit Site: Refactor the NavigationMenuContent component and fix the d…

…eprecation notice (#51469)

* Edit Site: Refactor the NavigationMenuContent component and fix the deprecation notice
* Remove artificial delay to avoid loading flickering
* Display Page List block when it has no inner blocks

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -10,7 +10,7 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import { VisuallyHidden } from '@wordpress/components';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -19,6 +19,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../lock-unlock';
 import LeafMoreMenu from './leaf-more-menu';
 
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 // Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
 const MAX_PAGE_COUNT = 100;
 const PAGES_QUERY = [
@@ -36,63 +38,46 @@ const PAGES_QUERY = [
 ];
 
 export default function NavigationMenuContent( { rootClientId, onSelect } ) {
-	const [ isLoading, setIsLoading ] = useState( true );
-	const { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(
+	const { listViewRootClientId, isLoading } = useSelect(
 		( select ) => {
 			const {
-				__unstableGetClientIdsTree,
 				areInnerBlocksControlled,
 				getBlockName,
+				getBlockCount,
+				getBlockOrder,
 			} = select( blockEditorStore );
 			const { isResolving } = select( coreStore );
 
-			const _clientIdsTree = __unstableGetClientIdsTree( rootClientId );
+			const blockClientIds = getBlockOrder( rootClientId );
+
 			const hasOnlyPageListBlock =
-				_clientIdsTree.length === 1 &&
-				getBlockName( _clientIdsTree[ 0 ].clientId ) ===
-					'core/page-list';
+				blockClientIds.length === 1 &&
+				getBlockName( blockClientIds[ 0 ] ) === 'core/page-list';
+			const pageListHasBlocks =
+				hasOnlyPageListBlock &&
+				getBlockCount( blockClientIds[ 0 ] ) > 0;
+
 			const isLoadingPages = isResolving(
 				'getEntityRecords',
 				PAGES_QUERY
 			);
+
 			return {
-				clientIdsTree: _clientIdsTree,
+				listViewRootClientId: pageListHasBlocks
+					? blockClientIds[ 0 ]
+					: rootClientId,
 				// This is a small hack to wait for the navigation block
 				// to actually load its inner blocks.
-				shouldKeepLoading:
+				isLoading:
 					! areInnerBlocksControlled( rootClientId ) ||
 					isLoadingPages,
-				isSinglePageList:
-					hasOnlyPageListBlock &&
-					! isLoadingPages &&
-					_clientIdsTree[ 0 ].innerBlocks.length > 0,
 			};
 		},
 		[ rootClientId ]
 	);
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	// Delay loading stop by 50ms to avoid flickering.
-	useEffect( () => {
-		let timeoutId;
-		if ( shouldKeepLoading && ! isLoading ) {
-			setIsLoading( true );
-		}
-		if ( ! shouldKeepLoading && isLoading ) {
-			timeoutId = setTimeout( () => {
-				setIsLoading( false );
-				timeoutId = undefined;
-			}, 50 );
-		}
-		return () => {
-			if ( timeoutId ) {
-				clearTimeout( timeoutId );
-			}
-		};
-	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
-
-	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	const offCanvasOnselect = useCallback(
 		( block ) => {
 			if (
@@ -117,11 +102,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		<>
 			{ ! isLoading && (
 				<PrivateListView
-					blocks={
-						isSinglePageList
-							? clientIdsTree[ 0 ].innerBlocks
-							: clientIdsTree
-					}
+					rootClientId={ listViewRootClientId }
 					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }