On template creation, don't show search if not needed

packages/edit-site/src/components/add-new-template/add-custom-template-modal.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
@@ -145,14 +145,25 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		debouncedSearch
 	);
 	const { labels } = entityForSuggestions;
+	// If there are less suggestions than our initial ones with no `search`(10),
+	// there is no need to show the `SearchControl`. We use a `ref` to track
+	// this because the initial search request is enough to let us decide.
+	const showSearchControl = useRef( false );
+	useEffect( () => {
+		if ( ! showSearchControl.current && suggestions?.length > 9 ) {
+			showSearchControl.current = true;
+		}
+	}, [ suggestions ] );
 	return (
 		<>
-			<SearchControl
-				onChange={ setSearch }
-				value={ search }
-				label={ labels.search_items }
-				placeholder={ labels.search_items }
-			/>
+			{ showSearchControl.current && (
+				<SearchControl
+					onChange={ setSearch }
+					value={ search }
+					label={ labels.search_items }
+					placeholder={ labels.search_items }
+				/>
+			) }
 			{ !! suggestions?.length && (
 				<Composite
 					{ ...composite }