Only isfetching for pressed item of list

Mobile
1

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

2

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

IMG_9825
IMG_98251125×590 63.2 KB

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?

4

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

Does anyone know a method to set only the clicked button to update_picked.isFetching

Maybe I am overthinking it. :face_with_diagonal_mouth:

5

I’ve made a howto. I figured it out some time ago and liked to share it: