Fast clicks lead to visual bugs

[Hypnosphi]

• go to http://alexcurtis.github.io/react-treebeard/
• triple-click on 'node_modules'
• see this:

Reproduced in Chrome, FF, and Safari

[tatsujb]

+1

[thomasjm]

I'm seeing something I think is related, but let me know if I should open a separate issue...

I think that any fast changes to the data prop can cause the treeview to end up rendered wrong. I think this is due to a race condition with animations, because when I turned animations off the issue stopped happening.

In my case, I update data several times in <1 second, and at the end of the process a node that has toggled: true is closed when it should be open.

It would be great to make the animations robust to fast changes. It looks like the underlying issue might be google-fabric/velocity-react#212

[mishaberman]

What I did to alleviate this issue is to set the animations to happen at a 100ms duration:

--animations.js--

export default {
toggle: ({ node: { toggled } }) => ({
animation: { rotateZ: toggled ? 90 : 0 },
duration: 100
}),
drawer: (/* props */) => ({
enter: {
animation: "slideDown",
duration: 100
},
leave: {
animation: "slideUp",
duration: 100
}
})
};

          <Treebeard
            data={this.state.data}
            onToggle={this.onToggle}
            animations={animations}
            style={styles}
          />