Rendering ASP.NET Core MVC ViewComponents as soon as the model is ready

Question

I am using an ASP.NET Core MVC ViewComponent to show similar content but with different data.

My index page looks like below (I am calling around 15 ViewComponents and passing some arguments to each call):

    <div class="row">
        @for (int x = 1; x < 10; x++)
        {
            <div class="col-3">
                @await Component.InvokeAsync("ProductItem", new
                {
                order = x
                })
            </div>
        }
    </div>

The code of the view component is shown here. There are some database class happening inside this based on the input and the time to complete the query varies for each case.

Sometimes the results will be ready in fraction of seconds and sometimes it will take up to 10 seconds to get the results from the db

    public  IViewComponentResult Invoke(int order)
    {
        List<string> dbItems;

        switch (order)
        {
            case 1:
                dbItems = new List<string>(); //query1
                break;

            case 2:
                dbItems = new List<string>(); //query2
                break;

            //rest all cases ------ time for query varies for each case!
            default:
                dbItems = new List<string> ();//query default 
                break; 
        }

        return View(dbItems);
    }

How can I ensure that the view component renders as soon as it got the data . Technically if a view component got the data in 1 second let it render the content on the front end, and if a view component waits for data for longer time, can we show it once the database calls are completed?

At present, it looks like all view components are rendered together