Has anyone implemented a CSS Loader on a view in Perspective? Reference: https://loading.io/css/
I have a customer that is interested in displaying the loader during a query execution on a table data set. The goal is to show the user that the table is loading.
I haven’t done that, however i have used a progress bar set to “indeterminate”, then I set a binding on the tables display to an expression for False. Then I bind the progress bar to the inverse of the tables display, and then I put a transform on my props.data binding that writes the display value back to true
Edit: I can mock this up for you on a table if you want, not sure if that block of text is super easy to understand lol
Thank you for the quick response! That’s a clever idea and good use of the native features. I think I understand your block of text.
You have two components in 1 container, each fill the container 100% when visible. The binding on ‘display’ watches for any loading of the table and hide’s the table while letting the progress bar appear because of it’s inverse response.
Exactly! Just make sure that if you finish loading and there is nothing in the result set, then you re-update your tables position.display so that you can see that there isnt data. Otherwise it will look like its endlessly loading forever!
I think @nader.chinichian said you need to define all css animation key frames within custom theme css files, which isn’t an issue really especially not for a loader that might be used in a few places. I’m still not sure how you would use that though… Would love to know how he does some of his stuff!
The only problem with this is that you would still have to do exactly what I said, because you aren’t able to change the “No data in this table icon” at all. If you were able to change that icon and text with bindings then I definitely think you could make this happen