Best way to display loading time when data table is updated

Question

We have data tables where users can do different actions that require a new list of data to be loaded. i.e. add filters, delete rows, upload new data etc.

What would be the best way to display the loading/waiting time considering some users might have a fast or slow internet connection and that some modifications could be so fast that some users might not even see the data being reloaded?

In cases where the reload is quite fast, would you force or fake a loading time of 1 or 2 seconds to show users that the modification is being applied? e.g. a user removes a filter and the new data is loaded instantaneously. Could the user wonder if the removal of the filter was applied?

What would the loading indicator be? A spinner, a skeleton screen or something else?

Thanks

Answer 1

You don't have to fake a loader or even use a loading indicator. You can just make a small animation on the table data/cell whenever some change has been applied. A quick fade or flash before the new info gets loaded will suffice.

Answer 2

We do a regular our DEV Problem of the Week series, where the P&P Labs peep swarms around one topic each week to provide practical solutions and resources for devs looking to up their UX game. We worked on your problem last week for 45 minutes if you want to see our process: https://link.pencilandpaper.io/ue0C8à (YouTube)

We assumed that the problem was mainly how you confirm to a user that data has been refreshed, even if it’s instantaneous.

Our design rationale was to:

• Always give immediate feedback right after receiving the request
• Make the destructive interaction not entirely frictionless
• Users must feel the feedback of his actions

For individual items in your data table, a simple menu with a confirmation for high stakes action is perfect, are you "disabled" the row if the system and flow and if you make it disappear with an animation (confirmation feedback). So yes, skeleton style of feedback is welcome here instead of a loading component.

For bulk actions, same thing for the multi-action menu on top of your data table, but make sure you display how many items will be affected. Then, same with "disabling" or "skeleton" feedback with a column/label value showing the ongoing system process and animating the row that will disappear for user feedback.

I hope it will help you. If you want the crew to work on another question, share it on StackExchange and ping us here: https://link.pencilandpaper.io/submit-your-problem-of-the-week