How to fix layout shift #2765
Replies: 1 comment 4 replies
-
|
I tried out the stackblitz example you put together, but I do not see the issue you are describing. I stopped the container and ran I can't think of anything it would be on our end, though it briefly looks like it goes from medium scale to large scale back to medium scale? Or you could try setting the scale prop on your provider? https://react-spectrum.adobe.com/react-spectrum/Provider.html#props |
Beta Was this translation helpful? Give feedback.
-
You can go directly to the app in stackblitz by visiting the url, then you can open devtools, set network speed to Slow 3G, and do the reload with empty cache: ls.mp4As you can see the issue is still present
Will check that later, thanks!
Oh good to know, will check that as well. |
Beta Was this translation helpful? Give feedback.
-
|
@snowystinger Looks like setting scale="medium" on Provider fixed the issue: ls_fix.mp4Thanks!! |
Beta Was this translation helpful? Give feedback.
-
|
I'm glad that fixes it, however, it seems like something else is afoot. |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure there is much we can do about it? There is going to be a layout shift in some cases no matter what. The server cannot know which scale to use since it cannot run media queries, so always just needs to choose one. That may end up being incorrect, and the client will need to adjust it. |
Beta Was this translation helpful? Give feedback.
-
I have a layout shift whenever user visits the app for the first time:
fouc.mp4
Minimal reproduction: https://stackblitz.com/edit/nextjs-a1vca2?file=pages%2Findex.js
(you can stop the container and run the production build:
npm run build && npm run start)This only happens in Next.js's production build tho. In development, the issue does not occur. I actually believe this is an issue with Next and not react-spectrum, but want to make sure about it.
The way Next handles styles in development is that it injects
<style>attributes with appropriate styles in the document's<head>. In production, Next generates a single CSS file that is loaded using<link>preload and<link>stylesheet.Development:
Production:
is there any way to fix that layout shift? 🤔
Beta Was this translation helpful? Give feedback.
All reactions