Flicker of HTML without styles applied on load #840

robinhayward · 2023-05-11T16:05:04Z

robinhayward
May 11, 2023

Hello

I've just setup Geist (love it!) on a new project, works great but noticed whenever I refresh a page or follow a link - the HTML loads first without styles, than flicks back a second later with styles applied.

I assume this is just a daft newb question but if anyone knows what I might have done wrong, it would be much appreciated!

It's a new NextJS 13 app (using App Router)

The only setup I have done is the below so far:

I got this working actually by just wrapping the {children} in the root layout.tsx.

'use client'

import { GeistProvider, CssBaseline } from '@geist-ui/core'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <GeistProvider>
          <CssBaseline />
          {children}
        </GeistProvider>
      </body>
    </html>
  )
}

Thanks!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Flicker of HTML without styles applied on load #840

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Flicker of HTML without styles applied on load #840

Uh oh!

robinhayward May 11, 2023

Replies: 0 comments

robinhayward
May 11, 2023