Only isfetching for pressed item of list

[Steven_W]

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:

[Steven_W]

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?