SelectPanel: Empty State - Explore SelectPanel.Message API and managing visibility of the component under the hood

.changeset/selfish-garlics-approve.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+[SelectPanel] Implement loading states

packages/react/package.json

@@ -89,7 +89,7 @@
     "@primer/behaviors": "^1.7.2",
     "@primer/live-region-element": "^0.7.0",
     "@primer/octicons-react": "^19.9.0",
-    "@primer/primitives": "^9.0.3",
+    "@primer/primitives": "^9.1.2",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",

packages/react/src/Box/Box.tsx

@@ -16,7 +16,7 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 
-type StyledBoxProps = SpaceProps &
+export type StyledBoxProps = SpaceProps &
   ColorProps &
   TypographyProps &
   LayoutProps &

packages/react/src/FilteredActionList/FilteredActionListEntry.tsx

@@ -6,7 +6,6 @@ import {useFeatureFlag} from '../FeatureFlags'
 
 export function FilteredActionList(props: FilteredActionListProps): JSX.Element {
   const enabled = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
-
   if (enabled) return <WithStableActionList {...props} />
   else return <WithDeprecatedActionList {...props} />
 }

packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import Box from '../Box'
+import Spinner from '../Spinner'
+import {Stack} from '../Stack/Stack'
+import {SkeletonBox} from '../experimental/Skeleton/SkeletonBox'
+
+export class FilteredActionListLoadingType {
+  public name: string
+  public appearsInBody: boolean
+
+  constructor(name: string, appearsInBody: boolean) {
+    this.name = name
+    this.appearsInBody = appearsInBody
+  }
+}
+
+export const FilteredActionListLoadingTypes = {
+  bodySpinner: new FilteredActionListLoadingType('body-spinner', true),
+  bodySkeleton: new FilteredActionListLoadingType('body-skeleton', true),
+  input: new FilteredActionListLoadingType('input', false),
+}
+
+export function FilteredActionListBodyLoader({loadingType}: {loadingType: FilteredActionListLoadingType}): JSX.Element {
+  switch (loadingType) {
+    case FilteredActionListLoadingTypes.bodySpinner:
+      return <LoadingSpinner data-testid="filtered-action-list-spinner" />
+    case FilteredActionListLoadingTypes.bodySkeleton:
+      return <LoadingSkeleton data-testid="filtered-action-list-skeleton" rows={10} />
+    default:
+      return <></>
+  }
+}
+
+function LoadingSpinner({...props}): JSX.Element {
+  return (
+    <Box p={3}>
+      <Stack direction="horizontal" justify="center">
+        <Spinner {...props} />
+      </Stack>
+    </Box>
+  )
+}
+
+function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
+  return (
+    <Box p={2}>
+      <Stack 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}%`} borderRadius={2} />
+          </Stack>
+        ))}
+      </Stack>
+    </Box>
+  )
+}

packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.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'
@@ -17,6 +16,11 @@ import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
 import {VisuallyHidden} from '../internal/components/VisuallyHidden'
 import type {SxProp} from '../sx'
+import {
+  type FilteredActionListLoadingType,
+  FilteredActionListBodyLoader,
+  FilteredActionListLoadingTypes,
+} from './FilteredActionListLoaders'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -25,9 +29,10 @@ export interface FilteredActionListProps
     ListPropsBase,
     SxProp {
   loading?: boolean
+  loadingType?: FilteredActionListLoadingType
   placeholderText?: string
   filterValue?: string
-  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
+  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
 }
@@ -39,6 +44,7 @@ const StyledHeader = styled.div`
 
 export function FilteredActionList({
   loading = false,
+  loadingType = FilteredActionListLoadingTypes.bodySpinner,
   placeholderText,
   filterValue: externalFilterValue,
   onFilterChange,
@@ -124,15 +130,15 @@ export function FilteredActionList({
           aria-label={placeholderText}
           aria-controls={listId}
           aria-describedby={inputDescriptionTextId}
+          loaderPosition={'leading'}
+          loading={loading && !loadingType.appearsInBody}
           {...textInputProps}
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
       <Box ref={scrollContainerRef} overflow="auto">
-        {loading ? (
-          <Box width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
-            <Spinner />
-          </Box>
+        {loading && loadingType.appearsInBody ? (
+          <FilteredActionListBodyLoader loadingType={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'
@@ -17,6 +16,8 @@ import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
 import {VisuallyHidden} from '../internal/components/VisuallyHidden'
 import type {SxProp} from '../sx'
+import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
+import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
 
 import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
@@ -28,6 +29,7 @@ export interface FilteredActionListProps
     ListPropsBase,
     SxProp {
   loading?: boolean
+  loadingType?: FilteredActionListLoadingType
   placeholderText?: string
   filterValue?: string
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
@@ -42,6 +44,7 @@ const StyledHeader = styled.div`
 
 export function FilteredActionList({
   loading = false,
+  loadingType = FilteredActionListLoadingTypes.bodySpinner,
   placeholderText,
   filterValue: externalFilterValue,
   onFilterChange,
@@ -51,6 +54,7 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
+  message,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -141,15 +145,15 @@ export function FilteredActionList({
           aria-label={placeholderText}
           aria-controls={listId}
           aria-describedby={inputDescriptionTextId}
+          loaderPosition={'leading'}
+          loading={loading && !loadingType.appearsInBody}
           {...textInputProps}
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
-      <Box ref={scrollContainerRef} overflow="auto">
-        {loading ? (
-          <Box width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
-            <Spinner />
-          </Box>
+      <Box ref={scrollContainerRef} sx={{overflow: 'auto', height: '100%'}}>
+        {loading && loadingType.appearsInBody ? (
+          <FilteredActionListBodyLoader loadingType={loadingType} />
         ) : (
           <ActionList ref={listContainerRef} showDividers={showItemDividers} {...listProps} role="listbox" id={listId}>
             {groupMetadata?.length
@@ -170,6 +174,7 @@ export function FilteredActionList({
                 })}
           </ActionList>
         )}
+        {message}
       </Box>
     </Box>
   )

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

@@ -1,5 +1,5 @@
 import React, {useState, useRef, useMemo} from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta, StoryObj} from '@storybook/react'
 import Box from '../Box'
 import {Button} from '../Button'
 import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List'
@@ -14,6 +14,8 @@ import {
   TypographyIcon,
   VersionsIcon,
 } from '@primer/octicons-react'
+import useSafeTimeout from '../hooks/useSafeTimeout'
+import Link from '../Link'
 
 const meta = {
   title: 'Components/SelectPanel/Features',
@@ -369,3 +371,123 @@ export const WithGroups = () => {
     />
   )
 }
+
+export const AsyncFetch: StoryObj<typeof SelectPanel> = {
+  render: ({initialLoadingType}) => {
+    const [selected, setSelected] = React.useState<ItemInput[]>([])
+    const [filteredItems, setFilteredItems] = React.useState<ItemInput[]>([])
+    const [open, setOpen] = useState(false)
+    const filterTimerId = useRef<number | null>(null)
+    const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
+    const onFilterChange = (value: string) => {
+      if (filterTimerId.current) {
+        safeClearTimeout(filterTimerId.current)
+      }
+
+      filterTimerId.current = safeSetTimeout(() => {
+        setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(value.toLowerCase())))
+      }, 2000) as unknown as number
+    }
+
+    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={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={onFilterChange}
+        showItemDividers={true}
+        initialLoadingType={initialLoadingType}
+      />
+    )
+  },
+  argTypes: {
+    initialLoadingType: {
+      control: 'select',
+      options: ['spinner', 'skeleton'],
+      defaultValue: 'spinner',
+    },
+  },
+}
+
+export const NoItems = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([])
+  const [filteredItems, setFilteredItems] = React.useState<ItemInput[]>([])
+  const [open, setOpen] = useState(true)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const onFilterChange = (value: string = '') => {
+    setTimeout(() => {
+      // fetch the items
+      setFilteredItems([])
+    }, 0)
+  }
+  return (
+    <SelectPanel
+      title="Set projects"
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          {children ?? 'Select Labels'}
+        </Button>
+      )}
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onFilterChange={onFilterChange}
+      overlayProps={{width: 'medium', height: 'large'}}
+    >
+      <SelectPanel.Message variant="noitems" title="You haven't created any projects yet">
+        <Link href="https://github.com/projects">Start your first project </Link> to organise your issues.
+      </SelectPanel.Message>
+      <SelectPanel.Message variant="nomatches" title={`No language found for `}>
+        Adjust your search term to find other languages
+      </SelectPanel.Message>
+    </SelectPanel>
+  )
+}
+export const NoMatches = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([])
+  const [filter, setFilter] = React.useState<string>('')
+  const [open, setOpen] = useState(true)
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  return (
+    <SelectPanel
+      title="Set projects"
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          {children ?? 'Select Labels'}
+        </Button>
+      )}
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onFilterChange={setFilter}
+      overlayProps={{width: 'medium', height: 'small'}}
+    >
+      <SelectPanel.Message variant="noitems" title="You haven't created any projects yet">
+        <Link href="https://github.com/projects">Start your first project </Link> to organise your issues.
+      </SelectPanel.Message>
+      <SelectPanel.Message variant="nomatches" title={`No language found for ${filter}`}>
+        Adjust your search term to find other languages
+      </SelectPanel.Message>
+    </SelectPanel>
+  )
+}