Merge pull request #5756 from storybooks/5620-loading-state

Added `STORIES_CONFIGURED` and use to drive loading state

lib/client-api/src/config_api.js

@@ -75,6 +75,10 @@ export default class ConfigApi {
     if (this._channel) {
       // in Browser
       render();
+      // Send a signal to the manager that configure() is done. We do this in a timeout
+      // because the story_store sends stories in a debounced function, which results in
+      // as setTimeout. We want to ensure this happens after, to avoid a FOUC.
+      setTimeout(() => this._channel.emit(Events.STORIES_CONFIGURED), 0);
     } else {
       // in NodeJS
       loaders();

lib/core-events/src/index.ts

@@ -4,6 +4,7 @@ enum events {
   SET_CURRENT_STORY = 'setCurrentStory',
   GET_STORIES = 'getStories',
   SET_STORIES = 'setStories',
+  STORIES_CONFIGURED = 'storiesConfigured',
   SELECT_STORY = 'selectStory',
   PREVIEW_KEYDOWN = 'previewKeydown',
   STORY_ADDED = 'storyAdded',
@@ -29,6 +30,7 @@ export const GET_CURRENT_STORY = events.GET_CURRENT_STORY;
 export const SET_CURRENT_STORY = events.SET_CURRENT_STORY;
 export const GET_STORIES = events.GET_STORIES;
 export const SET_STORIES = events.SET_STORIES;
+export const STORIES_CONFIGURED = events.STORIES_CONFIGURED;
 export const SELECT_STORY = events.SELECT_STORY;
 export const PREVIEW_KEYDOWN = events.PREVIEW_KEYDOWN;
 export const FORCE_RE_RENDER = events.FORCE_RE_RENDER;

lib/ui/src/containers/nav.js

@@ -97,10 +97,12 @@ export const mapper = (state, api) => {
     storyId,
     layout: { isFullscreen, showPanel, showNav, panelPosition },
     storiesHash,
+    storiesConfigured,
   } = state;
 
   const shortcutKeys = api.getShortcutKeys();
   return {
+    loading: !storiesConfigured,
     title: name,
     url,
     notifications,

lib/ui/src/core/context.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import Events from '@storybook/core-events';
+import Events, { STORIES_CONFIGURED } from '@storybook/core-events';
 
 import initProviderApi from './init-provider-api';
 
@@ -94,6 +94,9 @@ export class Provider extends Component {
 
       api.setOptions(options);
     });
+    api.on(STORIES_CONFIGURED, () => {
+      store.setState({ storiesConfigured: true });
+    });
     api.on(SELECT_STORY, ({ kind, story, ...rest }) => {
       api.selectStory(kind, story, rest);
     });

lib/ui/src/core/initial-state.js

@@ -19,6 +19,7 @@ const initial = {
     panelPosition: 'bottom',
   },
   customQueryParams: {},
+  storiesConfigured: false,
 };
 
 // Returns the initialState of the app