diff --git a/.changeset/four-penguins-dance.md b/.changeset/four-penguins-dance.md new file mode 100644 index 00000000000..36d6b246766 --- /dev/null +++ b/.changeset/four-penguins-dance.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(SelectPanel): prioritize message over loading status diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx index f50bc57d4dd..b338657a1ac 100644 --- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx @@ -149,7 +149,7 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => { placeholder="Select labels" // button text when no items are selected open={open} onOpenChange={onOpenChange} - loading={filteredItems.length === 0 && !filter} + loading={fetchedItems.length === 0} items={filteredItems} selected={selected} onSelectedChange={setSelected} diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index 23b144733dd..70039771288 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx @@ -679,14 +679,17 @@ export const CustomisedNoResults: StoryObj = { const [open, setOpen] = useState(false) const filterTimerId = useRef(null) const {safeSetTimeout, safeClearTimeout} = useSafeTimeout() + const [loading, setLoading] = useState(false) const onFilterChange = (value: string) => { setFilterValue(value) if (filterTimerId.current) { safeClearTimeout(filterTimerId.current) } + setLoading(true) filterTimerId.current = safeSetTimeout(() => { setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(value.toLowerCase()))) + setLoading(false) }, 2000) as unknown as number } @@ -713,6 +716,7 @@ export const CustomisedNoResults: StoryObj = { onFilterChange={onFilterChange} showItemDividers={true} initialLoadingType={initialLoadingType} + loading={loading} height={height} overlayProps={{maxHeight: height === 'auto' || height === 'initial' ? 'xlarge' : height}} message={filteredItems.length === 0 ? NoResultsMessage(filterValue) : undefined} diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index bcab1af1952..48cf750ad22 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -790,7 +790,7 @@ function Panel({ selectionVariant={isSingleSelectModal ? 'radio' : isMultiSelectVariant(selected) ? 'multiple' : 'single'} items={itemsToRender} textInputProps={extendedTextInputProps} - loading={loading || isLoading} + loading={loading || (isLoading && !message)} loadingType={loadingType()} // hack because the deprecated ActionList does not support this prop {...{