[BUG] LazyMotion sets initial immediately; before LazyMotion.features load

[o-alexandrov]

According to docs, LazyMotion:

animation will run when loadFeatures resolves.

However, initial part of MotionProps is set immediately.

<m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>{children}</m.div>

Problems:

1. The user won't see the content until LazyMotion.features are loaded.
2. It decreases the value of bundle splitting (due to PageSpeed First Contentful Paint; the content is not visible).

CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-lazymotion-32vhxp

Steps to reproduce

Steps to reproduce the behavior:

1. Open CodeSandbox
2. See the bug: there's no Hello printed on the screen because initial is triggered immediately

Expected behavior

If LazyMotion.features are loaded, only then initial, animate, exit and other MotionProps should trigger.

• if the element with initial is already mounted, initial should be skipped