ADD a 'empty' state when stories are set successfully, but it was empty

lib/ui/src/components/preview/preview.tsx

@@ -61,8 +61,7 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
           ]);
 
           const isLoading = !!(
-            (!story && !storiesFailed) ||
-            (!story && storiesConfigured === false) ||
+            (!story && !(storiesFailed || storiesConfigured)) ||
             (story && refId && refs[refId] && !refs[refId].ready)
           );
 

lib/ui/src/components/sidebar/RefBlocks.tsx

@@ -220,6 +220,24 @@ export const ErrorBlock: FunctionComponent<{ error: Error }> = ({ error }) => (
   </Contained>
 );
 
+export const EmptyBlock: FunctionComponent = () => (
+  <Contained>
+    <Spaced>
+      <Text>Ow now! something went wrong loading this storybook</Text>
+      <WithTooltip
+        trigger="click"
+        closeOnClick={false}
+        tooltip={<ErrorDisplay>There was no error, but there were no stories loaded</ErrorDisplay>}
+      >
+        <Button small gray>
+          <Icons icon="doclist" />
+          View error
+        </Button>
+      </WithTooltip>
+    </Spaced>
+  </Contained>
+);
+
 export const LoaderBlock: FunctionComponent<{ isMain: boolean }> = ({ isMain }) => (
   <Contained>
     <Loader size={isMain ? 17 : 5} />

lib/ui/src/components/sidebar/RefHelpers.tsx

@@ -7,7 +7,12 @@ export type Item = StoriesHash[keyof StoriesHash];
 export type DataSet = Record<string, Item>;
 export type FilteredType = 'filtered' | 'unfiltered';
 
-export const getType = (isLoading: boolean, isAuthRequired: boolean, isError: boolean) => {
+export const getType = (
+  isLoading: boolean,
+  isAuthRequired: boolean,
+  isError: boolean,
+  isEmpty: boolean
+) => {
   if (isAuthRequired) {
     return 'auth';
   }
@@ -17,5 +22,8 @@ export const getType = (isLoading: boolean, isAuthRequired: boolean, isError: bo
   if (isLoading) {
     return 'loading';
   }
+  if (isEmpty) {
+    return 'empty';
+  }
   return 'ready';
 };

lib/ui/src/components/sidebar/Refs.tsx

@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 import { ExpanderContext, useDataset } from './Tree/State';
 import { Expander } from './Tree/ListItem';
 import { RefIndicator } from './RefIndicator';
-import { AuthBlock, ErrorBlock, LoaderBlock, ContentBlock } from './RefBlocks';
+import { AuthBlock, ErrorBlock, LoaderBlock, ContentBlock, EmptyBlock } from './RefBlocks';
 import { getType, RefType } from './RefHelpers';
 
 export interface RefProps {
@@ -69,12 +69,13 @@ export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
 
   const combo = useMemo(() => ({ setExpanded, expandedSet }), [setExpanded, expandedSet]);
 
-  const isLoading = !length;
   const isMain = key === 'storybook_internal';
+  const isLoading = length === 0 && !ref.ready;
   const isError = !!error;
+  const isEmpty = !isLoading && length === 0;
   const isAuthRequired = !!authUrl;
 
-  const type = getType(isLoading, isAuthRequired, isError);
+  const type = getType(isLoading, isAuthRequired, isError, isEmpty);
 
   return isHidden ? null : (
     <ExpanderContext.Provider value={combo}>
@@ -95,6 +96,7 @@ export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
           {type === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
           {type === 'error' && <ErrorBlock error={error} />}
           {type === 'loading' && <LoaderBlock isMain={isMain} />}
+          {type === 'empty' && <EmptyBlock />}
           {type === 'ready' && (
             <ContentBlock {...{ others, dataSet, selectedSet, expandedSet, roots }} />
           )}