Overlay causes `useLayoutEffect` warnings in SSR mode

Describe the bug

When using the <Overlay /> and components that build upon it in SSR mode, React emits warnings about calling useLayoutEffect during SSR.

Of course, there are legitimate uses of useLayoutEffect in Primer and cases where it may be unavoidable. However, in <Overlay />, it looks like this particular call is not doing any DOM measurement or direct manipulation, but is kicking off an animation. This seems like it’s probably fine to defer until after a paint occurs, and I’m guessing that browser is probably going to do that anyway before this animation begins.

Given that, I wonder if we can move this to a useEffect call, instead or alternatively investigate using a useIsomorphicLayoutEffect, which @mattcosta7 reminded me about in Slack:

const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect

(That said, in this case, I think just using the simpler useEffect is fine.)

In order to avoid these warnings currently, I have to defer completely the rendering of overlays until we’re on the client.

To Reproduce Steps to reproduce the behavior:

1. Create a Next.js app
2. Render an <Overlay /> on some page
3. Watch logs

[pksjce]

Was able to reproduce this here https://github.com/pksjce/nextjs-primer-react

Looking at ways to mitigate this!

[jclem]

I’ll have to go back a bit and find a commit this was still happening. Sorry for the delay, but I should be able to get to it in the next couple of days.