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.

1 Like

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!

1 Like

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:

4 Likes

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

1 Like

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:

2 Likes

@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.