Angular lazy load stories

[thomasoreilly]

Is your feature request related to a problem? Please describe.
Slow initial load when storybook has a large amount of stories.

Describe the solution you'd like
Ability to lazy load Angular stories.

Describe alternatives you've considered
I tried async imports to no avail.

Are you able to assist bring the feature to reality?
Maybe

Additional context
I don't have any

[shilman]

cc @ndelangen @tmeasday

[tmeasday]

@thomasoreilly -- what went wrong with async imports? I believe that folks using the Stencil framework (web components) are successfully doing that with SB. Perhaps there is some webpack changes needed in the Angular preset?

Aside from that it would be nice if Storybook officially supported async stories so that addons knew when async story had finished rendering. But my understanding is things mostly work if you can get the mechanics going.

[thomasoreilly]

Hey @tmeasday.
Would you know where I can find an example of Stencils implementation?

What I've tried is to dynamically load the story's example component using the import('myExampleComponent').
When the promise resolves, then I create the story. This splits the code, however it is still loaded on first load. Also direct resolving a story link is failing.

I'd like to be able to only load the split bundle per story example component on route change. A possible solution would be to pass in a promise as the story function which could handle the resolve.

[tmeasday]

Yeah, I don't have an open source example I can point you to (maybe @shilman does?) but my understanding was that the stories themselves were loaded syncronously but the components themselves were loaded async. Which sounds like what you describe as the possible solution. I think(?) this might be built into Stencil natively.

[shilman]

There are lots of stencil example repos linked here: #4600

I'm not sure which is a "best practice" implementation unfortunately. (Would love to figure that out!)

[thomasoreilly]

Thanks @shilman.

I had a quick look through that PR and may have found an idea to try out. It's not ideal though.
We might be able to wrap the Angular component with a React component and use the useCustomElement hook. Next I can use the lazy load function within Reacts tooling on the wrapper. This was designed for Web Components so not sure if it will work.

[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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!