diff --git a/.changeset/selfish-papayas-smoke.md b/.changeset/selfish-papayas-smoke.md new file mode 100644 index 00000000000..aefecc7ceee --- /dev/null +++ b/.changeset/selfish-papayas-smoke.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(SelectPanel): add loading state to stories diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index 0985e40e563..d237e3670c8 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/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 = { const [open, setOpen] = useState(false) const filterTimerId = useRef(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 = { 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 = { height={height} initialLoadingType={initialLoadingType} width="medium" + loading={loading} message={filteredItems.length === 0 ? NoResultsMessage(query) : undefined} /> ) @@ -679,20 +691,28 @@ export const CustomisedNoResults: StoryObj = { const [open, setOpen] = useState(false) const filterTimerId = useRef(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 (