I have an app that has a status screen that is meant to be displayed at all times in various places around the organization. There are probably 50 different users inputting different pieces of data into it, and the status screen updates every 10 seconds with the new information. It's pretty much a tracking board for widgets flowing through a process.
Currently, I do a refresh every 10 seconds which empties all the divs and then loops through the active widgets and places them where every they should go and color codes based on status and stuff like that. However, there's a fraction of a second of a blink from when the javascript empties the divs and when they repopulate, and it's pretty annoying honestly.
My question is how to best update the status screen where there is no blink and things just empty out and pop in as needed.
My thinking at first is there a way to "freeze" the screen for 2 seconds and let it rewrite in the background then unfreeze so there isn't a blink.
OR, which would be MUCH MUCH MUCH cooler, is that some how I only update pieces that get updated within the 10 second intervals. So if a widget goes from staging area to molding, it fades out of staging and fades into molding and none of the other divs are touched. This would be cool because I could add some animations this way. However, I'm not sure how to "efficiently" do this. Maybe I have an "active array" that stores how everything is, and then the AJAX pulls a new array and executes changes where the two doesn't match?
Anyway, I'd like to know if there's a screen freeze, update in the background answer and if there's an like the second one described.
Sorry for the novel =(
