Storybook: Addon-Docs: Lazy load IFrame stories

[shilman]

Addon docs achieves cross-framework support by embedding embedded stories in iframes. This can get pretty heavy when there are many stories on the page.

As an easy optimization, when a story is rendered in iframe mode, wrap the iframe in a lazy loader that only shows the contents when it's scrolled into view.

[daKmoR]

really interested in that one as well 🤗

[cgatian]

We are seeing performance issues with Angular stories with more than 3 iframes (stories)

[Skullpluggery]

Hi!

Do we have a temporary workaround for this? I have 8 stories in one doc and it's really slow to load. The assets to some stories are not even loaded too.

[shilman]

@Skullpluggery this is the temporary workaround. The long-term fix is to implement inline rendering for the framework you're using, e.g. https://github.com/storybookjs/storybook/issues/8153. (It already exists for React, Vue, Web Components)

[github-actions[bot]]

Automention: Hey @patricklafrance, you've been tagged! Can you give a hand here?

[costalvaro]

While inline rendering is still not available, iframes seems to be able to lazy-load natively now.
That might be worth the shot!

See https://web.dev/iframe-lazy-loading/

https://caniuse.com/#feat=loading-lazy-attr

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.30 containing PR #12888 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

[dongyuwei]

Lazy load IFrames works good, and I found out a better way, that's to split large stories into small files(Eg: maximum 3 stories in one file, the first parameter of storiesOf() should be unique, with same prefix).