[Bug]: Composition - switching stories within a composed storybook shows spinners and reloads

[ndelangen]

Describe the bug

Issue extracted from: #21352

@yannbf reported some of these in QA as well.

When visiting composed stories, the preview completely reloads after a second.
This is composing the SB Design system.

Here's another example showing the difference between a composed storybook and the uncomposed:

---

Changing controls to a composed Storybook seems to reload the entire preview.

To Reproduce

• Add a ref to the code/ui/.storybook/main.ts file.

  refs: {
    'design-system': {
      title: 'Design System',
      url: 'https://master--5ccbc373887ca40020446347.chromatic.com/',
    },
  },

• start the storybook
• switch stories

System

No response

Additional context

No response

[tmeasday]

Note that this also occurs in 6.5 -- this has been an issue for some time; it happens due to changing the src attribute on the ref's iframe, IIUC. In fact I am struggling to pin down exactly when it first occurred; it may have been an issue from the start with composition!

I would love to fix it but not sure about the riskiness of changing it at this stage @ndelangen @shilman.

[tmeasday]

So the simplest fix I can find is to really juice the reactivity of the useEffect in FramesRenderer. Something like this works:

  const filteredRefs = Object.values(refs).filter((r) => {
    if (r.indexError) {
      return false;
    }
    if (r.type === 'auto-inject') {
      return true;
    }
    if (entry && r.id === entry.refId) {
      return true;
    }

    return false;
  });

  useEffect(() => {
    const newFrames = filteredRefs.reduce((acc, r) => {
      return {
        ...acc,
        [`storybook-ref-${r.id}`]: `${r.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${r.id}${stringifiedQueryParams}`,
      };
    }, frames);

    setFrames(newFrames);
  }, [filteredRefs.map((r) => r.id).join('-')]);

[ndelangen]

@tmeasday WDYT about:

  return (
    <Fragment>
      <Global styles={styles} />
      <Consumer filter={whenSidebarIsVisible}>
        {({ isFullscreen, showNav, selectedStoryId }) => {
          if (!isFullscreen && !!showNav && selectedStoryId) {
            return (
              <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${selectedStoryId}`}>
                Skip to sidebar
              </SkipToSidebarLink>
            );
          }
          return null;
        }}
      </Consumer>
      {Object.entries(frames).map(([id, src]) => {
        const [key] = refs[id] ? refs[id].url.split('?') : [id];
        return (
          <Fragment key={id}>
            <IFrame
              active={id === active}
              key={key}
              id={id}
              title={id}
              src={src}
              allowFullScreen
              scale={scale}
            />
          </Fragment>
        );
      })}
    </Fragment>
  );

Where we ensure the frame isn't recreated every time?

[ndelangen]

Hmmm testing the above and it still refreshes

[ndelangen]

OK, found a fix, I'll submit a PR.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-rc.8 containing PR #21713 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease