SelectPanel: Introduce loadingType prop to specify initial loading style

.changeset/many-moons-wave.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Introduce `loadingType` prop with `spinner` and `skeleton` options to specify initial loading style

packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx

@@ -4,7 +4,8 @@ import type {KeyboardEventHandler} from 'react'
 import React, {useCallback, useEffect, useRef} from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
-import Spinner from '../Spinner'
+import {Loading} from '../FilteredActionList/Loaders'
+import type {LoadingTypes} from '../FilteredActionList/Loaders'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {get} from '../constants'
@@ -25,6 +26,7 @@ export interface FilteredActionListProps
     ListPropsBase,
     SxProp {
   loading?: boolean
+  loadingType?: LoadingTypes
   placeholderText?: string
   filterValue?: string
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
@@ -46,6 +48,7 @@ export function FilteredActionList({
   textInputProps,
   inputRef: providedInputRef,
   sx,
+  loadingType,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -128,11 +131,19 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
-      <Box ref={scrollContainerRef} overflow="auto">
+      <Box
+        ref={scrollContainerRef}
+        sx={{
+          overflow: 'auto',
+          // To be able to align the spinner centrally
+          '&:has([data-attribute="data-loading"])': {
+            height: '100%',
+            alignContent: 'center',
+          },
+        }}
+      >
         {loading ? (
-          <Box width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
-            <Spinner />
-          </Box>
+          <Loading data-attribute="data-loading" type={loadingType} />
         ) : (
           <ActionList ref={listContainerRef} items={items} {...listProps} role="listbox" id={listId} />
         )}

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -4,7 +4,6 @@ import type {KeyboardEventHandler} from 'react'
 import React, {useCallback, useEffect, useRef} from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
-import Spinner from '../Spinner'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {get} from '../constants'
@@ -22,13 +21,17 @@ import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
 import {useAnnouncements} from './useAnnouncements'
 
+import {Loading} from '../FilteredActionList/Loaders'
+import type {LoadingTypes} from '../FilteredActionList/Loaders'
+
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
 export interface FilteredActionListProps
   extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
     ListPropsBase,
     SxProp {
   loading?: boolean
+  loadingType?: LoadingTypes
   placeholderText?: string
   filterValue?: string
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
@@ -52,6 +55,7 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
+  loadingType,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -150,11 +154,19 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
-      <Box ref={scrollContainerRef} overflow="auto">
+      <Box
+        ref={scrollContainerRef}
+        sx={{
+          overflow: 'auto',
+          // To be able to align the spinner centrally
+          '&:has([data-attribute="data-loading"])': {
+            height: '100%',
+            alignContent: 'center',
+          },
+        }}
+      >
         {loading ? (
-          <Box width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
-            <Spinner />
-          </Box>
+          <Loading data-attribute="data-loading" type={loadingType} />
         ) : (
           <ActionList ref={listContainerRef} showDividers={showItemDividers} {...listProps} role="listbox" id={listId}>
             {groupMetadata?.length

packages/react/src/FilteredActionList/Loaders.tsx

@@ -0,0 +1,41 @@
+import React, {useId} from 'react'
+import Box from '../Box'
+import Spinner from '../Spinner'
+import {Stack} from '../Stack/Stack'
+import {SkeletonBox} from '../experimental/Skeleton/SkeletonBox'
+
+export type LoadingTypes = 'spinner' | 'skeleton'
+
+export const Loading = ({type = 'spinner', ...props}: {type?: LoadingTypes}) => {
+  if (type === 'spinner') {
+    return <LoadingSpinner {...props} />
+  } else {
+    return <LoadingSkeleton {...props} />
+  }
+}
+
+function LoadingSpinner({...props}): JSX.Element {
+  return (
+    <Box
+      sx={{display: 'flex', alignContent: 'center', justifyContent: 'center', width: '100%', padding: '40px 16px 48px'}}
+    >
+      <Spinner {...props} />
+    </Box>
+  )
+}
+
+function LoadingSkeleton({rows = 10, ...props}: {rows?: number}): JSX.Element {
+  const id = useId()
+  return (
+    <Box p={2} display="flex" flexGrow={1} flexDirection="column">
+      <Stack id={id} direction="vertical" justify="center" gap="condensed" {...props}>
+        {Array.from({length: rows}, (_, i) => (
+          <Stack key={i} direction="horizontal" gap="condensed" align="center">
+            <SkeletonBox width="16px" height="16px" />
+            <SkeletonBox height="10px" width={`${Math.random() * 60 + 20}%`} sx={{borderRadius: '4px'}} />
+          </Stack>
+        ))}
+      </Stack>
+    </Box>
+  )
+}

packages/react/src/SelectPanel/SelectPanel.docs.json

@@ -73,6 +73,17 @@
       "type": "string | React.ReactElement",
       "defaultValue": "null",
       "description": "Footer rendered at the end of the panel"
+    },
+    {
+      "name": "loading",
+      "type": "boolean",
+      "description": "When true, the loading state is displayed"
+    },
+    {
+      "name": "loadingType",
+      "type": " 'spinner' | 'skeleton'",
+      "defaultValue": "spinner",
+      "description": "The type of loading state to render when retrieving initial data"
     }
   ],
   "subcomponents": []

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

@@ -369,3 +369,104 @@ export const WithGroups = () => {
     />
   )
 }
+
+export const AsyncFetchLoadingExternallyManaged = () => {
+  const [loading, setLoading] = React.useState<boolean>(true)
+  const [selected, setSelected] = React.useState<ItemInput[]>([])
+  const [filter, setFilter] = React.useState('')
+  const [fetchedItems, setFetchedItems] = React.useState<ItemInput[]>([])
+  const [open, setOpen] = useState(false)
+
+  const filteredItems = React.useMemo(
+    () =>
+      fetchedItems.filter(fetchedItem => {
+        if (!fetchedItem.text) return false
+        return fetchedItem.text.toLowerCase().startsWith(filter.toLowerCase())
+      }),
+    [fetchedItems, filter],
+  )
+
+  const onOpenChange = () => {
+    setLoading(true)
+    setOpen(!open)
+    setTimeout(() => {
+      setFetchedItems(items)
+      setLoading(false)
+    }, 1500)
+  }
+  return (
+    <SelectPanel
+      title="Select labels"
+      subtitle="Use labels to organize issues and pull requests"
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <Button
+          trailingAction={TriangleDownIcon}
+          aria-labelledby={` ${ariaLabelledBy}`}
+          {...anchorProps}
+          aria-haspopup="dialog"
+        >
+          {children ?? 'Select Labels'}
+        </Button>
+      )}
+      placeholderText="Filter labels"
+      open={open}
+      onOpenChange={onOpenChange}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onFilterChange={setFilter}
+      loading={loading}
+    />
+  )
+}
+
+export const SkeletonTypeLoading = () => {
+  const [loading, setLoading] = React.useState<boolean>(true)
+  const [selected, setSelected] = React.useState<ItemInput[]>([])
+  const [filter, setFilter] = React.useState('')
+  const [fetchedItems, setFetchedItems] = React.useState<ItemInput[]>([])
+  const [open, setOpen] = useState(false)
+
+  const filteredItems = React.useMemo(
+    () =>
+      fetchedItems.filter(fetchedItem => {
+        if (!fetchedItem.text) return false
+        return fetchedItem.text.toLowerCase().startsWith(filter.toLowerCase())
+      }),
+    [fetchedItems, filter],
+  )
+
+  const onOpenChange = () => {
+    setLoading(true)
+    setOpen(!open)
+    setTimeout(() => {
+      setFetchedItems(items)
+      setLoading(false)
+    }, 1500)
+  }
+  return (
+    <SelectPanel
+      title="Select labels"
+      subtitle="Use labels to organize issues and pull requests"
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <Button
+          trailingAction={TriangleDownIcon}
+          aria-labelledby={` ${ariaLabelledBy}`}
+          {...anchorProps}
+          aria-haspopup="dialog"
+        >
+          {children ?? 'Select Labels'}
+        </Button>
+      )}
+      placeholderText="Filter labels"
+      open={open}
+      onOpenChange={onOpenChange}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onFilterChange={setFilter}
+      loading={loading}
+      loadingType="skeleton"
+    />
+  )
+}

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -47,6 +47,7 @@ interface SelectPanelBaseProps {
 
 export type SelectPanelProps = SelectPanelBaseProps &
   Omit<FilteredActionListProps, 'selectionVariant'> &
+  Pick<FilteredActionListProps, 'loading' | 'loadingType'> &
   Pick<AnchoredOverlayProps, 'open'> &
   AnchoredOverlayWrapperAnchorProps &
   (SelectPanelSingleSelection | SelectPanelMultiSelection)

packages/react/src/experimental/Skeleton/SkeletonBox.tsx

@@ -30,7 +30,7 @@ const StyledSkeletonBox = toggleStyledComponent(
   styled.div<SkeletonBoxProps>`
     animation: ${shimmer};
     display: block;
-    background-color: var(--bgColor-muted, ${get('colors.canvas.subtle')});
+    background-color: var(--skeletonLoader-bgColor, ${get('colors.canvas.subtle')});
     border-radius: 3px;
     height: ${props => props.height || '1rem'};
     width: ${props => props.width};