New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
showPreparingDocs applies display: none and gets into a race with React 18's rendering cycle #18347
Comments
Hi @snowystinger. Thanks for the reproduction. A couple of observations, right off the bat.
(Note it doesn't reproduce here). Would be interesting to see what's logged in the case it does reproduce.
I think what's happening here is simply that the JS bundle that includes the story (https://5f0dd5ad2b5fc10022a2e320-ugizaypgfl.chromatic.com/5.1f4938b8.iframe.bundle.js in case 4. above) takes longer than 100ms to parse + execute. So the spinner appears very briefly and the story renders behind it. In story view mode we do take steps to ensure that the |
Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.7-alpha.0 containing PR #18370 that references this issue. Upgrade today to the
Closing this issue. Please re-open if you think there's still more to do. |
Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.7 containing PR #18370 that references this issue. Upgrade today to the
|
Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.0 containing PR #18370 that references this issue. Upgrade today to the
|
Describe the bug
Storybook's preparing docs gets into a race with React 18's rendering cycle. This can lead to bounding client rects being all zeros and cause flake in tests that need to measure during the useLayoutEffect phase.
There is also a second effect, the document.body's userAgent stylesheet margin of 8px is also not removed early enough. So not only are measured values 0, but positioning calculations become off by 8px.
@tmeasday
To Reproduce
When running a story how Chromatic does, for example
https://5f0dd5ad2b5fc10022a2e320-ugizaypgfl.chromatic.com/iframe.html
and then opening the js console and running
You can see that the overlay position is wrong (Happens to coworkers with Intel based Mac's, happens in chromatic, does not seem to happen to ARM based Mac's).
I made a smaller reproduction using CRA + npx storybook init here:
https://github.com/snowystinger/storybook-timing
go to localhost:6006/iframe.html
There is one thing that was necessary to push it into the race condition reliably, which was to add the same typekit script we have. This is a blocking script, so I suspect you could accomplish the same race on any machine by adding a blocking script of variable time length. It's in
.storybook/preview-head.html
https://github.com/snowystinger/storybook-timing/blob/main/.storybook/preview-head.htmlSystem
Machine that reproduces:
Machine that does NOT reproduce:
Additional context
Here's our workaround for the time being
https://github.com/adobe/react-spectrum/pull/3165/files
We think this the problem area https://github.com/storybookjs/storybook/blob/main/lib/preview-web/src/WebView.ts#L168
Note, we don't use docs in Chromatic and I've turned it off in the example repo.
The text was updated successfully, but these errors were encountered: