2

I have a webapp dashboard with a couple of tables (around 6 tables with a fixed order that usually does not fit on page without scrolling down the page).

Tables are filled out with data provided from a backend - data for each table arrives in different timing so different tables are filled out with data in different time.

My question is how to avoid 'jumping the page' when user starts to work on the data in 4th table then data for 2nd table arrives and enlarges the content so the table 3 and 4 goes down.

We are not able to perdict the amount of items for each table before it's fetched.

tables view

  • Could you create a place-holder for tables that haven't loaded yet and have a "pending" graphic to indicate that data is being collected? – Julia Rezsnyak Oct 26 '15 at 16:44
  • Also, is there an advantage to having all the tables display on the same page? In other words, would a user look at table 4's data and then refer to table 2's data at some point or are are the tables exclusive from one another? – Julia Rezsnyak Oct 26 '15 at 16:45
2

My suggestion is - adding the loading image will solve the problem partially but still jumping panels(tables) will be there.

If there is 6 table, then add the 6 loading image with the div panel as parent. Add fixed height for the loading image parent div element. Calculate fixed height based on the table on each div panel. I hope this will solve the jumping table issue.

I solved this for one of my project with the above suggestion.

0

I solved this for myself in my photography portfolio (slightly nsfwish?). I had an issue where I wanted to make sure everything loaded without the "jumping". What I did was create a loading gif with the same dimensions as the photos i'd be loading, and having that appear until the content finished rendering. You can probably also do this with a div that is set to a minimum width as the table is being rendered.

  • OP may have expanded in an edit since your post, but they have said they are not able to predict the size of the table before it returns – Des Horsley May 24 '16 at 4:21
0

It really depends on the situation. If each table data is asynchronously loading then the visitor should see 4 loading icons opposed to only one for the whole page. If only one or two panels are fetching data but the visitor can interact with/get value from the content that is already showing, then that might be an acceptable solution.

Another point to note is that, you should be consistent with your loading graphics. Don't use five different loading icons in four sections on a page. Instead, go with a consistent look and feel for each of your loading panels.

Maybe a good middle ground would use a full page loading panel on the initial load, but then use a loading panel for each individual section whenever they async update. Each panel height should be in equal size to avoid confusion on last minute loading of either one table.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.