Alright I have a task and I've implemented it, but...

# kvision

[Samkeene]

Alright I have a task and I've implemented it, but I've hit an issue.
A collection of these objects are stored in a redux store.

data class WeaponSkill(val name: String, var cooldown: Int, val cooldownMax: Int)

Each WeaponSkill has its cooldown decreased each second, and if it is activated, the cooldown is reset to cooldownMax
So the goal is to have an area of the UI which is binded to all these weapon skills, and will display a button for each skill, as well as disable the button if the cooldown is active:

VPanel(spacing = 4).bind(playerStore) { player ->
    for (skill in player.weapon.skills) {
        button(skill.name).onClick {
            if (skill.cooldown <= 0) {
                // activate skill and reset cooldown
            }
        }.also {
            it.disabled = skill.cooldown > 0
        }
    }
}

This does work and has all the desired functionality, however for some reason the area of the UI is being recreated every time, which isn't a huge performance issue, but it messes with the user experience.
If the user hovers their mouse over a button, it will flick between its normal and hovered state each time its rebuilt. Also it seems to sometimes cause clicks not to go through.
I thought the virtual dom checks the difference between the old and new instance and doesn't change the real DOM if it doesn't change? The only part of the model that is changing is the cooldown,
is that what is causing this?
Here is a gif of the mouse events reactivating in time with the store having some action dispatched somewhere: https://i.imgur.com/VWAk1Ay.gifv
I'm sure there is some creative use of bind or subscribe or something else that might solve this, looking forward to learning! 🙂