SitePicker issue long loading on big tenants

Category

[x ] Enhancement

[x ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.15.0]

Expected / Desired Behavior / Question

On click on the dropdown to be able to search directly without waiting the load of all site. Limit the search query to the input text with a start with or contains query.

Observed Behavior

On big tenant 23k site the component take 4 minutes to be responsive because it query all the sites of the tenant.

Steps to Reproduce

Component initialized as below

<SitePicker
context={this.props.context}
label={'Select destination site'}
mode={'site'}
allowSearch={true}
multiSelect={false}
onChange={(sites) => { console.log(sites); }}
placeholder={'Selected sites'}
searchPlaceholder={'Filter sites'}
deferredSearchTime={1000}
initialSites={[{url:"https://****************.sharepoint.com/sites/**************Inteligenceproject"}]} />
Having a lot (more than 20k) of site collection on the tenant

Thanks!

Start by locating the SitePicker implementation and the entry point that loads and filters tenant sites, then reproduce the delay with a tenant containing more than 20,000 site collections. Done means the dropdown becomes searchable without loading every site first and still supports the provided search and initialSites configuration.