Loading for a list with ~40 seconds completion time

Question

We have a listing page which the data are gathered by multiple providers. These providers have different response times (min 15 seconds to 1 minute sometimes).

Our default sorting is based on the price and rate of the product. We have a skeleton loading until the first provider sends data. the problem happens when different providers send data about single product which may cause an update to our sorting. This means you may see our list in 15 seconds, but at any given time, any product may change its location on the list based on sorting algorithm.

I would appreciate any ideas about handling the loading state of this situation.

Answer 1

you can group list elements by price range. showing 5$ to 10$ in a container as an example with some delightful animation while showing a new element appearing by pushing the old one a side.

Answer 2

I would add somewhere an async counter that shows the amount of downloaded data and total amount of them that's left e.g.

Gathered data from 23 providers of 150 total

or

Querying for data:
23 / 150
(search results may live update once data is downloaded)

The text content might be different, but wanted to illustrate the main idea.