LayoutAnimation causes Shimmer's animation to stop

Willing to submit a PR to fix?

[ ] I am willing to submit a PR to fix

Requested priority

Low

Products/applications affected

Shimmer Control (win32)

Package version(s)

@fluentui-react-native/experimental-shimmer (0.6.33)

OS version(s)

No response

Platform

[ ] iOS
[ ] macOS
[X] win32
[ ] windows
[ ] android

Xcode version

No response

Please provide a reproduction of the bug

I was prototyping a Toggle control and was using LayoutAnimation to add animations to the prototype

// toggle animation
 LayoutAnimation.configureNext(LayoutAnimation.create(500, LayoutAnimation.Types.spring, LayoutAnimation.Properties.scaleXY));
// Changes the state of whether the toggle is on/off
 setCheckedState(newCheckedState); 

...

// State change triggers a change in layout which in turn makes LayoutAnimation animate that transition in layout
<Slots.thumb style={[button.state.checked ? { left: 0 } : { left: 45 }]} />

I then added my prototyped control on the Shimmer test page on win32

      <Shimmer
        elements={shimmerRectsAndCircle()}
        duration={2000}
        delay={1000}
        style={{ height: 100, width: '50%', borderWidth: 2, borderColor: 'black' }}
        shimmerWaveColor="blue"
        shimmerColor="orange"
        backgroundColor="red"
      />
      <Toggle /> // prototyped toggle control

Now whenever I trigger the toggle animation by applying a new layout change, the shimmer controls all have their animations stop.

Actual behavior

https://user-images.githubusercontent.com/20259210/177412821-a6e635c5-a00c-42a8-b6d4-bd36cb5a114b.mp4

Expected behavior

Shimmer control animations should not stop.

microsoft / fluentui-react-native

LayoutAnimation causes Shimmer's animation to stop #1819