Like/Unlike buttons slow responsiveness

Hey everyone,
I am working on liking and unliking images from a repeating group of images. When an image is liked/unliked, it creates or modify a feedback in my database. The like button turns green when the image is liked, the unlike button turns red.
The issue I have is that when the buttons are clicked, it takes 1 to 2 secondes before the buttons change color.
To solve the issue, I tried to use custom states:
A button is clicked → set state button → schedule like/unlike feedback
But the button still doesn’t change its color immediatly.
Does anyone have the some issue or ideas on how to improve it?

Is the color bound to the custom state value?

Yes, when the custom of the group containing the buttons is Like, the Like button turns green
The custom state is reinitialized at the end of the workflow (but the button stay green because of the new feedback)

Can you share a screenshot of your workflow for the click event?

You might be doing some actions prior to setting the custom state value. Try to set it as the first action.

The complete workflow is like this :
step 1 : set state Like of group buttons (like)
step 2: Animate a floating group to inform that the image was liked
step 3: Trigger custom event that schedule an api workflow to create a feedback in database
step 4: Add a pause before action (1s)
step 5: Animate the floating group to hide it
step 6: set state Like of group buttons (empty)

The first custom state value change should kick in immediatly as far as I understand.

The next value change has a 1s. pause before so it’s expected it will take 1s. to kick in.

You can try scheduling every action but the first one in a separated Custom Event and see what happens…

The first step being the set state and the others being animations except the trigger custom event, it would be the same
Is there a way to ensure that the set state action is called first?

There are two ways to ensure the workflow will run in a given order: use conditionals that refers to a step’s results or trigger custom events. In your case for example, you could do like this:

Create a custom event. Throw steps 2 until step 6 inside this custom event.

Then, when user clicks on the “look bouton”:

  1. set state v_jaime/jaime…
  2. Trigger custom event only when results of step 2 is ‘x’ or when custom states has a ‘x’ value.
1 Like

The actions are initiated in strict order, so the first set state actions is indeed being called first.

I’ve set a sandbox environment and color change is kicking in immediatly for me.

Do you have more conditionals in that button that rely on the same custom state value?