Bug: Default checked checkboxes on layers such as Dialogs don't appear

[steppy452]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Just the check inside the checkbox doesn't appear when a checkbox is checked by default, and on a layer such as a dialog. I've also observed this behavior for menus as well.

If you uncheck, and check again. it appear correctly.

Expected behavior

Should appear with check:

Minimal reproduction of the problem with instructions

https://codesandbox.io/p/devbox/jx59th

What is the motivation / use case for changing the behavior?

to use checkboxes in dialogs and menus

Environment

Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[amcdnl]

This issue is related to the initial path animation. Framer motion is trying to trace a SVG path but the SVG hasn't rendered so the path length is 0.

Removing the initial seems to fix it ( validating the problem ) but is not a viable fix given it will break other spots initial animation. Furthermore, if you don't use a callback in the dialog children function it also works further highlighting the issue.

The solution is not going to be fun because you need to draw/measure a hidden svg of the checkbox to get length. Given the frequency of a checkbox, i dont think the performance trade off is worth the animation. Maybe we explore an alternative approach for the check like CSS or something.

[amcdnl]

PR: #268