I’ve got this custom collection with a button as a checkbox. When I click it, it triggers a query. I would like to get a loading icon with isfetching. But I tried it once and it will set all buttons to. “Is fetching”.
Is there a method to just make the button I pressed change state?
I use this to disable it:
{{avariable2.value.find((element)=> element.variantId === item.variantId ).picked ? True : false}}
My apologies for the naming of the variable variable2. It’s an array of items. So I look up the item in the array and if it has the same ID as the one I clicked, I set it to true.
For the icon I do this:
{{variable2.value.find((element)=> element.variantId === item.variantId ).picked ? "/icon:bold/interface-validation-check-alternate" : "/icon:bold/interface-add-1" }}
I just change the icon. But if the query takes longer than expected, this can take some time. Which makes the button seem unresponsive. That’s why I want to use isfetching.
Any suggestions?
Here’s a gif of how it looks now:
![trim.118C7626-C31D-4E01-B2F4-BAC145BC4936](https://community.retool.com/uploads/default/original/3X/0/d/0d318a1a58a08077a4b2f4a3b8eb4e16e209e94e.gif)
You’ll have to reload the gif to see it animated . It isn’t a loop gif. Sorry.
Basically the first state is like this (other app, uses same logic, just different colors and data). As you can see it’s a “plus” icon at first
The issue is that when I use isfetching, it’s applying that for every button in the collectionlist. How do I target only the one that’s clicked/pressed?
Any suggestions?
I kept hitting this roadblock but I solved it somewhat.
Right now only those buttons that already have been set to “picked” will have the loading state activated.
{{update_picked.isFetching && variable2.value.find((element)=> element.variantId === item.variantId ).picked}}
As you can see in the screencast, two buttons are loading when the second one is set to true.
I am still looking for a solution where only the last button that has been set to true gets the loading state.
I hope there’s a more elegant solution to this. Something like:
update_picked.isFetching && this.picked===true
![image](https://community.retool.com/uploads/default/original/3X/e/b/eb6036901e7f0a40c60f14a29a214be87095b986.gif)
Does anyone know a method to set only the clicked button to update_picked.isFetching
Maybe I am overthinking it. ![:face_with_diagonal_mouth: :face_with_diagonal_mouth:](https://community.retool.com/images/emoji/apple/face_with_diagonal_mouth.png?v=12)