loading states for individual items in a list

Question

I'm a frontend developer and wondering from a UX perspective, whether it is a bad idea to fetch individual list items in a large list (with multiple columns).

See an example here:

This example is how it would look with a slow connection. In reality everything should load much faster of course.

From what I can see, the trade of is:

The UI feels faster, because the list will load faster (since it by itself does not need to load a full contact yet) and the contacts then can load individually. The downside: While it might feel faster to the user, it also could feel a bit funky, because there is no deterministic loading order. Once the list behind it is loaded, all contacts in the list will try to load as fast as they can individually. It feels especially funky on a slower connection.

This question is based on the technical counterpart where I am asking if it even makes technically sense to make that many requests.

(note, no real people are in that list, they are randomly generated names :) )

Answer 1

If I understand correctly the alternativ would be to wait until all contacts are loaded an then show the whole list at once. Which could feel very slow to users.

If it feels faster that would be a benefit. But there are some things to have in mind:

• the list should be ordered in this case probably alphabetically by name. is this possible.
• the order of the list should not be changed after all the elements are fully loaded because this would be very confusing.
• in place of the information that is loaded later you should place a placeholder this could be a line, an blurred text or similar. This way the visual change after fetching the information is reduced.