ant-design / cssinjs

https://ant-design.github.io/cssinjs
MIT License
247 stars 61 forks source link

v1.3.1 loads the styles after page load in Next.js making the page look unstyled for a split second #69

Closed IonelLupu closed 1 year ago

IonelLupu commented 1 year ago

(I also left the same comment here, on the AntDesign 5 release issue)


Does anyone have problems with the new release of AntDesign's cssinjs(v1.3.1) in Next.js?

It seems the page loads without any styles and after a split second, the page loads the styles and everything is ok. But it's really annoying to see that split second of an un-styled app 😢 I still have a yarn.lock file with cssinjs v1.1.0 and I created this video to show the difference (pay attention at the reload button to see when I refresh the page):

Before (using a yarn.lock file that requires cssinjss v.1.1.0):

https://user-images.githubusercontent.com/4083652/209832444-09c821a1-164e-4c6a-be07-dc8d014db72c.mov

After (using the latest version of AntDesign which comes with cssinjs v.1.31):

https://user-images.githubusercontent.com/4083652/209832621-f0f42463-fd0e-4a4a-b85a-2c88f0d4544b.mov

In case anyone wants to test this, here is the info from the yarn.lock file that sets the version for cssinjs:

// when you want to use cssinjs v1.1.0:
"@ant-design/cssinjs@^1.0.0":
  version "1.1.0"
  resolved "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.1.0.tgz"
  integrity sha512-9kfWCnlcWZLMc184HL7zGUU3odKo/5HBMNxDxhSds2DoIzi/ojmmOU1A1butWVDSPcAbLyNQ85vxUI8mkkHrlA==
  dependencies:
    "@babel/runtime" "^7.11.1"
    "@emotion/hash" "^0.8.0"
    "@emotion/unitless" "^0.7.5"
    classnames "^2.3.1"
    csstype "^3.0.10"
    rc-util "^5.24.2"
    stylis "^4.0.13"
// when you want to use cssinjs v1.3.1:
"@ant-design/cssinjs@^1.0.0":
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/@ant-design/cssinjs/-/cssinjs-1.3.1.tgz#45967a0ef93188a336532087f97ee09d30f8cf51"
  integrity sha512-lFy/DhxH/fMaYaMRTaUBLkgoQHgmD56cMeEemqjkcBfk0zzUje11elx8LsqYquJ3okTUdmQTWxDSeG6gQ+S8Lg==
  dependencies:
    "@babel/runtime" "^7.11.1"
    "@emotion/hash" "^0.8.0"
    "@emotion/unitless" "^0.7.5"
    classnames "^2.3.1"
    csstype "^3.0.10"
    rc-util "^5.24.2"
    shallowequal "^1.1.0"
    stylis "^4.0.13"
MadCcc commented 1 year ago

Could you open an issue in ant-design/ant-design and provide a reproduction?

IonelLupu commented 1 year ago

I created an issue there: https://github.com/ant-design/ant-design/issues/39891

Closing this