# Loading icon on flex repeater **URL:** \ **Category:** Ignition\ **Created:** [January 26, 2024, 11:57am UTC](https://forum.inductiveautomation.com/t/loading-icon-on-flex-repeater/84810 "2024-01-26T11:57:46Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Francesco\_Vittadini](https://avatars.discourse-cdn.com/v4/letter/f/9dc877/32.png) [@Francesco\_Vittadini](https://forum.inductiveautomation.com/u/Francesco_Vittadini)\ **Post date:** [January 26, 2024, 11:57am UTC](https://forum.inductiveautomation.com/t/loading-icon-on-flex-repeater/84810/1 "2024-01-26T11:57:46Z")
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 ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [January 26, 2024, 12:58pm UTC](https://forum.inductiveautomation.com/t/loading-icon-on-flex-repeater/84810/2 "2024-01-26T12:58:46Z")
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. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 19, 2024, 6:31am UTC](https://forum.inductiveautomation.com/t/loading-icon-on-flex-repeater/84810/3 "2024-04-19T06:31:04Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/78ff28157bd157c9d9e244c5bd28c4efadec79d2.png) 2. Add an refresh icon into the flex, and set its style props. These centre the icon on top of the table. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/715c9180a201b721b4d0dd163d84bcb780b5c35f.png) 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. 5. Add an onChange on the flex repeater/table/ etc. prop that does the query which sets the "loadingData" to False. 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. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [April 19, 2024, 6:53am UTC](https://forum.inductiveautomation.com/t/loading-icon-on-flex-repeater/84810/4 "2024-04-19T06:53:25Z")
> [@nminchin](#): > > a more templateable way... 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.