Core: Show "booting" progress until story is specified or errors

code/lib/manager-api/src/modules/stories.ts

@@ -13,6 +13,7 @@ import {
   STORY_SPECIFIED,
   STORY_INDEX_INVALIDATED,
   CONFIG_ERROR,
+  CURRENT_STORY_WAS_SET,
 } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 
@@ -54,8 +55,7 @@ export interface SubState {
   storiesHash: API_StoriesHash;
   storyId: StoryId;
   viewMode: ViewMode;
-  storiesConfigured: boolean;
-  storiesFailed?: Error;
+  ready: boolean;
 }
 
 export interface SubAPI {
@@ -325,10 +325,7 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
 
         await fullAPI.setIndex(storyIndex);
       } catch (err) {
-        store.setState({
-          storiesConfigured: true,
-          storiesFailed: err,
-        });
+        store.setState({ ready: true });
       }
     },
     // The story index we receive on SET_INDEX is "prepared" in that it has parameters
@@ -345,8 +342,7 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
 
       await store.setState({
         storiesHash: addPreparedStories(newHash, oldHash),
-        storiesConfigured: true,
-        storiesFailed: null,
+        ready: true,
       });
     },
     updateStory: async (
@@ -387,9 +383,9 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
       }) {
         const { sourceType } = getEventMetadata(this, fullAPI);
 
-        if (fullAPI.isSettingsScreenActive()) return;
-
         if (sourceType === 'local') {
+          if (fullAPI.isSettingsScreenActive()) return;
+
           // Special case -- if we are already at the story being specified (i.e. the user started at a given story),
           // we don't need to change URL. See https://github.com/storybookjs/storybook/issues/11677
           const state = store.getState();
@@ -400,6 +396,20 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
       }
     );
 
+    // The CURRENT_STORY_WAS_SET event is the best event to use to tell if a ref is ready.
+    // Until the ref has a selection, it will not render anything (e.g. while waiting for
+    // the preview.js file or the index to load). Once it has a selection, it will render its own
+    // preparing spinner.
+    fullAPI.on(CURRENT_STORY_WAS_SET, function handler() {
+      const { ref } = getEventMetadata(this, fullAPI);
+
+      if (!ref) {
+        store.setState({ ready: true });
+      } else {
+        fullAPI.updateRef(ref.id, { ready: true });
+      }
+    });
+
     fullAPI.on(STORY_CHANGED, function handler() {
       const { sourceType } = getEventMetadata(this, fullAPI);
 
@@ -422,8 +432,6 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
           fullAPI.setOptions(removeRemovedOptions(options));
           store.setState({ hasCalledSetOptions: true });
         }
-      } else {
-        fullAPI.updateRef(ref.id, { ready: true });
       }
 
       if (sourceType === 'local') {
@@ -500,10 +508,13 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
     );
 
     fullAPI.on(CONFIG_ERROR, function handleConfigError(err) {
-      store.setState({
-        storiesConfigured: true,
-        storiesFailed: err,
-      });
+      const { ref } = getEventMetadata(this, fullAPI);
+
+      if (!ref) {
+        store.setState({ ready: true });
+      } else {
+        fullAPI.updateRef(ref.id, { ready: true });
+      }
     });
 
     if (FEATURES?.storyStoreV7) {
@@ -518,7 +529,7 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
       storiesHash: {},
       storyId: initialStoryId,
       viewMode: initialViewMode,
-      storiesConfigured: false,
+      ready: false,
       hasCalledSetOptions: false,
     },
     init: initModule,

code/lib/manager-api/src/tests/stories.test.ts

@@ -9,6 +9,7 @@ import {
   STORY_INDEX_INVALIDATED,
   CONFIG_ERROR,
   SET_INDEX,
+  CURRENT_STORY_WAS_SET,
 } from '@storybook/core-events';
 import { EventEmitter } from 'events';
 import { global } from '@storybook/global';
@@ -107,7 +108,7 @@ describe('stories API', () => {
     } as ModuleArgs);
 
     expect(state).toEqual({
-      storiesConfigured: false,
+      ready: false,
       storiesHash: {},
       storyId: 'id',
       viewMode: 'story',
@@ -575,9 +576,8 @@ describe('stories API', () => {
 
       await init();
 
-      const { storiesConfigured, storiesFailed } = store.getState();
-      expect(storiesConfigured).toBe(true);
-      expect(storiesFailed?.message).toMatch(/sorting error/);
+      const { ready } = store.getState();
+      expect(ready).toBe(true);
     });
 
     it('watches for the INVALIDATE event and refetches -- and resets the hash', async () => {
@@ -615,7 +615,6 @@ describe('stories API', () => {
     });
   });
 
-  // Can't currently run these tests as cannot set this on the events
   describe('STORY_SPECIFIED event', () => {
     it('navigates to the story', async () => {
       const navigate = jest.fn();
@@ -665,6 +664,43 @@ describe('stories API', () => {
     });
   });
 
+  describe('CURRENT_STORY_WAS_SET event', () => {
+    it('sets the local ready state', async () => {
+      const navigate = jest.fn();
+      const fullAPI = Object.assign(new EventEmitter());
+      const store = createMockStore({});
+      const { init, api } = initStories({ store, navigate, provider, fullAPI } as any);
+
+      Object.assign(fullAPI, api);
+      await init();
+      fullAPI.emit(CURRENT_STORY_WAS_SET, { id: 'a--1' });
+
+      expect(store.getState().ready).toBe(true);
+    });
+
+    it('sets a ref to ready', async () => {
+      const navigate = jest.fn();
+      const fullAPI = Object.assign(new EventEmitter(), { updateRef: jest.fn() });
+      const store = createMockStore();
+      const { api, init } = initStories({ store, navigate, provider, fullAPI } as any);
+
+      Object.assign(fullAPI, api);
+
+      getEventMetadataMock.mockReturnValueOnce({
+        sourceType: 'external',
+        ref: { id: 'refId', stories: { 'a--1': { args: { a: 'b' } } } },
+      } as any);
+      await init();
+      fullAPI.emit(CURRENT_STORY_WAS_SET, { id: 'a--1' });
+
+      expect(fullAPI.updateRef.mock.calls.length).toBe(1);
+
+      expect(fullAPI.updateRef.mock.calls[0][1]).toEqual({
+        ready: true,
+      });
+    });
+  });
+
   describe('args handling', () => {
     const parameters = {};
     const preparedEntries: API_PreparedStoryIndex['entries'] = {
@@ -1284,56 +1320,44 @@ describe('stories API', () => {
 
       expect(fullAPI.setOptions).not.toHaveBeenCalled();
     });
+  });
 
-    it('sets the ref to ready when it is an external story', async () => {
+  describe('CONFIG_ERROR', () => {
+    it('sets ready to true, local', async () => {
       const navigate = jest.fn();
       const store = createMockStore();
-      const fullAPI = Object.assign(new EventEmitter(), {
-        setStories: jest.fn(),
-        updateRef: jest.fn(),
-      });
+      const fullAPI = Object.assign(new EventEmitter(), {});
 
       const { api, init } = initStories({ store, navigate, provider, fullAPI } as any);
       Object.assign(fullAPI, api);
 
-      getEventMetadataMock.mockReturnValueOnce({
-        sourceType: 'external',
-        ref: { id: 'refId', stories: { 'a--1': { args: { a: 'b' } } } },
-      } as any);
       await init();
 
-      fullAPI.emit(STORY_PREPARED, {
-        id: 'a--1',
-      });
-
-      expect(fullAPI.updateRef.mock.calls.length).toBe(2);
-
-      expect(fullAPI.updateRef.mock.calls[0][1]).toEqual({
-        stories: { 'a--1': { args: { a: 'b' }, prepared: true } },
-      });
+      fullAPI.emit(CONFIG_ERROR, { message: 'Failed to run configure' });
 
-      expect(fullAPI.updateRef.mock.calls[1][1]).toEqual({
-        ready: true,
-      });
+      const { ready } = store.getState();
+      expect(ready).toBe(true);
     });
-  });
 
-  describe('CONFIG_ERROR', () => {
-    it('shows error to user', async () => {
+    it('sets ready to true, ref', async () => {
       const navigate = jest.fn();
+      const fullAPI = Object.assign(new EventEmitter(), { updateRef: jest.fn() });
       const store = createMockStore();
-      const fullAPI = Object.assign(new EventEmitter(), {});
-
       const { api, init } = initStories({ store, navigate, provider, fullAPI } as any);
+
       Object.assign(fullAPI, api);
 
+      getEventMetadataMock.mockReturnValueOnce({
+        sourceType: 'external',
+        ref: { id: 'refId', stories: { 'a--1': { args: { a: 'b' } } } },
+      } as any);
       await init();
-
       fullAPI.emit(CONFIG_ERROR, { message: 'Failed to run configure' });
 
-      const { storiesConfigured, storiesFailed } = store.getState();
-      expect(storiesConfigured).toBe(true);
-      expect(storiesFailed?.message).toMatch(/Failed to run configure/);
+      expect(fullAPI.updateRef.mock.calls.length).toBe(1);
+      expect(fullAPI.updateRef.mock.calls[0][1]).toEqual({
+        ready: true,
+      });
     });
   });
 

code/ui/manager/src/components/layout/app.mockdata.tsx

@@ -61,7 +61,7 @@ const realSidebarProps: SidebarProps = {
   stories: mockDataset.withRoot as SidebarProps['stories'],
   menu: [],
   refs: {},
-  storiesConfigured: true,
+  ready: true,
 };
 
 const PlaceholderBlock = styled.div(({ color }) => ({

code/ui/manager/src/components/preview/preview.tsx

@@ -37,8 +37,7 @@ const canvasMapper = ({ state, api }: Combo) => ({
   queryParams: state.customQueryParams,
   getElements: api.getElements,
   entry: api.getData(state.storyId, state.refId),
-  storiesConfigured: state.storiesConfigured,
-  storiesFailed: state.storiesFailed,
+  ready: state.ready,
   refs: state.refs,
   active: !!(state.viewMode && state.viewMode.match(/^(story|docs)$/)),
 });
@@ -60,8 +59,7 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
           viewMode,
           queryParams,
           getElements,
-          storiesConfigured,
-          storiesFailed,
+          ready,
           active,
         }) => {
           const wrappers = useMemo(
@@ -70,7 +68,6 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
           );
 
           const [progress, setProgress] = useState(undefined);
-
           useEffect(() => {
             if (FEATURES?.storyStoreV7 && global.CONFIG_TYPE === 'DEVELOPMENT') {
               try {
@@ -84,12 +81,12 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
               }
             }
           }, []);
-
+          // A ref simply depends on its readiness
           const refLoading = !!refs[refId] && !refs[refId].ready;
-          const rootLoading = !refId && !(progress?.value === 1 || progress === undefined);
-          const isLoading = entry
-            ? refLoading || rootLoading
-            : (!storiesFailed && !storiesConfigured) || rootLoading;
+          // The root also might need to wait on webpack
+          const isBuilding = !(progress?.value === 1 || progress === undefined);
+          const rootLoading = !refId && (!ready || isBuilding);
+          const isLoading = entry ? refLoading || rootLoading : rootLoading;
 
           return (
             <ZoomConsumer>

code/ui/manager/src/components/sidebar/Sidebar.stories.tsx

@@ -38,45 +38,24 @@ const refs: Record<string, RefType> = {
 };
 
 export const Simple = () => (
-  <Sidebar
-    storiesConfigured
-    menu={menu}
-    stories={stories as any}
-    storyId={storyId}
-    refId={refId}
-    refs={{}}
-  />
+  <Sidebar ready menu={menu} stories={stories as any} storyId={storyId} refId={refId} refs={{}} />
 );
 
 export const Loading = () => (
-  <Sidebar
-    storiesConfigured={false}
-    menu={menu}
-    stories={{}}
-    storyId={storyId}
-    refId={refId}
-    refs={{}}
-  />
+  <Sidebar ready={false} menu={menu} stories={{}} storyId={storyId} refId={refId} refs={{}} />
 );
 
 export const Empty = () => (
-  <Sidebar storiesConfigured menu={menu} stories={{}} storyId={storyId} refId={refId} refs={{}} />
+  <Sidebar ready menu={menu} stories={{}} storyId={storyId} refId={refId} refs={{}} />
 );
 
 export const WithRefs = () => (
-  <Sidebar
-    storiesConfigured
-    menu={menu}
-    stories={stories as any}
-    storyId={storyId}
-    refId={refId}
-    refs={refs}
-  />
+  <Sidebar ready menu={menu} stories={stories as any} storyId={storyId} refId={refId} refs={refs} />
 );
 
 export const LoadingWithRefs = () => (
   <Sidebar
-    storiesConfigured={false}
+    ready={false}
     menu={menu}
     stories={stories as any}
     storyId={storyId}