fix(SelectPanel): add loading state to stories (#6374)

Author: francinelucca

.changeset/selfish-papayas-smoke.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SelectPanel): add loading state to stories

packages/react/src/SelectPanel/SelectPanel.features.stories.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useRef} from 'react'
+import React, {useState, useRef, useEffect} from 'react'
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import Box from '../Box'
 import {Button} from '../Button'
@@ -557,6 +557,7 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
     const [open, setOpen] = useState(false)
     const filterTimerId = useRef<number | null>(null)
     const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
+    const [loading, setLoading] = useState(true)
     const [query, setQuery] = useState('')
 
     const fetchItems = (query: string) => {
@@ -565,11 +566,21 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
         setQuery(query)
       }
 
+      setLoading(true)
       filterTimerId.current = safeSetTimeout(() => {
         setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(query.toLowerCase())))
+        setLoading(false)
       }, 2000) as unknown as number
     }
 
+    useEffect(() => {
+      filterTimerId.current = safeSetTimeout(() => {
+        setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(query.toLowerCase())))
+        setLoading(false)
+      }, 2000) as unknown as number
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     const onOpenChange = (value: boolean) => {
       setOpen(value)
       fetchItems('')
@@ -600,6 +611,7 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
         height={height}
         initialLoadingType={initialLoadingType}
         width="medium"
+        loading={loading}
         message={filteredItems.length === 0 ? NoResultsMessage(query) : undefined}
       />
     )
@@ -679,20 +691,28 @@ export const CustomisedNoResults: StoryObj<typeof SelectPanel> = {
     const [open, setOpen] = useState(false)
     const filterTimerId = useRef<number | null>(null)
     const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
-    const [loading, setLoading] = useState(false)
+    const [loading, setLoading] = useState(true)
     const onFilterChange = (value: string) => {
       setFilterValue(value)
       if (filterTimerId.current) {
         safeClearTimeout(filterTimerId.current)
       }
-      setLoading(true)
 
+      setLoading(true)
       filterTimerId.current = safeSetTimeout(() => {
         setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(value.toLowerCase())))
         setLoading(false)
       }, 2000) as unknown as number
     }
 
+    useEffect(() => {
+      filterTimerId.current = safeSetTimeout(() => {
+        setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(filterValue.toLowerCase())))
+        setLoading(false)
+      }, 2000) as unknown as number
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     return (
       <SelectPanel
         title="Select labels"