Show feedback to users on mobile when stories bundle is being loaded

[alexandre-lelain]

Is your feature request related to a problem? Please describe.

From what I understand of Storybook behavior, when the window page is loaded, Storybook is lazy-loading all the stories JS bundle.

On Desktop screens, the sidebar tree appears as loading placeholder lines, which gives to the visitors a feedback indicating them that the content is being fetched.

However, on mobile screens, the visitor lands on the Canvas tab by default when the window page has loaded, but no visual feedback is indicating that the content (the stories) is being fetched.

Giving the bundle size generated by Storybook, and depending on the network connection, this can lead to many mobile visitors leaving the site thinking it's bugged, whereas the stories are being fetched when they do so.

I couldn't find any topic about this in the official docs https://storybook.js.org/docs/, but maybe I just missed it ?

Also, this issue is kind of related to the problem I described above.

Describe the solution you'd like

It would be a really great addition if we could display a visual feedback in the Canvas tab on mobile screens when the page has loaded and that the stories JS bundles are being loaded.

Alternatively, maybe we could have the option to select the tab (Sidebar, Canvas or Addons) we want our mobile visitors to land on by default.

Are you able to assist bring the feature to reality?
Maybe. I will try to dig into the code and propose something.

Additional context
Here is a screenshot that shows what the mobile visitors see when the page has loaded and that the stories are being fetched:

[alexandre-lelain]

After further investigations, it seems that we will land on the Sidebar tab by default on Mobile when this commit will be released in the next stable version. Which will solve my current problem.

However the initialActive prop that initialize the default tab doesn't seem to be available from the Options Parameters nor is it passed via the props of the related component. So we won't still be able to customize this.

[alexandre-lelain]

Both solutions are implemented and ready to be reviewed/merged 👍

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.9 containing PR #9141 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.