UI: Docs loading state (WIP)

addons/docs/src/blocks/ArgsTable.tsx

@@ -162,9 +162,7 @@ export const StoryTable: FC<
     const story = useStory(storyId, context);
     // eslint-disable-next-line prefer-const
     let [args, updateArgs, resetArgs] = useArgs(storyId, context);
-    if (!story) {
-      return <div>Loading...</div>;
-    }
+    if (!story) return <PureArgsTable isLoading />;
 
     const argTypes = filterArgTypes(story.argTypes, include, exclude);
 

addons/docs/src/blocks/Canvas.tsx

@@ -5,6 +5,7 @@ import {
   resetComponents,
   Preview as PurePreview,
   PreviewProps as PurePreviewProps,
+  PreviewSkeleton,
 } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { SourceContext, SourceContextProps } from './SourceContainer';
@@ -71,7 +72,9 @@ export const Canvas: FC<CanvasProps> = (props) => {
   const { isLoading, previewProps } = getPreviewProps(props, docsContext, sourceContext);
   const { children } = props;
 
-  return isLoading ? null : (
+  if (isLoading) return <PreviewSkeleton />;
+
+  return (
     <MDXProvider components={resetComponents}>
       <PurePreview {...previewProps}>{children}</PurePreview>
     </MDXProvider>

addons/docs/src/blocks/Story.tsx

@@ -6,10 +6,11 @@ import React, {
   useContext,
   useRef,
   useEffect,
+  useState,
 } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import global from 'global';
-import { resetComponents, Story as PureStory } from '@storybook/components';
+import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
 import { StoryId, toId, storyNameFromExport, StoryAnnotations, AnyFramework } from '@storybook/csf';
 import { Story as StoryType } from '@storybook/store';
 import { addons } from '@storybook/addons';
@@ -113,13 +114,14 @@ export const getStoryProps = <TFramework extends AnyFramework>(
 const Story: FunctionComponent<StoryProps> = (props) => {
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
-  const ref = useRef();
+  const storyRef = useRef();
   const storyId = getStoryId(props, context);
   const story = useStory(storyId, context);
+  const [showLoader, setShowLoader] = useState(true);
 
   useEffect(() => {
     let cleanup: () => void;
-    if (story && ref.current) {
+    if (story && storyRef.current) {
       const { componentId, id, title, name } = story;
       const renderContext = {
         componentId,
@@ -136,14 +138,15 @@ const Story: FunctionComponent<StoryProps> = (props) => {
       cleanup = context.renderStoryToElement({
         story,
         renderContext,
-        element: ref.current as HTMLElement,
+        element: storyRef.current as HTMLElement,
       });
+      setShowLoader(false);
     }
     return () => cleanup && cleanup();
   }, [story]);
 
   if (!story) {
-    return <div>Loading...</div>;
+    return <StorySkeleton />;
   }
 
   // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
@@ -158,7 +161,7 @@ const Story: FunctionComponent<StoryProps> = (props) => {
 
   if (global?.FEATURES?.modernInlineRender) {
     // We do this so React doesn't complain when we replace the span in a secondary render
-    const htmlContents = `<span data-is-loading-indicator="true">loading story...</span>`;
+    const htmlContents = `<span></span>`;
 
     // FIXME: height/style/etc. lifted from PureStory
     const { height } = storyProps;
@@ -168,8 +171,9 @@ const Story: FunctionComponent<StoryProps> = (props) => {
           {height ? (
             <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
           ) : null}
+          {showLoader && <StorySkeleton />}
           <div
-            ref={ref}
+            ref={storyRef}
             data-name={story.name}
             dangerouslySetInnerHTML={{ __html: htmlContents }}
           />

addons/docs/src/blocks/useStory.ts

@@ -16,7 +16,12 @@ export function useStories<TFramework extends AnyFramework = AnyFramework>(
   storyIds: StoryId[],
   context: DocsContextProps<TFramework>
 ): (Story<TFramework> | void)[] {
-  const [storiesById, setStories] = useState({} as Record<StoryId, Story<TFramework>>);
+  const initialStoriesById = context.componentStories().reduce((acc, story) => {
+    acc[story.id] = story;
+    return acc;
+  }, {} as Record<StoryId, Story<TFramework>>);
+
+  const [storiesById, setStories] = useState(initialStoriesById as typeof initialStoriesById);
 
   useEffect(() => {
     Promise.all(

lib/components/src/bar/button.stories.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 
-import { IconButton } from './button';
+import { IconButton, IconButtonSkeleton } from './button';
 import { Icons } from '../icon/icon';
 
 export default {
   component: IconButton,
   title: 'Basics/IconButton',
 };
 
-/* eslint-disable-next-line no-underscore-dangle */
+export const Loading = () => <IconButtonSkeleton />;
+
+// eslint-disable-next-line no-underscore-dangle
 export const _IconButton = () => (
   <IconButton>
     <Icons icon="bookmark" />

lib/components/src/bar/button.tsx

@@ -124,3 +124,20 @@ export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid
         }
 );
 IconButton.displayName = 'IconButton';
+
+const IconPlaceholder = styled.div(({ theme }) => ({
+  width: 14,
+  height: 14,
+  backgroundColor: theme.appBorderColor,
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+}));
+
+const IconButtonSkeletonWrapper = styled.div(() => ({
+  padding: 5,
+}));
+
+export const IconButtonSkeleton = () => (
+  <IconButtonSkeletonWrapper>
+    <IconPlaceholder />
+  </IconButtonSkeletonWrapper>
+);

lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx

@@ -23,6 +23,8 @@ const Template = (args) => <ArgRow {...args} />;
 const baseArgs = {
   updateArgs: action('updateArgs'),
 };
+export const Loading = Template.bind({});
+Loading.args = { isLoading: true };
 
 export const String = Template.bind({});
 String.args = {

lib/components/src/blocks/ArgsTable/ArgRow.tsx

@@ -8,7 +8,7 @@ import { ArgValue } from './ArgValue';
 import { ArgControl, ArgControlProps } from './ArgControl';
 import { codeCommon } from '../../typography/shared';
 
-export interface ArgRowProps {
+interface ArgRowData {
   row: ArgType;
   arg: any;
   updateArgs?: (args: Args) => void;
@@ -17,6 +17,17 @@ export interface ArgRowProps {
   initialExpandedArgs?: boolean;
 }
 
+interface ArgRowLoading {
+  isLoading: true;
+}
+
+export const argRowLoadingData: ArgRowData = {
+  row: { name: 'loading', description: 'loading' },
+  arg: 0,
+};
+
+export type ArgRowProps = ArgRowData | ArgRowLoading;
+
 const Name = styled.span({ fontWeight: 'bold' });
 
 const Required = styled.span(({ theme }) => ({
@@ -73,7 +84,9 @@ const StyledTd = styled.td<{ expandable: boolean }>(({ theme, expandable }) => (
 }));
 
 export const ArgRow: FC<ArgRowProps> = (props) => {
-  const { row, updateArgs, compact, expandable, initialExpandedArgs } = props;
+  // const isLoading = 'isLoading' in props;
+  const { row, updateArgs, compact, expandable, initialExpandedArgs } =
+    'row' in props ? props : argRowLoadingData;
   const { name, description } = row;
   const table = (row.table || {}) as TableAnnotation;
   const type = table.type || row.type;

lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx

@@ -27,6 +27,8 @@ const longEnumType = ArgRow.LongEnum.args.row;
 
 const Template = (args) => <ArgsTable {...args} />;
 
+export const Loading = Template.bind({});
+Loading.args = { isLoading: true };
 export const Normal = Template.bind({});
 Normal.args = {
   rows: {