screens are flickery

[nicolasburtey]

https://www.loom.com/share/5e6f1fbc8dee49dcb32ce2c73200dd8a

• dashboard flicker every single time this page load. it show the loading shades before the API returns, and that resize the div. Because it's not the same size as the real div, it resize also the rest of the page.
• similarly the other pages, like audit log, have a different height between the loading state and the loaded state, which leads to flickers as the page load. going over 0:11 to 0:12 in the video make that very apparent.

[siddhart1o1]

@sandipndev I will fix this dashboard flicker.

[siddhart1o1]

should we maintain a consistent table height regardless of data rows?

ex:

When there is less data than our standard pagination size (10 rows), the table/card still occupy space for all 10 rows.

similarly, when there is no data, it will maintain the same container height.

This will keep the container height same and might lower the flicker effect on list pages.

wdyt @nicolasburtey @designsats ?

[designsats]

No, table should hug the contents, to be just as high as content needs. We will have a special Empty State graphic for no data to display situation.

[nicolasburtey]

here is an example on how Mercury does it

flickering lana versus mercury

they either have a page with ... that wait for all the data to show, or the loading state doesn't create flicker

also, their design page when there is no action/data generally doesn't feel as empty. they also integrate a call to action on those pages when appropriate

[nicolasburtey]

here is the mercury video https://www.loom.com/share/a81d4e37c26041c3965b29c246e05171

[siddhart1o1]

they either have a page with ... that wait for all the data to show, or the loading state doesn't create flicker

they don't use a card container for table content so they don't face issues with the card (container with border) size changing from the loading state to the loaded state. this is why I suggested maintaining a consistent table height regardless of the number of data rows so the card size is same. this issue might be less noticeable when the table has enough data, but even then, there's no guarantee that the loading card will match the loaded card. sometimes, data can span multiple rows, which changes the card size and causes the flicker effect.

for empty tables, we could implement something similar by displaying a graphic/disc with a "Create" button.

any suggestions @designsats?

[sandipndev]

@nicolasburtey is this still an issue?

[nicolasburtey]

@nicolasburtey is this still an issue?

yes (albeit this feels like a more pressing issue if I had to prioritize #1151)

[sandipndev]

• no border
• cache aggressively
• use "cache-and-network" as default