Core: Reload the preview-iframe when force remounting a story during loading

[JReinhold]

Telescopes on top of #26735

Works on #26637

What I did

Teardown story when force remounting, so force remounting behaves similar to navigating between stories.

This will ensure that if force-remounting a story that is loading/rendering/playing, it will reload the whole iframe to ensure everything is cleaned up. Previously existing running loaders/play would keep running in the background, interfering with the new story.

The noticeable difference here is that before, the old story would stay rendered until the new story was completely done. Now the canvas is completely cleared, and stays that way until the story has fully remounted. This is noticeable when you have slow loaders. I think both experiences are equally bad - no visual feedback vs a blank screen - so I don't feel like this is degradation. Ideally we'd have a loading spinner during applyLoaders, but that is outside the scope here.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. In a React sandbox add the following RaceConditions.stories.tsx file:

import { expect } from "@storybook/test";

const delay = (ms) => new Promise((resolve) => { setTimeout(resolve, ms)});

export default {
    title: "Race Conditions"
};

let myVariable = "";

export const SlowLoader = {
    loaders: async () => {
        myVariable = 'slow';
        await delay(3000);
        myVariable += '-end';
    },
    render: () => {
        return <div>Rendered: {myVariable}</div>
    }
};

3. Open the "Slow Loader" story.
4. See that it shows a loading spinner as usual.
5. Force remount the story
6. See that it stays blank for 3 seconds while the loaders are running.
7. See that it renders "Rendered: slow-end".
8. Spam click the force remount button a few times.
9. See that it loads with a loading spinner and not a blank preview - because it is now reloading the whole iframe.
10. See that it renders "Rendered: slow-end". Previously it would have rendered "slow-end-end-end-end".

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 7297628. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[tmeasday]

@JReinhold can we add something similar to that RaceCondition.story to our template stories for preview-api?

[tmeasday]

Should we have a test for blocking renderToCanvas and play too? Also do we need a test for a loader that is successfully aborted (see other conversation).

I'm not sure how exhaustive we need to be. Otherwise I am good with this.

[JReinhold]

Should we have a test for blocking renderToCanvas and play too? Also do we need a test for a loader that is successfully aborted (see other conversation).

Yes we should, and we already have. 😉 The new test is a close copy of those (it should probably have been above those, but meh)

https://github.com/storybookjs/storybook/pull/26753/files#diff-94a0bd3fee4fb9eae099c605599cd7e83c7ee0787c14aee85349005e3d786714R151-R230

[tmeasday]

I guess technically the new test is remounting and the old ones call teardown directly. Not sure what to think about that, it's all checking the same stuff right now but it seems inconsistent 🤷

[tmeasday]

LGTM with test in #26765