[v4.0.0-alpha.4] React - component ref innerWidth and innerHeight are 0 on page load

[Grimones]

Bug or support request summary

The component needs parents clientWidth and clientHeight to properly size canvas when componentDidMount() on page load.

Expected: on v3.4.3 works as expected. The canvas gets his size.

Happens: on v4.0.0-alpha.4 clientWidth and clientHeight are 0 so cavas renders nothing. If you switch on other story and get back - everything works as expected.

Steps to reproduce

A minimal project with issue
https://github.com/Grimones/storybook-issue-example

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 4.0.0-alpha.4

What i have done

I have looked into the issue and found out that it happens after this commit c64125f
The issue is caused by this style rule https://github.com/storybooks/storybook/blob/3f602a0f80512ab17edf3b00ccc58c7fc0a46e33/lib/core/src/server/iframe.html.ejs#L11-L15

When the page loads storySize is equal to zero https://github.com/storybooks/storybook/blob/a3d43fd2f1506f80d53ebfba9b5e8fcb5774f088/lib/core/src/client/preview/start.js#L112-L115
and shows no preview which sets mentioned above style.

Then goes another render (which is triggered, i guess, by updating the storyStore).
Now storyStore.size() isn't equal to 0 and the rendering process goes on.

My guess is that at this moment react component is rendering in a body which has display set to none
and all element bounds aren't rendered so the dimensions are equal to zero.

Then sb-show is added to the body and react component becomes visible.
https://github.com/storybooks/storybook/blob/a3d43fd2f1506f80d53ebfba9b5e8fcb5774f088/lib/core/src/client/preview/start.js#L21-L26
But canvas size is already set 0.

Hotfix

importing a css in stories index.js

:not(.sb-show-main) > .sb-main {
  display: block;
}

or timeout in componentDidMount

[Hypnosphi]

Ok I think we need to call showMain before rendering here
https://github.com/storybooks/storybook/blob/master/app/react/src/client/preview/render.js#L46-L47
And probably for other frameworks as well

Would you like to open a PR?

[Grimones]

Yes, I will open a PR. Should I add all frameworks in one PR?

[Hypnosphi]

Yes that would be great

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!