changelog edits

Author: liuliu-dev

package-lock.json

@@ -6,8 +6,12 @@
 
 - [#7455](https://github.com/primer/react/pull/7455) [`a86c183`](https://github.com/primer/react/commit/a86c183f5ea7add7584f895cff3027a7db35675e) Thanks [@HiroAgustin](https://github.com/HiroAgustin)! - Remove ConfirmationDialog custom renders to ensure visual parity with Dialog
 
+- [#7438](https://github.com/primer/react/pull/7438) [`160c1c4`](https://github.com/primer/react/commit/160c1c4cf1c5111dd46b68471d49733f47f524cc) Thanks [@francinelucca](https://github.com/francinelucca)! - feat: make Spinner's delay customizable
+
 - [#7436](https://github.com/primer/react/pull/7436) [`9a4e46c`](https://github.com/primer/react/commit/9a4e46cf902a5c2e046ca7771211536ae0bd08ed) Thanks [@TylerJDev](https://github.com/TylerJDev)! - FilteredActionList: Adds new prop `scrollBehavior` to allow customization of scroll behavior
 
+- [#7448](https://github.com/primer/react/pull/7448) [`838859d`](https://github.com/primer/react/commit/838859d8ee2afc2afca71a28114020a14a68b297) Thanks [@francinelucca](https://github.com/francinelucca)! - feat(SkeletonBox): add customizable delay
+
 ### Patch Changes
 
 - [#7427](https://github.com/primer/react/pull/7427) [`4bb6620`](https://github.com/primer/react/commit/4bb66203f0e6cd5d717b27d591ec5df169c1ad1a) Thanks [@barmo](https://github.com/barmo)! - Change actionlist item inline description styling from flex to block to fix overflow

packages/react/CHANGELOG.md

@@ -16,6 +16,12 @@
   ],
   "importPath": "@primer/react",
   "props": [
+    {
+      "name": "delay",
+      "type": "'short' | 'long' | number",
+      "description": "Controls whether and how long to delay rendering the SkeletonBox. Set to 'short' to delay by 300ms, 'long' to delay by 1000ms, or provide a custom number of milliseconds.",
+      "defaultValue": "false"
+    },
     {
       "name": "width",
       "type": "string",
@@ -35,4 +41,4 @@
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/Skeleton/SkeletonBox.docs.json

@@ -10,3 +10,5 @@ export default {
 export const CustomHeight = () => <SkeletonBox height="4rem" />
 
 export const CustomWidth = () => <SkeletonBox width="300px" />
+
+export const WithDelay = () => <SkeletonBox delay="long" />

packages/react/src/Skeleton/SkeletonBox.features.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import {type CSSProperties, type HTMLProps} from 'react'
 import {clsx} from 'clsx'
 import classes from './SkeletonBox.module.css'
@@ -10,12 +10,33 @@ export type SkeletonBoxProps = {
   width?: CSSProperties['width']
   /** The className of the skeleton box */
   className?: string
+  /** Controls whether and how long to delay rendering the SkeletonBox. Set to 'short' to delay by 300ms, 'long' to delay by 1000ms, or provide a custom number of milliseconds.*/
+  delay?: 'short' | 'long' | number
 } & HTMLProps<HTMLElement>
 
 export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(function SkeletonBox(
-  {height, width, className, style, ...props},
+  {height, width, className, style, delay, ...props},
   ref,
 ) {
+  const [isVisible, setIsVisible] = useState(!delay)
+
+  useEffect(() => {
+    if (delay) {
+      const timeoutId = setTimeout(
+        () => {
+          setIsVisible(true)
+        },
+        typeof delay === 'number' ? delay : delay === 'short' ? 300 : 1000,
+      )
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [delay])
+
+  if (!isVisible) {
+    return null
+  }
+
   return (
     <div
       ref={ref as React.RefObject<HTMLDivElement>}

packages/react/src/Skeleton/SkeletonBox.tsx

@@ -1,8 +1,9 @@
 import {render} from '@testing-library/react'
-import {describe, expect, it} from 'vitest'
+import {beforeEach, afterEach, describe, expect, it, vi} from 'vitest'
 import {SkeletonBox} from '../SkeletonBox'
 import classes from '../SkeletonBox.module.css'
 import {implementsClassName} from '../../utils/testing'
+import {act} from 'react'
 
 describe('SkeletonBox', () => {
   implementsClassName(SkeletonBox, classes.SkeletonBox)
@@ -12,4 +13,138 @@ describe('SkeletonBox', () => {
     expect(container.firstChild).toHaveStyle('height: 100px')
     expect(container.firstChild).toHaveStyle('width: 200px')
   })
+
+  describe('delay behavior', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.restoreAllMocks()
+      vi.useRealTimers()
+    })
+
+    it('should render immediately when no delay is provided', () => {
+      const {container} = render(<SkeletonBox />)
+      expect(container.querySelector('div')).toBeInTheDocument()
+    })
+
+    it('should not render immediately when delay is "short"', () => {
+      const {container} = render(<SkeletonBox delay="short" />)
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+    })
+
+    it('should render after 300ms when delay is "short"', () => {
+      const {container} = render(<SkeletonBox delay="short" />)
+
+      // Not visible initially
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+
+      // Advance timers by less than 300ms
+      act(() => {
+        vi.advanceTimersByTime(250)
+      })
+
+      // Still not visible
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+
+      // Advance timers to complete the short delay (300ms)
+      act(() => {
+        vi.advanceTimersByTime(50)
+      })
+
+      // Now it should be visible
+      expect(container.querySelector('div')).toBeInTheDocument()
+    })
+
+    it('should not render immediately when delay is "long"', () => {
+      const {container} = render(<SkeletonBox delay="long" />)
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+    })
+
+    it('should render after 1000ms when delay is "long"', () => {
+      const {container} = render(<SkeletonBox delay="long" />)
+
+      // Not visible initially
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+
+      // Advance timers by less than 1000ms
+      act(() => {
+        vi.advanceTimersByTime(800)
+      })
+
+      // Still not visible
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+
+      // Advance timers to complete the long delay (1000ms)
+      act(() => {
+        vi.advanceTimersByTime(200)
+      })
+
+      // Now it should be visible
+      expect(container.querySelector('div')).toBeInTheDocument()
+    })
+
+    it('should cleanup timeout on unmount when delay is "short"', () => {
+      const {unmount} = render(<SkeletonBox delay="short" />)
+
+      // Unmount before the delay completes
+      unmount()
+
+      // Advance timers to see if there are any side effects
+      vi.advanceTimersByTime(300)
+
+      // No errors should occur
+      expect(true).toBe(true)
+    })
+
+    it('should cleanup timeout on unmount when delay is "long"', () => {
+      const {unmount} = render(<SkeletonBox delay="long" />)
+
+      // Unmount before the delay completes
+      unmount()
+
+      // Advance timers to see if there are any side effects
+      vi.advanceTimersByTime(1000)
+
+      // No errors should occur
+      expect(true).toBe(true)
+    })
+
+    it('should render after custom delay when delay is a number', () => {
+      const {container} = render(<SkeletonBox delay={500} />)
+
+      // Not visible initially
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+
+      // Advance timers by less than the custom delay (500ms)
+      act(() => {
+        vi.advanceTimersByTime(400)
+      })
+
+      // Still not visible
+      expect(container.querySelector('div')).not.toBeInTheDocument()
+
+      // Advance timers to complete the custom delay
+      act(() => {
+        vi.advanceTimersByTime(100)
+      })
+
+      // Now it should be visible
+      expect(container.querySelector('div')).toBeInTheDocument()
+    })
+
+    it('should cleanup timeout on unmount when delay is a number', () => {
+      const {unmount} = render(<SkeletonBox delay={500} />)
+
+      // Unmount before the delay completes
+      unmount()
+
+      // Advance timers to see if there are any side effects
+      vi.advanceTimersByTime(500)
+
+      // No errors should occur
+      expect(true).toBe(true)
+    })
+  })
 })

packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx

@@ -33,9 +33,9 @@
     },
     {
       "defaultValue": "false",
-      "description": "Whether to delay the spinner before rendering by the defined 1000ms.",
+      "description": "Controls whether and how long to delay rendering the spinner. Set to `true` to delay by 1000ms, `'short'` to delay by 300ms, `'long'` to delay by 1000ms, or provide a custom number of milliseconds.",
       "name": "delay",
-      "type": "boolean"
+      "type": "boolean | 'short' | 'long' | number"
     }
   ],
   "status": "alpha",

packages/react/src/Spinner/Spinner.docs.json

@@ -20,4 +20,4 @@ export const SuppressScreenReaderText = () => (
   </Stack>
 )
 
-export const WithDelay = () => <Spinner delay />
+export const WithDelay = () => <Spinner delay="long" />