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.

Answer 2

A couple of thoughts:

In general lists are one-after-the-other consumables. Users will never be able to understand all the content at once.

Also, tables usually are high density-information databases, where users usually try to either find something specific (thus scan and find a specific item, which would lead to usage of filters to narrow down the choice). The question for me would be: Do users need a specific part of information, such as "column two, the email", or do they need to understand one dataset, the row, at a whole, to understand if that data is what they were looking for?

My (wild) guess would be: Present a full data set (a row), instead of creating a fragmented load (a bit of row one, a next bit of row 5, then something of row one again). That would add a couple of benefits:

1. Users will understand if a full dataset, a row, is relevant to them
2. Focus point wont jump between datapoints
3. Users won't be able to consume all information that quickly, even with a slow connection, so I'd rather give them full information instead of fragmented one

Ideas: You probably know the amount of rows you will receive. How about giving them the total number (or an approximate) so they know how long their result list will be and fill not-loaded cells (following my thoughts: empty rows) with skeleton designs, which indicate "there's something coming here".

What do you think?