search

Workday / canvas-kit

Development kits to implement UI following the Workday Canvas Design System (https://canvas.workday.com/). See our Component Storybook -
https://workday.github.io/canvas-kit/
Apache License 2.0
300 stars 221 forks source link

FOUC with CK v10 in Next.js project #2426

Open sheelah opened 11 months ago

sheelah commented 11 months ago

🐛 Bug Report

I'm seeing FOUC when loading up pages in a Next.js project with CK v10.0.13

To Reproduce

Steps to reproduce the behavior: Install CK v10 in a Next.js project and load up a page, checking for a flash of unstyled content.

Or check out this branch: https://ghe.megaleo.com/design/mgrx-hubs/tree/fouc-test-ckv10

Expected Behavior

I'd expect to see pages loading without FOUC.

Actual Results

I'm seeing FOUC on all pages in my app.

Browser (if applicable)

Chrome

Link to repl or repo (highly encouraged)

Please provide a reference to a repo or branch to help us reproduce this bug.

Error Output

Page load with CK v10:

https://github.com/Workday/canvas-kit/assets/1900318/376b4667-e58e-4de2-acf1-875eaff8b5cc

Page load with CK v9:

https://github.com/Workday/canvas-kit/assets/1900318/4333d276-6d5f-4be7-948d-3948c4d47b09

sheelah commented 11 months ago

Linking up a couple of open issues that could be relevant, relating to Next with Emotion's <CacheProvider>: https://github.com/emotion-js/emotion/issues/3002 https://github.com/vercel/next.js/issues/48505