SuspendedByGroup() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js lines 360–454

function SuspendedByGroup({
  bridge,
  element,
  inspectedElement,
  store,
  name,
  environment,
  suspendedBy,
  minTime,
  maxTime,
}: GroupProps) {
  const [isOpen, setIsOpen] = useState(false);
  let start = Infinity;
  let end = -Infinity;
  let isRejected = false;
  for (let i = 0; i < suspendedBy.length; i++) {
    const asyncInfo: SerializedAsyncInfo = suspendedBy[i].value;
    const ioInfo = asyncInfo.awaited;
    if (ioInfo.start < start) {
      start = ioInfo.start;
    }
    if (ioInfo.end > end) {
      end = ioInfo.end;
    }
    const value: any = ioInfo.value;
    if (
      value !== null &&
      typeof value === 'object' &&
      value[meta.name] === 'rejected Thenable'
    ) {
      isRejected = true;
    }
  }
  const timeScale = 100 / (maxTime - minTime);
  let left = (start - minTime) * timeScale;
  let width = (end - start) * timeScale;
  if (width < 5) {
    // Use at least a 5% width to avoid showing too small indicators.
    width = 5;
    if (left > 95) {
      left = 95;
    }
  }
  const pluralizedName = pluralize(name);
  return (
    <div className={styles.CollapsableRow}>
      <Button
        className={styles.CollapsableHeader}
        onClick={() => {
          setIsOpen(prevIsOpen => !prevIsOpen);
        }}
        title={pluralizedName}>
        <ButtonIcon
          className={styles.CollapsableHeaderIcon}
          type={isOpen ? 'expanded' : 'collapsed'}
        />
        <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span>
        <div className={styles.CollapsableHeaderFiller} />
        {isOpen ? null : (
          <div
            className={
              styles.TimeBarContainer +
              ' ' +
              getClassNameForEnvironment(environment)
            }>
            <div
              className={
                !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored
              }
              style={{
                left: left.toFixed(2) + '%',
                width: width.toFixed(2) + '%',
              }}
            />
          </div>
        )}
      </Button>
      {isOpen &&
        suspendedBy.map(({value, index}) => (
          <SuspendedByRow
            key={index}