feat(Loader): add delay prop

docs/src/examples/components/Loader/Usage/LoaderExampleDelay.knobs.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import Knobs from 'docs/src/components/Knobs/Knobs'
+
+type LoaderExampleLoaderKnobsProps = {
+  mounted?: boolean
+  onKnobChange: () => void
+}
+
+const LoaderExampleLoaderKnobs: React.FC<LoaderExampleLoaderKnobsProps> = props => {
+  const { mounted, onKnobChange } = props
+
+  return (
+    <Knobs>
+      <Knobs.Boolean name="mounted" onChange={onKnobChange} value={mounted} />
+    </Knobs>
+  )
+}
+
+LoaderExampleLoaderKnobs.defaultProps = {
+  mounted: true,
+}
+
+export default LoaderExampleLoaderKnobs

docs/src/examples/components/Loader/Usage/LoaderExampleDelay.tsx

@@ -0,0 +1,8 @@
+import { Loader } from '@stardust-ui/react'
+import * as React from 'react'
+
+const LoaderExampleDelay: React.FC<{ knobs: { mounted: boolean } }> = ({ knobs }) => (
+  <div style={{ minHeight: 24 }}>{knobs.mounted && <Loader delay={500} />}</div>
+)
+
+export default LoaderExampleDelay

docs/src/examples/components/Loader/Usage/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const LoaderUsageExamples = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Delay"
+      description="Time in milliseconds after component mount before spinner is visible."
+      examplePath="components/Loader/Usage/LoaderExampleDelay"
+    />
+  </ExampleSection>
+)
+
+export default LoaderUsageExamples

docs/src/examples/components/Loader/index.tsx

@@ -2,12 +2,14 @@ import * as React from 'react'
 
 import Performance from './Performance'
 import Types from './Types'
+import Usage from './Usage'
 import Variations from './Variations'
 
 const LoaderExamples = () => (
   <>
     <Types />
     <Variations />
+    <Usage />
     <Performance />
   </>
 )

packages/react/src/components/Loader/Loader.tsx

@@ -24,9 +24,15 @@ export interface LoaderProps extends UIComponentProps, ColorComponentProps {
    */
   accessibility?: Accessibility
 
+  /** Time in milliseconds after component mount before spinner is visible. */
+  delay?: number
+
   /** A loader can contain an indicator. */
   indicator?: ShorthandValue
 
+  /** Loaders can appear inline with content. */
+  inline?: boolean
+
   /** A loader can contain a label. */
   label?: ShorthandValue
 
@@ -37,10 +43,14 @@ export interface LoaderProps extends UIComponentProps, ColorComponentProps {
   size?: SizeValue
 }
 
+export interface LoaderState {
+  visible: boolean
+}
+
 /**
  * A Loader indicates a possible user action.
  */
-class Loader extends UIComponent<ReactProps<LoaderProps>> {
+class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
   static create: Function
   static displayName = 'Loader'
   static className = 'ui-loader'
@@ -51,27 +61,61 @@ class Loader extends UIComponent<ReactProps<LoaderProps>> {
       content: false,
       color: true,
     }),
+    delay: PropTypes.number,
     indicator: customPropTypes.itemShorthand,
+    inline: PropTypes.bool,
     label: customPropTypes.itemShorthand,
     labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
     size: customPropTypes.size,
   }
 
   static defaultProps = {
     accessibility: loaderBehavior,
+    delay: 0,
     indicator: '',
     labelPosition: 'below',
     size: 'medium',
   }
 
+  delayTimer: number
+
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      visible: this.props.delay === 0,
+    }
+  }
+
+  componentDidMount() {
+    const { delay } = this.props
+
+    if (delay > 0) {
+      this.delayTimer = window.setTimeout(() => {
+        this.setState({ visible: true })
+      }, delay)
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.delayTimer)
+  }
+
   renderComponent({ ElementType, classes, accessibility, variables, styles, unhandledProps }) {
     const { indicator, label } = this.props
+    const { visible } = this.state
 
     return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {Box.create(indicator, { defaultProps: { styles: styles.indicator } })}
-        {Box.create(label, { defaultProps: { styles: styles.label } })}
-      </ElementType>
+      visible && (
+        <ElementType
+          className={classes.root}
+          {...accessibility.attributes.root}
+          {...unhandledProps}
+        >
+          {Box.create(indicator, { defaultProps: { styles: styles.indicator } })}
+          {Box.create(label, { defaultProps: { styles: styles.label } })}
+        </ElementType>
+      )
     )
   }
 }