Browser freezes when using BelongsTo field

[enjinabner]

• Laravel Version: 10
• Nova Version: v4.22.1 (Silver Surfer)
• PHP Version: 8.1.22
• Database Driver & Version: MYSQL
• Operating System and Version: macOS ventura 13.4.1
• Browser type and version: Google Chrome v18.0.5993.70

Description:

When using BelongsTo field with a table that contains thousands of records and clicking on edit, the page becomes unresponsive. This is because the dropdown field contains too many data .

[TNDJX]

Make the field searchable using searchable().

So instead of loading all data, you user will need to search for records. Anyway having a dropdown with a 1k record is unusable and hard to find.

[enjinabner]

Thanks for idea, i tried making it searchable and on first load the page loads faster. However, when i search and returned me plenty of results, browser still freezes.

[TNDJX]

What if you minimize the number of results in your resource when the search param is available?

Something like this

    public static function indexQuery(NovaRequest $request, $query)
    {
        $query->when($request->has('search'), function(Builder $query) {
             $query->limit(200); // Limit to 200 records only
        })

        return parent::indexQuery($request, $query);
    }

I know its not the best way to do it but anyway if your user is searching and getting 1k results most likely they will keep typing to narrow the search, so although the limit of 200 will hide some items when narrowing down the search it will eventually find it

[enjinabner]

Great thanks