InspectedElementSuspendedBy() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js lines 456–626

export default function InspectedElementSuspendedBy({
  bridge,
  element,
  inspectedElement,
  store,
}: Props): React.Node {
  const {suspendedBy, suspendedByRange} = inspectedElement;

  // Skip the section if nothing suspended this component.
  if (
    (suspendedBy == null || suspendedBy.length === 0) &&
    inspectedElement.unknownSuspenders === UNKNOWN_SUSPENDERS_NONE
  ) {
    if (inspectedElement.isSuspended) {
      // If we're still suspended, show a place holder until the data loads.
      // We don't know what we're suspended by until it has loaded.
      return (
        <div>
          <div className={styles.HeaderRow}>
            <div className={styles.Header}>suspended...</div>
          </div>
        </div>
      );
    }
    return null;
  }

  const handleCopy = withPermissionsCheck(
    {permissions: ['clipboardWrite']},
    () => copy(serializeDataForCopy(suspendedBy)),
  );

  let minTime = Infinity;
  let maxTime = -Infinity;
  if (suspendedByRange !== null) {
    // The range of the whole suspense boundary.
    minTime = suspendedByRange[0];
    maxTime = suspendedByRange[1];
  }
  for (let i = 0; i < suspendedBy.length; i++) {
    const asyncInfo: SerializedAsyncInfo = suspendedBy[i];
    if (asyncInfo.awaited.start < minTime) {
      minTime = asyncInfo.awaited.start;
    }
    if (asyncInfo.awaited.end > maxTime) {
      maxTime = asyncInfo.awaited.end;
    }
  }

  if (maxTime - minTime < 25) {
    // Stretch the time span a bit to ensure that we don't show
    // large bars that represent very small timespans.
    minTime = maxTime - 25;
  }

  const sortedSuspendedBy =
    suspendedBy === null ? [] : suspendedBy.map(withIndex);
  sortedSuspendedBy.sort(compareTime);

  // Organize into groups of consecutive entries with the same name.
  const groups = [];
  let currentGroup = null;
  let currentGroupName = null;
  let currentGroupEnv = null;
  for (let i = 0; i < sortedSuspendedBy.length; i++) {
    const entry = sortedSuspendedBy[i];
    const name = entry.value.awaited.name;
    const env = entry.value.awaited.env;
    if (
      currentGroupName !== name ||
      currentGroupEnv !== env ||
      !name ||
      name === 'Promise' ||
      currentGroup === null
    ) {
      // Create a new group.
      currentGroupName = name;
      currentGroupEnv = env;
      currentGroup = [];
      groups.push(currentGroup);
    }