Behavior of UI when data is updated from remote

[xMartin]

Let's say I am just scrolling through the transaction list when my friend is entering some shared expenses from last week and syncs those. Currently in my app that data would automatically sync and update the list I am just looking at, making it at least jump as my friend entered data that gets inserted at different positions of that list that is ordered by date.

How do we want this?

@jancborchardt

[jancborchardt]

Stream-based apps like Twitter do it by keeping the position of the list (without jumping) and showing a bar/notification at the top saying »2 new messages«. We could do that as well.

[xMartin]

Yes, but they don't have the challenge of added entries within the existing list. Only on top. Much easier.

[jancborchardt]

What we could also do is mark these new entries in a different shade (of background color) so it’s visible which entries have been added the latest.

The scroll position is a slightly different topic then. We could make sure that the position in the center of the screen always stays in the center. For example when an entry is added near the top of the viewport, the rest of the entries shouldn’t move. And when an entry is added near the bottom of the viewport, the entries above shouldn’t move either.

[xMartin]

Ok. But there is no way to keep all entires that are in the viewport before the update in the viewport after new entries are added from remote. Maybe we need a more sophisticated solution. Like an indicator that there is new data that I can trigger to update the current display or something.

[jancborchardt]

Yeah, a simpler first solution would simply be to not load the entries and only show an indicator saying »load 3 new transactions«. When clicked, you are put at the top of the list, and the new transactions are marked somehow.