feat: add minimum sites listing for onboarding template search

Author: Soare-Robert-Daniel

onboarding/src/Components/Sites.js

@@ -5,6 +5,8 @@ import StarterSiteCard from './StarterSiteCard';
 import VizSensor from 'react-visibility-sensor';
 import Fuse from 'fuse.js/dist/fuse.min';
 
+const MINIMUM_SITES_LISTING = 10;
+
 const Sites = ( { getSites, editor, category, searchQuery } ) => {
 	const [ maxShown, setMaxShown ] = useState( 9 );
 	const { sites = {} } = getSites;
@@ -14,10 +16,28 @@ const Sites = ( { getSites, editor, category, searchQuery } ) => {
 		if ( Object.keys( allSites ).length === 0 ) {
 			return [];
 		}
+
+		/** @type {Array} */
 		let builderSites = allSites[ editor ];
 		builderSites = filterBySearch( builderSites );
 		builderSites = filterByCategory( builderSites, category );
 
+		if ( MINIMUM_SITES_LISTING > builderSites.length ) {
+			// Populate with the top searches if the number of eligible websites is lower than the minimum.
+			for (const site of allSites[editor]) {
+				if (builderSites.length >= MINIMUM_SITES_LISTING) {
+					break;
+				}
+				if (builderSites.find(existing => existing.slug === site.slug)) {
+					continue;
+				}
+				if (site?.upsell && 'free' === category ) { // For the `Free` category, all suggestion must be also free to keep consistency.
+					continue;
+				}
+				builderSites.push(site);
+			}
+		}
+		
 		return builderSites;
 	};