Loading icon on flex repeater

Ignition
1

Hello
I've a flex repeater in a popup which fills "immediately" as soon as the popup opens as a result of a query binding
Since it's quite slow even for 20 rows I'd like to add a loading icon (like a in a popup over the flex repeater) until all the rows are correctly loaded
Is there any way?
Thanks

2

It's a simple enough case that you might get away with just setting your repeater's visibility in a transform on your query binding.
Practically, it would look like this:

  • set your repeater's display property to false
  • add a new container with your loading animation/text/whatever
  • in the query binding, add a script transform. In this script, change the display properties of your repeater and the new container, then return the value untouched.
1 Like
3

I recently decided on a way to do this with minimal code, although I'd still like to find a more templateable way...

  1. Add your flex repeater / table / thing that loads data into a flex container which is contained inside a coord container (percent)
    image

  2. Add an refresh icon into the flex, and set its style props. These centre the icon on top of the table.
    image

  3. Add a custom prop "loadingData" or similar.

  4. Add an onChange on the filters/items that trigger your data to update to set the "loadingData" to True.

    image
    image910×512 59.2 KB

  5. Add an onChange on the flex repeater/table/ etc. prop that does the query which sets the "loadingData" to False.

    image
    image663×501 39.3 KB

  6. Bind your refresh icon display to the loadingData (you can also apply a style to the table to show it as disabled if you want as well)

I decided to use onChange events intead of running the query inside a script so that I could still use the query binding GUI.

1 Like
4

If you're okay with a modal, you can use a decorator and make something truly generic.
Basically:

  • make a "loading..." popup
  • make a decorator that takes the function that might take a while to run, opens the loading popup, executes the function, then closes the popup
  • requires you to write all your logic code in library functions (so not directly in transforms/events)
  • now you can just decorate those function with your loading decorator

I use this and it's... easy.

1 Like