Show a "booting" progress message until the story is specified

(Or an error occurs).

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

@@ -54,6 +54,7 @@ export interface SubState {
   storiesHash: API_StoriesHash;
   storyId: StoryId;
   viewMode: ViewMode;
+  storySpecified: boolean;
   storiesConfigured: boolean;
   storiesFailed?: Error;
 }
@@ -387,9 +388,11 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
       }) {
         const { sourceType } = getEventMetadata(this, fullAPI);
 
-        if (fullAPI.isSettingsScreenActive()) return;
-
         if (sourceType === 'local') {
+          store.setState({ storySpecified: true });
+
+          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();
@@ -518,6 +521,7 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
       storiesHash: {},
       storyId: initialStoryId,
       viewMode: initialViewMode,
+      storySpecified: false,
       storiesConfigured: false,
       hasCalledSetOptions: false,
     },

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

@@ -107,6 +107,7 @@ describe('stories API', () => {
     } as ModuleArgs);
 
     expect(state).toEqual({
+      storySpecified: false,
       storiesConfigured: false,
       storiesHash: {},
       storyId: 'id',
@@ -617,6 +618,23 @@ describe('stories API', () => {
 
   // Can't currently run these tests as cannot set this on the events
   describe('STORY_SPECIFIED event', () => {
+    it('sets the storySpecified state', async () => {
+      const navigate = jest.fn();
+      const fullAPI = Object.assign(new EventEmitter(), {
+        isSettingsScreenActive() {
+          return false;
+        },
+      });
+      const store = createMockStore({});
+      const { init, api } = initStories({ store, navigate, provider, fullAPI } as any);
+
+      Object.assign(fullAPI, api);
+      init();
+      fullAPI.emit(STORY_SPECIFIED, { storyId: 'a--1', viewMode: 'story' });
+
+      expect(store.getState().storySpecified).toBe(true);
+    });
+
     it('navigates to the story', async () => {
       const navigate = jest.fn();
       const fullAPI = Object.assign(new EventEmitter(), {

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

@@ -37,6 +37,7 @@ const canvasMapper = ({ state, api }: Combo) => ({
   queryParams: state.customQueryParams,
   getElements: api.getElements,
   entry: api.getData(state.storyId, state.refId),
+  storySpecified: state.storySpecified,
   storiesConfigured: state.storiesConfigured,
   storiesFailed: state.storiesFailed,
   refs: state.refs,
@@ -60,6 +61,7 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
           viewMode,
           queryParams,
           getElements,
+          storySpecified,
           storiesConfigured,
           storiesFailed,
           active,
@@ -90,15 +92,21 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
           const isLoading = entry
             ? refLoading || rootLoading
             : (!storiesFailed && !storiesConfigured) || rootLoading;
+          const isBooting = !storySpecified && !storiesFailed;
 
+          console.log({ withLoader, isLoading, isBooting, progress });
           return (
             <ZoomConsumer>
               {({ value: scale }) => {
                 return (
                   <>
-                    {withLoader && isLoading && (
+                    {withLoader && (isLoading || isBooting) && (
                       <S.LoaderWrapper>
-                        <Loader id="preview-loader" role="progressbar" progress={progress} />
+                        <Loader
+                          id="preview-loader"
+                          role="progressbar"
+                          progress={progress || { value: 1, message: 'Booting' }}
+                        />
                       </S.LoaderWrapper>
                     )}
                     <ApplyWrappers