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

code/lib/manager-api/src/index.tsx

@@ -18,13 +18,13 @@ import type {
   API_DocsEntry,
   API_GroupEntry,
   API_HashEntry,
+  API_IndexHash,
   API_LeafEntry,
   API_OptionsData,
   API_ProviderData,
   API_Refs,
   API_RootEntry,
   API_StateMerger,
-  API_StoriesHash,
   API_StoryEntry,
   Parameters,
   StoryId,
@@ -326,7 +326,9 @@ export function useStorybookApi(): API {
 }
 
 export type {
-  API_StoriesHash as StoriesHash,
+  /** @deprecated now IndexHash */
+  API_IndexHash as StoriesHash,
+  API_IndexHash as IndexHash,
   API_RootEntry as RootEntry,
   API_GroupEntry as GroupEntry,
   API_ComponentEntry as ComponentEntry,

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

@@ -15,7 +15,7 @@ import type {
   API_RootEntry,
   API_GroupEntry,
   API_ComponentEntry,
-  API_StoriesHash,
+  API_IndexHash,
   API_DocsEntry,
   API_StoryEntry,
   API_HashEntry,
@@ -122,7 +122,7 @@ export const transformStoryIndexToStoriesHash = (
     provider: API_Provider<API>;
     docsOptions: DocsOptions;
   }
-): API_StoriesHash => {
+): API_IndexHash => {
   if (!index.v) throw new Error('Composition: Missing stories.json version');
 
   const v4Index = index.v === 4 ? index : transformStoryIndexV3toV4(index as any);
@@ -241,10 +241,10 @@ export const transformStoryIndexToStoriesHash = (
     } as API_DocsEntry | API_StoryEntry;
 
     return acc;
-  }, {} as API_StoriesHash);
+  }, {} as API_IndexHash);
 
   // This function adds a "root" or "orphan" and all of its descendents to the hash.
-  function addItem(acc: API_StoriesHash, item: API_HashEntry) {
+  function addItem(acc: API_IndexHash, item: API_HashEntry) {
     // If we were already inserted as part of a group, that's great.
     if (acc[item.id]) {
       return acc;
@@ -268,7 +268,7 @@ export const transformStoryIndexToStoriesHash = (
     .reduce(addItem, orphanHash);
 };
 
-export const addPreparedStories = (newHash: API_StoriesHash, oldHash?: API_StoriesHash) => {
+export const addPreparedStories = (newHash: API_IndexHash, oldHash?: API_IndexHash) => {
   if (!oldHash) return newHash;
 
   return Object.fromEntries(
@@ -283,7 +283,7 @@ export const addPreparedStories = (newHash: API_StoriesHash, oldHash?: API_Stori
   );
 };
 
-export const getComponentLookupList = memoize(1)((hash: API_StoriesHash) => {
+export const getComponentLookupList = memoize(1)((hash: API_IndexHash) => {
   return Object.entries(hash).reduce((acc, i) => {
     const value = i[1];
     if (value.type === 'component') {
@@ -293,6 +293,6 @@ export const getComponentLookupList = memoize(1)((hash: API_StoriesHash) => {
   }, [] as StoryId[][]);
 });
 
-export const getStoriesLookupList = memoize(1)((hash: API_StoriesHash) => {
+export const getStoriesLookupList = memoize(1)((hash: API_IndexHash) => {
   return Object.keys(hash).filter((k) => ['story', 'docs'].includes(hash[k].type));
 });

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

@@ -6,7 +6,7 @@ import type {
   API_Refs,
   API_SetRefData,
   SetStoriesStoryData,
-  API_StoriesHash,
+  API_IndexHash,
   API_StoryMapper,
 } from '@storybook/types';
 // eslint-disable-next-line import/no-cycle
@@ -33,7 +33,7 @@ export interface SubAPI {
   getRefs: () => API_Refs;
   checkRef: (ref: API_SetRefData) => Promise<void>;
   changeRefVersion: (id: string, url: string) => void;
-  changeRefState: (id: string, ready: boolean) => void;
+  changeRefState: (id: string, previewInitialized: boolean) => void;
 }
 
 export const getSourceType = (source: string, refId: string) => {
@@ -56,10 +56,10 @@ export const defaultStoryMapper: API_StoryMapper = (b, a) => {
   return { ...a, kind: a.kind.replace('|', '/') };
 };
 
-const addRefIds = (input: API_StoriesHash, ref: API_ComposedRef): API_StoriesHash => {
+const addRefIds = (input: API_IndexHash, ref: API_ComposedRef): API_IndexHash => {
   return Object.entries(input).reduce((acc, [id, item]) => {
     return { ...acc, [id]: { ...item, refId: ref.id } };
-  }, {} as API_StoriesHash);
+  }, {} as API_IndexHash);
 };
 
 async function handleRequest(
@@ -83,8 +83,8 @@ async function handleRequest(
     }
 
     return json as API_SetRefData;
-  } catch (error) {
-    return { error };
+  } catch (err) {
+    return { indexError: err };
   }
 }
 
@@ -139,10 +139,10 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
 
       api.checkRef(ref);
     },
-    changeRefState: (id, ready) => {
+    changeRefState: (id, previewInitialized) => {
       const { [id]: ref, ...updated } = api.getRefs();
 
-      updated[id] = { ...ref, ready };
+      updated[id] = { ...ref, previewInitialized };
 
       store.setState({
         refs: updated,
@@ -205,7 +205,7 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
         // In theory the `/iframe.html` could be private and the `stories.json` could not exist, but in practice
         // the only private servers we know about (Chromatic) always include `stories.json`. So we can tell
         // if the ref actually exists by simply checking `stories.json` w/ credentials.
-        loadedData.error = {
+        loadedData.indexError = {
           message: dedent`
             Error: Loading of ref failed
               at fetch (lib/api/src/modules/refs.ts)
@@ -245,18 +245,18 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
       const { storyMapper = defaultStoryMapper } = provider.getConfig();
       const ref = api.getRefs()[id];
 
-      let storiesHash: API_StoriesHash;
+      let index: API_IndexHash;
       if (setStoriesData) {
-        storiesHash = transformSetStoriesStoryDataToStoriesHash(
+        index = transformSetStoriesStoryDataToStoriesHash(
           map(setStoriesData, ref, { storyMapper }),
           { provider, docsOptions }
         );
       } else if (storyIndex) {
-        storiesHash = transformStoryIndexToStoriesHash(storyIndex, { provider, docsOptions });
+        index = transformStoryIndexToStoriesHash(storyIndex, { provider, docsOptions });
       }
-      if (storiesHash) storiesHash = addRefIds(storiesHash, ref);
+      if (index) index = addRefIds(index, ref);
 
-      api.updateRef(id, { stories: storiesHash, ...rest, ready });
+      api.updateRef(id, { index, ...rest });
     },
 
     updateRef: (id, data) => {