import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { LoadingIndicator } from './loading-indicator.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Feedback|LoadingIndicator" component={LoadingIndicator} />

# Loading Indicator

Wraps some other components, replacing them with an animation until the `ready` property becomes `truthy`.

## Default

<Canvas>
  <Story id="components-feedback-loading-indicator--default" />
</Canvas>

## Neutral

<Canvas>
  <Story id="components-feedback-loading-indicator--neutral" />
</Canvas>

## Supported Property Mixins:

Spacing:

<Canvas>
  <Story id="components-feedback-loading-indicator--mixins-spacing" />
</Canvas>

Stacked:

<Canvas>
  <Story id="components-feedback-loading-indicator--mixins-stacked" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-feedback-loading-indicator--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={LoadingIndicator} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A64"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/feedback/loading-indicator"
  type="github"
/>