1 of 11

Loading content when moving around an infinite scroll list

2 of 11

The basics of scrolling

3 of 11

Scrolling (ideal)

As the viewport moves, new topics are loaded before the user notices missing topics.

​

It is important to load enough topics and early as the user scrolls.

4 of 11

Scrolling (waiting)

If the user is quick scrolling, the loading indicator will become visible until new topics appear.

5 of 11

Jumping + scrolling up

The table of contents allows a user to reach the middle of a flow board. That means that topics above and below the current viewport may be missing (and need to be loaded dynamically).

​

The following examples provide detail for the case of jumping to the middle of a flow board and scrolling up.

6 of 11

Considerations when filling the gap

  • Avoid jumps when items are added above the viewport
    • If topics are pre-loaded above the viewport, we don’t want the user to experience the content to “jump”.
    • This requires to adjust the scroll when items are added above the viewport (more details)
  • Decide which part of the gap to fill when the gap becomes visible.
    • A gap means that two chunks of messages can get extended (above and below the gap). The decision should try to produce the least surprise. More details next...

7 of 11

When the gap is in the top 66% of the viewport (blue area), items (E and F) are added below the gap to complete the bottom part. That makes the gap to move up.

8 of 11

Scroll (after jump)

When the user lands in the middle of a discussion, gaps are generated.

​

Loading keeps the viewport consistent with the topic position (in this case, viewport is moved down as new topics are added)

9 of 11

Scroll (after jump)

The user perceives this as (note that transitions of topics moving away and new ones appearing help to orient the user):

10 of 11

When the gap is in the bottom 33% of the viewport, items (C, in the example) are added above the gap to complete the top part. That makes the gap to move down.

11 of 11

Beyond the gap (after jump)

When the user lands in the middle of a discussion, the user is allowed to scroll up past the gap.

​

If the gap is in the bottom 33%, the viewport won’t follow the newly added items (we considered the user passed the gap).