diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx
index 92b8b74b784f..3820b6ea00bf 100644
--- a/addons/docs/src/blocks/ArgsTable.tsx
+++ b/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);
 
diff --git a/addons/docs/src/blocks/Canvas.tsx b/addons/docs/src/blocks/Canvas.tsx
index 42cfb0f31b1a..bf5362857f0c 100644
--- a/addons/docs/src/blocks/Canvas.tsx
+++ b/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>
diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index 59433f7ab469..65fdb19c1e72 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/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 }}
           />
diff --git a/addons/docs/src/blocks/useStory.ts b/addons/docs/src/blocks/useStory.ts
index e6266744eeb7..86bab14ea429 100644
--- a/addons/docs/src/blocks/useStory.ts
+++ b/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(
diff --git a/lib/components/src/bar/button.stories.tsx b/lib/components/src/bar/button.stories.tsx
index ae17afe72180..0e0d03a580f8 100644
--- a/lib/components/src/bar/button.stories.tsx
+++ b/lib/components/src/bar/button.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IconButton } from './button';
+import { IconButton, IconButtonSkeleton } from './button';
 import { Icons } from '../icon/icon';
 
 export default {
@@ -8,7 +8,9 @@ export default {
   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" />
diff --git a/lib/components/src/bar/button.tsx b/lib/components/src/bar/button.tsx
index 42bc49f7bd62..a24b53f6bcd7 100644
--- a/lib/components/src/bar/button.tsx
+++ b/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>
+);
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
index d6ffb2b42d3d..39f7cab987ef 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
+++ b/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 = {
diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.tsx
index e62aef714004..3087fe418efa 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx
+++ b/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;
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
index 46f9e2ca644a..dc9bff0a1a11 100644
--- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx
+++ b/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: {
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
index c71f38bdbfb7..cb1a63a3144b 100644
--- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
@@ -3,7 +3,7 @@ import pickBy from 'lodash/pickBy';
 import { styled, ignoreSsrWarning } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
 import { Icons } from '../../icon/icon';
-import { ArgRow } from './ArgRow';
+import { ArgRow, argRowLoadingData } from './ArgRow';
 import { SectionRow } from './SectionRow';
 import { ArgType, ArgTypes, Args } from './types';
 import { EmptyBlock } from '../EmptyBlock';
@@ -240,7 +240,7 @@ const sortFns: Record<SortType, SortFn | null> = {
     Number(!!b.type?.required) - Number(!!a.type?.required) || a.name.localeCompare(b.name),
   none: undefined,
 };
-export interface ArgsTableRowProps {
+export interface ArgsTableData {
   rows: ArgTypes;
   args?: Args;
   updateArgs?: (args: Args) => void;
@@ -248,14 +248,26 @@ export interface ArgsTableRowProps {
   compact?: boolean;
   inAddonPanel?: boolean;
   initialExpandedArgs?: boolean;
+  isLoading?: boolean;
   sort?: SortType;
 }
 
 export interface ArgsTableErrorProps {
   error: ArgsTableError;
 }
+interface ArgTableLoading {
+  isLoading: true;
+}
+
+export const argTableLoadingData: ArgsTableData = {
+  rows: {
+    row1: argRowLoadingData.row,
+    row2: argRowLoadingData.row,
+    row3: argRowLoadingData.row,
+  },
+};
 
-export type ArgsTableProps = ArgsTableRowProps | ArgsTableErrorProps;
+export type ArgsTableProps = ArgsTableData | ArgsTableErrorProps | ArgTableLoading;
 
 type Rows = ArgType[];
 type Subsection = Rows;
@@ -326,16 +338,139 @@ const groupRows = (rows: ArgType, sort: SortType) => {
   return sorted;
 };
 
+const SkeletonHeader = styled.div(({ theme }) => ({
+  alignContent: 'stretch',
+  display: 'flex',
+  gap: 16,
+  marginTop: 25,
+  padding: '10px 20px',
+
+  div: {
+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+    background: theme.appBorderColor,
+    flexShrink: 0,
+    height: 20,
+
+    '&:first-child, &:nth-child(4)': {
+      width: '20%',
+    },
+
+    '&:nth-child(2)': {
+      width: '30%',
+    },
+
+    '&:nth-child(3)': {
+      flexGrow: 1,
+    },
+
+    '&:last-child': {
+      width: 30,
+    },
+
+    '@media ( max-width: 500px )': {
+      '&:nth-child( n + 4 )': {
+        display: 'none',
+      },
+    },
+  },
+}));
+
+const SkeletonBody = styled.div(({ theme }) => ({
+  background: theme.background.content,
+  boxShadow:
+    theme.base === 'light'
+      ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
+          ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
+      : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
+          ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
+  borderRadius: theme.appBorderRadius,
+
+  '> div': {
+    alignContent: 'stretch',
+    borderTopColor:
+      theme.base === 'light'
+        ? darken(0.1, theme.background.content)
+        : lighten(0.05, theme.background.content),
+    borderTopStyle: 'solid',
+    borderTopWidth: 1,
+    display: 'flex',
+    gap: 16,
+    padding: 20,
+
+    '&:first-child': {
+      borderTop: 0,
+    },
+  },
+
+  '> div div': {
+    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+    background: theme.appBorderColor,
+    flexShrink: 0,
+    height: 20,
+
+    '&:first-child': {
+      width: '20%',
+    },
+
+    '&:nth-child(2)': {
+      width: '30%',
+    },
+
+    '&:nth-child(3)': {
+      flexGrow: 1,
+    },
+
+    '&:last-child': {
+      width: 'calc(20% + 47px)',
+
+      '@media ( max-width: 500px )': {
+        display: 'none',
+      },
+    },
+  },
+}));
+
+const Skeleton = () => (
+  <div>
+    <SkeletonHeader>
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+    </SkeletonHeader>
+    <SkeletonBody>
+      <div>
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div>
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div>
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </SkeletonBody>
+  </div>
+);
+
 /**
  * Display the props for a component as a props table. Each row is a collection of
  * ArgDefs, usually derived from docgen info for the component.
  */
 export const ArgsTable: FC<ArgsTableProps> = (props) => {
-  const { error } = props as ArgsTableErrorProps;
-  if (error) {
+  if ('error' in props) {
     return (
       <EmptyBlock>
-        {error}&nbsp;
+        {props.error}&nbsp;
         <Link href="http://storybook.js.org/docs/" target="_blank" withArrow>
           Read the docs
         </Link>
@@ -343,6 +478,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     );
   }
 
+  const isLoading = 'isLoading' in props;
   const {
     rows,
     args,
@@ -352,7 +488,11 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     inAddonPanel,
     initialExpandedArgs,
     sort = 'none',
-  } = props as ArgsTableRowProps;
+  } = 'rows' in props ? props : argTableLoadingData;
+
+  if (isLoading) {
+    return <Skeleton />;
+  }
 
   const groups = groupRows(
     pickBy(rows, (row) => !row?.table?.disable),
@@ -380,15 +520,16 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   const expandable = Object.keys(groups.sections).length > 0;
 
   const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
+
   return (
     <ResetWrapper>
       <TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable">
         <thead className="docblock-argstable-head">
           <tr>
             <th>Name</th>
-            {compact ? null : <th>Description</th>}
-            {compact ? null : <th>Default</th>}
-            {updateArgs ? (
+            {compact || <th>Description</th>}
+            {compact || <th>Default</th>}
+            {updateArgs && (
               <th>
                 <ControlHeadingWrapper>
                   Control{' '}
@@ -399,7 +540,8 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
                   )}
                 </ControlHeadingWrapper>
               </th>
-            ) : null}
+            )}
+            {null}
           </tr>
         </thead>
         <tbody className="docblock-argstable-body">
diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx
index dabf27dbd760..3b55d6ea3fe4 100644
--- a/lib/components/src/blocks/DocsPage.stories.tsx
+++ b/lib/components/src/blocks/DocsPage.stories.tsx
@@ -34,6 +34,19 @@ export default {
   },
 };
 
+export const Loading = () => (
+  <DocsPageWrapper>
+    <Title>DocsPage</Title>
+    <Subtitle>
+      What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab.
+    </Subtitle>
+    <Description {...description.Text.args} />
+    <Preview.Loading />
+    <argsTable.Loading />
+    <Source {...source.Loading.args} />
+  </DocsPageWrapper>
+);
+
 export const WithSubtitle = () => (
   <DocsPageWrapper>
     <Title>DocsPage</Title>
diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx
index 98ce4a763c74..b042ccfa7266 100644
--- a/lib/components/src/blocks/Preview.stories.tsx
+++ b/lib/components/src/blocks/Preview.stories.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 import global from 'global';
 
 import { Spaced } from '../spaced/Spaced';
-import { Preview } from './Preview';
+import { Preview, PreviewSkeleton } from './Preview';
 import { Story } from './Story';
 import { Button } from '../Button/Button';
 import * as Source from './Source.stories';
@@ -15,6 +15,8 @@ export default {
   component: Preview,
 };
 
+export const Loading = () => <PreviewSkeleton />;
+
 export const CodeCollapsed = () => (
   <Preview isExpanded={false} withSource={Source.JSX.args}>
     <Button secondary>Button 1</Button>
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
index 9b8c07c707ee..1ee62bc0956a 100644
--- a/lib/components/src/blocks/Preview.tsx
+++ b/lib/components/src/blocks/Preview.tsx
@@ -17,6 +17,7 @@ import { ActionBar, ActionItem } from '../ActionBar/ActionBar';
 import { Toolbar } from './Toolbar';
 import { ZoomContext } from './ZoomContext';
 import { Zoom } from '../Zoom/Zoom';
+import { StorySkeleton } from '.';
 
 export interface PreviewProps {
   isColumn?: boolean;
@@ -189,7 +190,7 @@ const getLayout = (children: ReactElement[]): layout => {
  * items. The preview also shows the source for the component
  * as a drop-down.
  */
-const Preview: FunctionComponent<PreviewProps> = ({
+export const Preview: FunctionComponent<PreviewProps> = ({
   isColumn,
   columns,
   children,
@@ -284,4 +285,8 @@ const Preview: FunctionComponent<PreviewProps> = ({
   );
 };
 
-export { Preview };
+export const PreviewSkeleton = () => (
+  <Preview withToolbar>
+    <StorySkeleton />
+  </Preview>
+);
diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx
index 5af0dfe0710d..a3dc80c2c859 100644
--- a/lib/components/src/blocks/Source.stories.tsx
+++ b/lib/components/src/blocks/Source.stories.tsx
@@ -6,6 +6,11 @@ export default {
   component: Source,
 };
 
+export const Loading = (args) => <Source {...args} />;
+Loading.args = {
+  isLoading: true,
+};
+
 const jsxCode = `
 <MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>
   <SomeOtherComponent funcProp={(a) => a.id} />
diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
index 546c2d9ab98a..d8c0d6e73dcf 100644
--- a/lib/components/src/blocks/Source.tsx
+++ b/lib/components/src/blocks/Source.tsx
@@ -24,6 +24,7 @@ export enum SourceError {
 }
 
 interface SourceErrorProps {
+  isLoading?: boolean;
   error?: SourceError;
 }
 
@@ -34,6 +35,37 @@ interface SourceCodeProps {
   dark?: boolean;
 }
 
+const SourceSkeletonWrapper = styled.div<{}>(({ theme }) => ({
+  background: theme.background.content,
+  borderRadius: theme.appBorderRadius,
+  border: `1px solid ${theme.appBorderColor}`,
+  boxShadow:
+    theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+  margin: '25px 0 40px',
+  padding: '20px 20px 20px 22px',
+}));
+
+const SourceSkeletonPlaceholder = styled.div<{}>(({ theme }) => ({
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+  background: theme.appBorderColor,
+  height: 17,
+  marginTop: 1,
+  width: '60%',
+
+  '&:first-child': {
+    margin: 0,
+  },
+}));
+
+const SourceSkeleton = () => (
+  <SourceSkeletonWrapper>
+    <SourceSkeletonPlaceholder />
+    <SourceSkeletonPlaceholder style={{ width: '80%' }} />
+    <SourceSkeletonPlaceholder style={{ width: '30%' }} />
+    <SourceSkeletonPlaceholder style={{ width: '80%' }} />
+  </SourceSkeletonWrapper>
+);
+
 // FIXME: Using | causes a typescript error, so stubbing it with & for now
 // and making `error` optional
 export type SourceProps = SourceErrorProps & SourceCodeProps;
@@ -42,7 +74,10 @@ export type SourceProps = SourceErrorProps & SourceCodeProps;
  * Syntax-highlighted source code for a component (or anything!)
  */
 const Source: FunctionComponent<SourceProps> = (props) => {
-  const { error } = props as SourceErrorProps;
+  const { isLoading, error } = props as SourceErrorProps;
+  if (isLoading) {
+    return <SourceSkeleton />;
+  }
   if (error) {
     return <EmptyBlock>{error}</EmptyBlock>;
   }
diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index 3d2bacc90cec..79136501df5c 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Story, StoryError } from './Story';
+import { Story, StorySkeleton, StoryError } from './Story';
 import { Button } from '../Button/Button';
 
 export default {
@@ -18,8 +18,10 @@ const buttonHookFn = () => {
   );
 };
 
-export const Inline = () => <Story inline storyFn={buttonFn} title="hello button" />;
+export const Loading = () => <StorySkeleton />;
 
-export const Error = () => <Story error={StoryError.NO_STORY} />;
+export const Inline = () => <Story id="id" inline storyFn={buttonFn} title="hello button" />;
 
-export const ReactHook = () => <Story inline storyFn={buttonHookFn} title="hello button" />;
+export const Error = () => <Story id="id" error={StoryError.NO_STORY} />;
+
+export const ReactHook = () => <Story id="id" inline storyFn={buttonHookFn} title="hello button" />;
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 2a44d1b8d10b..e32962a6242b 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -5,6 +5,7 @@ import type { Parameters } from '@storybook/api';
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
+import { Loader } from '..';
 
 const BASE_URL = 'iframe.html';
 
@@ -19,7 +20,7 @@ export enum StoryError {
 const MISSING_STORY = (id?: string) => (id ? `Story "${id}" doesn't exist.` : StoryError.NO_STORY);
 
 interface CommonProps {
-  title: string;
+  title?: string;
   height?: string;
   id: string;
 }
@@ -72,7 +73,7 @@ const IFrameStory: FunctionComponent<IFrameStoryProps> = ({ id, title, height =
  * A story element, either rendered inline or in an iframe,
  * with configurable height.
  */
-const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryError }> = ({
+const Story: FunctionComponent<StoryProps & { inline?: boolean; error?: StoryError }> = ({
   children,
   error,
   inline,
@@ -90,4 +91,6 @@ const Story: FunctionComponent<StoryProps & { inline: boolean; error?: StoryErro
   );
 };
 
-export { Story };
+const StorySkeleton = () => <Loader />;
+
+export { Story, StorySkeleton };
diff --git a/lib/core-common/src/templates/base-preview-body.html b/lib/core-common/src/templates/base-preview-body.html
index 71c0b67fde9b..43970c2a9d7f 100644
--- a/lib/core-common/src/templates/base-preview-body.html
+++ b/lib/core-common/src/templates/base-preview-body.html
@@ -1,3 +1,231 @@
+<style>
+  @-webkit-keyframes rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  .isLoading {
+    cursor: progress;
+  }
+
+  .loader {
+    -webkit-animation: rotate360 0.7s linear infinite;
+    animation: rotate360 0.7s linear infinite;
+    border-color: rgba(97, 97, 97, 0.29);
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: #646464;
+    border-width: 2px;
+    display: inline-block;
+    height: 32px;
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -16px;
+    mix-blend-mode: difference;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    transition: all 200ms ease-out;
+    vertical-align: top;
+    width: 32px;
+    z-index: 4;
+  }
+
+  .previewBlock {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+    margin: 25px auto 40px;
+    max-width: 600px;
+  }
+
+  .previewBlock_header {
+    align-items: center;
+    background: #fff;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
+    display: flex;
+    gap: 14px;
+    height: 40px;
+    padding: 0 12px;
+  }
+
+  .previewBlock_icon {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    height: 14px;
+    width: 14px;
+  }
+  .previewBlock_icon:last-child {
+    margin-left: auto;
+  }
+
+  .previewBlock_body {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    height: 110px;
+    position: relative;
+  }
+
+  .argsTable {
+    margin: 0 auto;
+    max-width: 600px;
+  }
+
+  .argsTable_header {
+    align-content: stretch;
+    display: flex;
+    gap: 16px;
+    margin-top: 25px;
+    padding: 10px 20px;
+  }
+  .argsTable_header div {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    flex-shrink: 0;
+    height: 20px;
+  }
+  .argsTable_header div:first-child,
+  .argsTable_header div:nth-child(4) {
+    width: 20%;
+  }
+  .argsTable_header div:nth-child(2) {
+    width: 30%;
+  }
+  .argsTable_header div:nth-child(3) {
+    flex-grow: 1;
+  }
+  .argsTable_header div:last-child {
+    width: 30px;
+  }
+  @media (max-width: 500px) {
+    .argsTable_header div:nth-child(n + 4) {
+      display: none;
+    }
+  }
+
+  .argsTable_body {
+    background: #ffffff;
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
+  }
+
+  .argsTable_row {
+    align-content: stretch;
+    border-top-color: #e6e6e6;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    gap: 16px;
+    padding: 20px;
+  }
+  .argsTable_row:first-child {
+    border-top: 0;
+  }
+  .argsTable_row div {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background: rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+    height: 20px;
+  }
+  .argsTable_row div:first-child {
+    width: 20%;
+  }
+  .argsTable_row div:nth-child(2) {
+    width: 30%;
+  }
+  .argsTable_row div:nth-child(3) {
+    flex-grow: 1;
+  }
+  .argsTable_row div:last-child {
+    width: calc(20% + 47px);
+  }
+  @media (max-width: 500px) {
+    .argsTable_row div:last-child {
+      display: none;
+    }
+  }
+</style>
+
+<div class="sb-preparing-story sb-wrapper">
+  <div class="loader"></div>
+</div>
+
+<div class="sb-preparing-docs sb-wrapper">
+  <div class="previewBlock">
+    <div class="previewBlock_header">
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+    </div>
+    <div class="previewBlock_body">
+      <div class="loader"></div>
+    </div>
+  </div>
+  <div class="argsTable">
+    <div class="argsTable_header">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    <div class="argsTable_body">
+      <div class="argsTable_row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      <div class="argsTable_row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      <div class="argsTable_row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="sb-nopreview sb-wrapper">
   <div class="sb-nopreview_main">
     <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
@@ -6,7 +234,9 @@ <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
       <li>Please check the Storybook config.</li>
       <li>Try reloading the page.</li>
     </ul>
-    <p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p>
+    <p>
+      If the problem persists, check the browser console, or the terminal you've run Storybook from.
+    </p>
   </div>
 </div>
 
diff --git a/lib/core-common/src/templates/base-preview-head.html b/lib/core-common/src/templates/base-preview-head.html
index 0af7eb67d9e4..def373e8608d 100644
--- a/lib/core-common/src/templates/base-preview-head.html
+++ b/lib/core-common/src/templates/base-preview-head.html
@@ -1,7 +1,10 @@
-<base target="_parent">
+<base target="_parent" />
 
 <style>
-  :not(.sb-show-main) > .sb-main,
+  :not(.sb-show-main) > #root,
+  :not(.sb-show-main) > #docs-root,
+  :not(.sb-show-preparing-story) > .sb-preparing-story,
+  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
   :not(.sb-show-nopreview) > .sb-nopreview,
   :not(.sb-show-errordisplay) > .sb-errordisplay {
     display: none;
@@ -50,7 +53,8 @@
     left: 0;
     right: 0;
     padding: 20px;
-    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+      BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     overflow: auto;
   }
@@ -73,7 +77,7 @@
     margin: auto;
     padding: 30px;
     border-radius: 10px;
-    background: rgba(0,0,0,0.03);
+    background: rgba(0, 0, 0, 0.03);
   }
 
   .sb-nopreview_heading {
@@ -91,7 +95,8 @@
     padding: 10px;
     background: #000;
     color: #eee;
-    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
   }
 
   .sb-errordisplay pre {
diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts
index ade2f4220f7c..c97aaf8f9d35 100644
--- a/lib/preview-web/src/PreviewWeb.test.ts
+++ b/lib/preview-web/src/PreviewWeb.test.ts
@@ -1264,6 +1264,19 @@ describe('PreviewWeb', () => {
         );
       });
 
+      it('renders preparing state', async () => {
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+
+        emitter.emit(Events.SET_CURRENT_STORY, {
+          storyId: 'component-one--b',
+          viewMode: 'story',
+        });
+        await waitForSetCurrentStory();
+
+        expect(preview.view.showPreparingStory).toHaveBeenCalled();
+      });
+
       it('emits STORY_CHANGED', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
@@ -1687,6 +1700,19 @@ describe('PreviewWeb', () => {
         );
       });
 
+      it('renders preparing state', async () => {
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+
+        emitter.emit(Events.SET_CURRENT_STORY, {
+          storyId: 'component-one--a',
+          viewMode: 'docs',
+        });
+        await waitForSetCurrentStory();
+
+        expect(preview.view.showPreparingDocs).toHaveBeenCalled();
+      });
+
       it('emits STORY_CHANGED', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
@@ -2364,6 +2390,18 @@ describe('PreviewWeb', () => {
         expect(mockChannel.emit).not.toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--a');
       });
 
+      it('clears preparing state', async () => {
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+
+        (preview.view.showMain as jest.Mock).mockClear();
+        mockChannel.emit.mockClear();
+        preview.onStoriesChanged({ importFn: newImportFn });
+        await waitForEvents([Events.STORY_UNCHANGED]);
+
+        expect(preview.view.showMain).toHaveBeenCalled();
+      });
+
       it('does not re-render the story', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx
index 9d906ef99440..35f786d051e8 100644
--- a/lib/preview-web/src/PreviewWeb.tsx
+++ b/lib/preview-web/src/PreviewWeb.tsx
@@ -408,6 +408,16 @@ export class PreviewWeb<TFramework extends AnyFramework> {
 
     const { storyId } = selection;
 
+    const storyIdChanged = this.previousSelection?.storyId !== storyId;
+    const viewModeChanged = this.previousSelection?.viewMode !== selection.viewMode;
+
+    // Show a spinner while we load the next story
+    if (selection.viewMode === 'story') {
+      this.view.showPreparingStory();
+    } else {
+      this.view.showPreparingDocs();
+    }
+
     let story;
     try {
       story = await this.storyStore.loadStory({ storyId });
@@ -418,9 +428,6 @@ export class PreviewWeb<TFramework extends AnyFramework> {
       return;
     }
 
-    const storyIdChanged = this.previousSelection?.storyId !== storyId;
-    const viewModeChanged = this.previousSelection?.viewMode !== selection.viewMode;
-
     const implementationChanged =
       !storyIdChanged && this.previousStory && story !== this.previousStory;
 
@@ -431,6 +438,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
     // Don't re-render the story if nothing has changed to justify it
     if (this.previousStory && !storyIdChanged && !implementationChanged && !viewModeChanged) {
       this.channel.emit(Events.STORY_UNCHANGED, storyId);
+      this.view.showMain();
       return;
     }
 
@@ -472,7 +480,6 @@ export class PreviewWeb<TFramework extends AnyFramework> {
 
   async renderDocs({ story }: { story: Story<TFramework> }) {
     const { id, title, name } = story;
-    const element = this.view.prepareForDocs();
     const csfFile: CSFFile<TFramework> = await this.storyStore.loadCSFFileByStoryId(id);
     const docsContext = {
       id,
@@ -497,7 +504,9 @@ export class PreviewWeb<TFramework extends AnyFramework> {
         ...(!global.FEATURES?.breakingChangesV7 && this.storyStore.getStoryContext(story)),
       };
 
-      (await import('./renderDocs')).renderDocs(story, fullDocsContext, element, () =>
+      const renderer = await import('./renderDocs');
+      const element = this.view.prepareForDocs();
+      renderer.renderDocs(story, fullDocsContext, element, () =>
         this.channel.emit(Events.DOCS_RENDERED, id)
       );
     };
diff --git a/lib/preview-web/src/WebView.ts b/lib/preview-web/src/WebView.ts
index 19b0e5c655be..246344216ac4 100644
--- a/lib/preview-web/src/WebView.ts
+++ b/lib/preview-web/src/WebView.ts
@@ -2,6 +2,7 @@ import global from 'global';
 import { logger } from '@storybook/client-logger';
 import AnsiToHtml from 'ansi-to-html';
 import dedent from 'ts-dedent';
+import qs from 'qs';
 
 import { Story } from '@storybook/store';
 
@@ -14,7 +15,16 @@ const layoutClassMap = {
 } as const;
 type Layout = keyof typeof layoutClassMap | 'none';
 
-const classes = {
+enum Mode {
+  'MAIN' = 'MAIN',
+  'NOPREVIEW' = 'NOPREVIEW',
+  'PREPARING_STORY' = 'PREPARING_STORY',
+  'PREPARING_DOCS' = 'PREPARING_DOCS',
+  'ERROR' = 'ERROR',
+}
+const classes: Record<Mode, string> = {
+  PREPARING_STORY: 'sb-show-preparing-story',
+  PREPARING_DOCS: 'sb-show-preparing-docs',
   MAIN: 'sb-show-main',
   NOPREVIEW: 'sb-show-nopreview',
   ERROR: 'sb-show-errordisplay',
@@ -27,6 +37,28 @@ const ansiConverter = new AnsiToHtml({
 export class WebView {
   currentLayoutClass?: typeof layoutClassMap[keyof typeof layoutClassMap] | null;
 
+  testing = false;
+
+  constructor() {
+    // Special code for testing situations
+    const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document.location.search, {
+      ignoreQueryPrefix: true,
+    });
+    switch (__SPECIAL_TEST_PARAMETER__) {
+      case 'preparing-story': {
+        this.showPreparingStory();
+        this.testing = true;
+        break;
+      }
+      case 'preparing-docs': {
+        this.showPreparingDocs();
+        this.testing = true;
+        break;
+      }
+      default: // pass;
+    }
+  }
+
   // Get ready to render a story, returning the element to render to
   prepareForStory(story: Story<any>) {
     this.showStory();
@@ -78,32 +110,43 @@ export class WebView {
     }
   }
 
+  showMode(mode: Mode) {
+    Object.keys(Mode).forEach((otherMode) => {
+      if (otherMode === mode) {
+        document.body.classList.add(classes[otherMode]);
+      } else {
+        document.body.classList.remove(classes[otherMode as Mode]);
+      }
+    });
+  }
+
   showErrorDisplay({ message = '', stack = '' }) {
     document.getElementById('error-message').innerHTML = ansiConverter.toHtml(message);
     document.getElementById('error-stack').innerHTML = ansiConverter.toHtml(stack);
 
-    document.body.classList.remove(classes.MAIN);
-    document.body.classList.remove(classes.NOPREVIEW);
-
-    document.body.classList.add(classes.ERROR);
+    this.showMode(Mode.ERROR);
   }
 
   showNoPreview() {
-    document.body.classList.remove(classes.MAIN);
-    document.body.classList.remove(classes.ERROR);
+    if (this.testing) return;
 
-    document.body.classList.add(classes.NOPREVIEW);
+    this.showMode(Mode.NOPREVIEW);
 
     // In storyshots this can get called and these two can be null
     this.storyRoot()?.setAttribute('hidden', 'true');
     this.docsRoot()?.setAttribute('hidden', 'true');
   }
 
-  showMain() {
-    document.body.classList.remove(classes.NOPREVIEW);
-    document.body.classList.remove(classes.ERROR);
+  showPreparingStory() {
+    this.showMode(Mode.PREPARING_STORY);
+  }
 
-    document.body.classList.add(classes.MAIN);
+  showPreparingDocs() {
+    this.showMode(Mode.PREPARING_DOCS);
+  }
+
+  showMain() {
+    this.showMode(Mode.MAIN);
   }
 
   showDocs() {
diff --git a/lib/ui/src/components/preview/iframe.stories.tsx b/lib/ui/src/components/preview/iframe.stories.tsx
index 9b442a62f18e..738f288748a7 100644
--- a/lib/ui/src/components/preview/iframe.stories.tsx
+++ b/lib/ui/src/components/preview/iframe.stories.tsx
@@ -8,7 +8,7 @@ export default {
 };
 
 const style: CSSProperties = {
-  width: '500px',
+  maxWidth: '700px',
   height: '500px',
   border: '2px solid hotpink',
   position: 'relative',
@@ -40,3 +40,27 @@ export const MissingStory = () => (
     scale={1.0}
   />
 );
+
+export const preparingStory = () => (
+  <IFrame
+    active
+    id="iframe"
+    title="Preparing Story"
+    src="/iframe.html?__SPECIAL_TEST_PARAMETER__=preparing-story"
+    allowFullScreen
+    style={style}
+    scale={1.0}
+  />
+);
+
+export const preparingDocs = () => (
+  <IFrame
+    active
+    id="iframe"
+    title="Preparing Docs"
+    src="/iframe.html?__SPECIAL_TEST_PARAMETER__=preparing-docs"
+    allowFullScreen
+    style={style}
+    scale={1.0}
+  />
+);