diff --git a/.changeset/thin-badgers-struggle.md b/.changeset/thin-badgers-struggle.md new file mode 100644 index 00000000000..4d88dc1a64d --- /dev/null +++ b/.changeset/thin-badgers-struggle.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +SelectPanel announces loading prop changes diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 4543c80111a..5f175aca368 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -397,6 +397,23 @@ function Panel({ } }, [inputRef, open]) + // Manage loading announcements when loadingManagedExternally + useEffect(() => { + if (loadingManagedExternally) { + if (isLoading) { + // Delay the announcement a bit, just in case the loading is quick + loadingDelayTimeoutId.current = safeSetTimeout(() => { + announceLoading() + }, LONG_DELAY_MS) + } else { + // If loading is done, we can clear the loading announcement + if (loadingDelayTimeoutId.current) { + safeClearTimeout(loadingDelayTimeoutId.current) + } + } + } + }, [isLoading, loadingManagedExternally, safeSetTimeout, safeClearTimeout]) + // Populate panel with items on first open useEffect(() => { if (loadingManagedExternally) return