chore: clean up chakra example

[jacob-ebey]

No description provided.

[dusty]

@jacob-ebey I tried this example out and we were getting hydration errors. The app would load fine on a server render, then lose all the styles when it switched to the client. Just switching to hydrate seemed to fix it, but this is quite different than the chakra docs where they inject styles manually. Do you see anything wrong with below?

import createEmotionCache from '@emotion/cache'
import { CacheProvider } from '@emotion/react'
import { RemixBrowser } from '@remix-run/react'
import { startTransition, StrictMode } from 'react'
// import { hydrateRoot } from 'react-dom/client'
import { hydrate as hydrateOld } from 'react-dom'

function hydrate() {
  const emotionCache = createEmotionCache({ key: 'css' })

  // startTransition(() => {
  //   hydrateRoot(
  //     document,
  //     <StrictMode>
  //       <CacheProvider value={emotionCache}>
  //         <RemixBrowser />
  //       </CacheProvider>
  //     </StrictMode>
  //   )
  // })

  startTransition(() => {
    hydrateOld(
      <StrictMode>
        <CacheProvider value={emotionCache}>
          <RemixBrowser />
        </CacheProvider>
      </StrictMode>,
      document
    )
  })
}

if (window.requestIdleCallback) {
  window.requestIdleCallback(hydrate)
} else {
  // Safari doesn't support requestIdleCallback
  // https://caniuse.com/requestidlecallback
  window.setTimeout(hydrate, 1)
}