Core: Ensure that simultaneous onStoriesChanged don't clobber each other

code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts

@@ -2735,6 +2735,60 @@ describe('PreviewWeb', () => {
       });
     });
 
+    describe('if called twice simultaneously', () => {
+      it('does not get renders confused', async () => {
+        const [importGate, openImportGate] = createGate();
+        const [importedGate, openImportedGate] = createGate();
+        const newImportFn = vi.fn(async (path) => {
+          openImportedGate();
+          await importGate;
+          return importFn(path);
+        });
+
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+        mockChannel.emit.mockClear();
+
+        preview.onStoriesChanged({ importFn: newImportFn });
+        await importedGate;
+        preview.onStoriesChanged({ importFn });
+
+        openImportGate();
+        await waitForRender();
+
+        expect(preview.storyRenders.length).toEqual(1);
+      });
+
+      it('renders the second importFn', async () => {
+        const [importGate, openImportGate] = createGate();
+        const [importedGate, openImportedGate] = createGate();
+        const secondImportFn = vi.fn(async (path) => {
+          openImportedGate();
+          await importGate;
+          return importFn(path);
+        });
+
+        const thirdImportFn = vi.fn(async (path) => {
+          openImportedGate();
+          await importGate;
+          return importFn(path);
+        });
+
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+        mockChannel.emit.mockClear();
+
+        preview.onStoriesChanged({ importFn: secondImportFn });
+        await importedGate;
+        preview.onStoriesChanged({ importFn: thirdImportFn });
+
+        openImportGate();
+        await waitForRender();
+
+        expect(thirdImportFn).toHaveBeenCalled();
+      });
+    });
+
     describe('when the current story changes', () => {
       const newComponentOneExports = merge({}, componentOneExports, {
         a: { args: { foo: 'edited' } },

code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx

@@ -352,12 +352,8 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
     try {
       await render.prepare();
     } catch (err) {
-      if (err !== PREPARE_ABORTED) {
-        // We are about to render an error so make sure the previous story is
-        // no longer rendered.
-        if (lastRender) await this.teardownRender(lastRender);
-        this.renderStoryLoadingException(storyId, err as Error);
-      }
+      if (lastRender) await this.teardownRender(lastRender);
+      if (err !== PREPARE_ABORTED) this.renderStoryLoadingException(storyId, err as Error);
       return;
     }