CSS Loader Gif on Table

Hi all,

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.

Thank you,

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

Hey Keith,

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! :smirk:

Thank y’all for the help! I’ll give the progress bar a try and start there.

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

Posting this Ignition Exchange resource for anyone who ends up here:

@mdia Is there a reason why the only loader that actually shows up is loader-28?

Could be caused by the browser? Where do you have the app launched?

The install is on a docker container. That's from a Chrome browser. I see the same behavior in the Designer.