Search code examples
user-interfaceuser-controlsinfinite-scrolluser-experience

How to convey on-scroll loading has reached the end


I have implemented an on-scroll loading which fetches some chunk of data every time the scroll reaches the end of the viewing area. After some point of time when there would be no more new data to be shown, how should I convey to this to the end-user from a UX point of view?

I was thinking of few options such as displaying a tooltip which automatically vanishes after few seconds. Other option would be something similar to rubber banding scrolling from Apple. Any other approach that can be used here?


Solution

  • Without knowledge of what the use-case is (i.e. has user performed a search or just scrolling a list from elsewhere), in general, two good options:

    • Follow Slack's "You are upto date! + icon" little image on the last elastic scroll at bottom. Or, for example, "That's all we've got just yet! Check your email for more or Search for [term] instead".
    • Use a progress-bar type of indicator like when you read an article on Medium --> as people scroll down, they'll have a live indicator of getting to the bottom of the list.