Change table loading to simple border animation to avoid UI flicker

[jd-solanki]

Description

Hi 👋🏻

Thanks for working on it. I'm trying this in one of the projects and raising the issue for further improvements.

ATM, when we fetch data from the remote source and toggle the loading state until the data is fetched table content is replaced with the loading UI and it gives flicker like effect.

It gets even worse when the table doesn't have the full height.

It'll be better if we can just have the loading border like animation just like vuetify:
lin this demo they are also removing the content but look at the loading animation. If we can keep the previous data and show the loading border until the data fetching is finished then it will be nice UX.

Additional context

Does nuxt UI table support the server side table? I checked the sort code and there's nothing related to server side fetching and even if we try to use the update:sort emit table component already sorts the available data. I guess we can improve this demo to make it a true server side table (only 10 records should be fetched from the API at single time).

[benjamincanac]

Indeed, an overlay could be a solution too like suggested in #1120.

I've recently improved this example: https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue to couple the v-model:sort with useAsyncData.

[benjamincanac]

Sorry I forgot to mention, a new sort-mode prop has been added recently in 56e0c9a to disable the sort inside the Table.

You can do sort-mode="manual": https://ui.nuxt.com/data/table#reactive-sorting

[benjamincanac]

@jd-solanki Would you mind sharing the link for the Vuetify animation you're referring to?

[jd-solanki]

Sure!

Screen.Recording.2024-01-19.at.3.40.45.PM.mov

It has border as loading animation below header.

[benjamincanac]

This is indeed really nice but I'm not sure how we could make a progress bar work. How would you define the percentage of the progress?

[jd-solanki]

Progressbar will be indeterminate

[benjamincanac]

Good thing we already have it https://ui.nuxt.com/elements/progress#indeterminate 🙂