Merge pull request #10444 from storybookjs/improve/loading

IMPROVE the loading of the storybook UI
storybookjs · Apr 17, 2020 · 8558152 · 8558152
2 parents 72feaf4 + 43a8375
commit 8558152
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/lib/ui/src/app.tsx b/lib/ui/src/app.tsx
@@ -58,11 +58,7 @@ const App = React.memo<AppProps>(
     );
 
     if (!width || !height) {
-      content = (
-        <div>
-          {width} x {height}
-        </div>
-      );
+      content = <div />;
     } else if (width < 600) {
       content = <Mobile {...props} viewMode={viewMode} options={layout} />;
     } else {

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -4,6 +4,21 @@ import { IFrame } from './iframe';
 import { FramesRendererProps } from './utils/types';
 import { stringifyQueryParams } from './utils/stringifyQueryParams';
 
+const getActive = (
+  refId: FramesRendererProps['refId'],
+  storyId: FramesRendererProps['storyId']
+) => {
+  if (storyId === '*') {
+    return undefined;
+  }
+
+  if (refId) {
+    return `storybook-ref-${refId}`;
+  }
+
+  return 'storybook-preview-iframe';
+};
+
 export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   refs,
   story,
@@ -15,7 +30,7 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   storyId,
 }) => {
   const stringifiedQueryParams = stringifyQueryParams(queryParams);
-  const active = refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe';
+  const active = getActive(refId, storyId);
 
   const styles = useMemo<CSSObject>(() => {
     return {