Function SkeletonIconItem

packages/dev/s2-docs/src/IconSearchView.tsx:213–258

({item}: {item: {id: string}})

}

export function SkeletonIconItem({item}: {item: {id: string}}) {
  const PlaceholderIcon = Close;
  const ref = useRef(null);

  const itemStyle = style({
    ...focusRing(),
    size: 'full',
    backgroundColor: {
      default: 'gray-50',
      isHovered: 'gray-100',
      isFocused: 'gray-100',
      isSelected: 'neutral'
    },
    '--iconPrimary': {
      type: 'color',
      value: {
        default: 'neutral',
        isSelected: 'gray-25'
      }
    },
    font: 'ui-sm',
    borderRadius: 'default',
    transition: 'default',
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
    alignItems: 'center',
    justifyContent: 'center',
    paddingX: 4
  });

  return (
    <ListBoxItem id={item.id} value={item} textValue="skeleton" className={itemStyle} ref={ref}>
      <PlaceholderIcon styles={iconStyle({size: 'XL'})} />
      <div
        className={style({
          maxWidth: '100%',
          textOverflow: 'ellipsis',
          overflow: 'hidden',
          whiteSpace: 'nowrap'
        })}>
        <Text styles={style({font: 'ui-sm'})}>Name</Text>
      </div>
    </ListBoxItem>
  );
}

export function IconSearchSkeleton() {
  const mockItems = useMemo(() => Array.from({length: 140}, (_, i) => ({id: `skeleton-${i}`})), []);