Add a delay prop to set how long to wait before rendering the Spinner

.changeset/shaggy-pants-remain.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(Spinner): Add a delay prop to set how long to wait before rendering the Spinner

packages/react/src/Spinner/Spinner.tsx

@@ -1,4 +1,5 @@
 import type React from 'react'
+import {useState, useEffect} from 'react'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
 import {useId} from '../hooks'
@@ -20,6 +21,8 @@ export type SpinnerProps = {
   'aria-label'?: string
   className?: string
   style?: React.CSSProperties
+  /** Number of milliseconds to delay the spinner before rendering. */
+  delay?: number
 } & HTMLDataAttributes
 
 function Spinner({
@@ -28,12 +31,29 @@ function Spinner({
   'aria-label': ariaLabel,
   className,
   style,
+  delay = 0,
   ...props
 }: SpinnerProps) {
   const size = sizeMap[sizeKey]
   const hasHiddenLabel = srText !== null && ariaLabel === undefined
   const labelId = useId()
 
+  const [isVisible, setIsVisible] = useState(delay === 0)
+
+  useEffect(() => {
+    if (delay > 0) {
+      const timeoutId = setTimeout(() => {
+        setIsVisible(true)
+      }, delay)
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [delay])
+
+  if (!isVisible) {
+    return null
+  }
+
   return (
     /* inline-flex removes the extra line height */
     <span className={classes.Box}>