How to avoid flashing while loading data?

Question

Bootstrap

I have a list of users that I load via REST API 1 The list is loaded in pages of 10 or 20 entries. A table is rendered based on the list. For each user in the table, another REST API 2 call loads user data. It turns out that first the table is rendered with a list of users and with one empty column, then the entire table is updated, already with the data in this column. Moreover, the content of the column affects the height of the row in the table, naturally, after loading the data, the entire table is distorted. Visually, it looks scary, like a blinking page, if you switch between different pages of the main list. First an empty table flickers, then it is immediately updated.

As a solution, it only came to mind to load all the data at once and only then display it. Looks better, but now the entire page takes a second to load before refreshing. What happens to users with poor network connectivity?

Are there any other ways to minimize flicker in such cases?

Thanks

Answer 1

In such cases, the spinner is usually shown before the data is loaded. After we render the table. This is a head-on solution, it might not work for you.