fix(SelectPanel): prioritize message over loading status (#6321)

Author: francinelucca

.changeset/four-penguins-dance.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SelectPanel): prioritize message over loading status

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}

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

@@ -679,14 +679,17 @@ 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 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<typeof SelectPanel> = {
         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}

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
             {...{