Loading spinner for tables. #1932
-
|
Is there a current pattern for when a table loads. In this example I'm imagining a user clicking on the pagination - should the pagination button house the spinner of the table area itself?
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 4 replies
-
|
Not from DSYS, but we've recently used the skeleton loader for loading a table which might also work for you. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, super good question that we haven't really though about honestly. As @PoojMenon mentions the skeleton loader is one option for showing a table in a loading state. Though, I potentially think it's better left to only be used on initial load of the table, for the first time. Switching between data and skeletons between table pages might cause too much reflow of the page and just not feel very nice. Especially if the latency or subsequent load times are low, it will feel pretty jolty. The loading state of the pagination control, if it is a button, is an interesting option we might look to explore. It is interesting to me that we chose not to use the button component underneath, as that comes with a loading state out of the box and would solve this pretty easily. I'll take it back to the team, and likely create a Jira ticket for it. |
Beta Was this translation helpful? Give feedback.
-
|
Yup, so I have created a design ticket to tackle this specific problem https://issues.corp.twilio.com/browse/DSYS-3086 Is there any particular timeline @nicedisguise that @twilio-labs/design-systems-pd should be aware of to help prioritise this? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @SiTaggart, quick related question. Does the skeleton loader on first load imply there is no need for an empty state (with an illustration) for tables? What should happen if the system is thinking, and it turns out there is no data to load? |
Beta Was this translation helpful? Give feedback.
-
|
No, I don’t think a skeleton loader is a replacement for an empty state. They are two separate things. I suspect if you’re worried about request latency then you might want a fairly simple skeleton loader that takes the rough shape of the populated and empty state experiences. Skeleton loaders aren’t mandatory either, you have the option of using the spinner instead of a skeleton if you feel the empty state is common enough to warrant it. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Sounds great, thanks! I've added a tag to the ticket to include it in our Dec 28 release so we can aim to get a solution in place before this goes into beta early next year. |
Beta Was this translation helpful? Give feedback.
Hi, super good question that we haven't really though about honestly.
As @PoojMenon mentions the skeleton loader is one option for showing a table in a loading state. Though, I potentially think it's better left to only be used on initial load of the table, for the first time. Switching between data and skeletons between table pages might cause too much reflow of the page and just not feel very nice. Especially if the latency or subsequent load times are low, it will feel pretty jolty.
The loading state of the pagination control, if it is a button, is an interesting option we might look to explore. It is interesting to me that we chose not to use the button component underneath, as that c…