Animation glitch on opening/closing web chat

[marcdion]

Describe the bug When you open/close the webchat, you can see an animation flicker in either the widget, when you close the webchat, or the webchat, when you open it by clicking the widget. What is causing this is when you click on the widget to open the webchat, the widget has a fadeOut class set, it animates out, it is removed from the DOM and then the webchat appears. When you close the webchat, the widget is readded to the DOM, and the fadeOut class is still set for a fraction of a second. Since it is a new element in the DOM, the fadeOut animation begins to trigger and then the state is changed and the class is set to fadeIn on the item. The same thing can happen to the webchat when it reappears in the DOM after being hidden.

To Reproduce

1. Go to a website with the webchat, for example, link in Linear
2. Click on the widget. The webchat opens
3. Close the chat using the X at the top.
4. You will most likely see a flicker. See attached video below.

Expected behavior One of two things can be done to fix this. We can remove the part that removes the elements from the DOM after the elements have faded out. Or, we can make sure that the proper fadeIn class is changed in the state before the item is readded in the DOM.

Screenshots If applicable, add screenshots to help explain your problem.

Video in Linear

Environment (please complete the following information):

• OS: macOs
• Browser Chrome and Firefox

[github-actions[bot]]

Available on v12.28.1