[DevTools] Dedicated empty state for roots that aren't suspended by anything

[everettbu]

Mirror of facebook/react#35769
Original author: eps1lon

---

Summary

Stacked on react/react#35768

For roots without any suspenders, the inspected element pane is completely empty. For older versions of React without Suspense, older versions of React with less sources for Suspense, or simple UIs that don't have any suspenders this can look like something isn't working. You're mostly inspecting the root in the Suspense tab so we need something to show.

How did you test this change?

• Fallback shown in https://new.csb.app
  

[greptile-apps]

Greptile Overview

Greptile Summary

added dedicated empty state message "Nothing suspended the initial paint" for root elements that have no suspenders in the DevTools Suspense tab

Key changes:

• imported ElementTypeRoot type to check if inspected element is a root
• added conditional return (lines 485-495) to display empty state UI for root elements when suspendedBy is empty/null and element is not actively suspended

Purpose:
prevents confusing blank pane for roots without suspenders (common in older React versions, simpler UIs, or versions with fewer Suspense sources)

Note from previous review thread:
the issue mentioned about potential null access at line 510 when suspendedBy is null/empty for non-root, non-suspended elements remains unaddressed by this change - this PR only adds the root element case

Confidence Score: 2/5

• unsafe to merge - introduces null pointer exception for non-root elements
• the PR improves UX by showing empty state for root elements, but removes the return null fallback that was handling non-root elements with no suspenders, creating a crash when suspendedBy.length is accessed on null at line 510
• packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js needs a return null added after the root element check

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js	adds dedicated empty state for root elements with no suspenders - improves UX but doesn't fully address null safety issue

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

when suspendedBy is null/empty, not suspended, and not a root element, the function continues without returning, then tries to access suspendedBy.length at line 510

Suggested change

	// For roots, show an empty state since there's nothing else to show for
	// these elements.
	// This can happen for older versions of React without Suspense, older versions
	// of React with less sources for Suspense, or simple UIs that don't have any suspenders.
	if (inspectedElement.type === ElementTypeRoot) {
	return (
	<div>
	<div className={styles.HeaderRow}>
	<div className={`${styles.Header} ${styles.Empty}`}>
	Nothing suspended the initial paint.
	</div>
	</div>
	</div>
	);
	}
	}
	// For roots, show an empty state since there's nothing else to show for
	// these elements.
	// This can happen for older versions of React without Suspense, older versions
	// of React with less sources for Suspense, or simple UIs that don't have any suspenders.
	if (inspectedElement.type === ElementTypeRoot) {
	return (
	<div>
	<div className={styles.HeaderRow}>
	<div className={`${styles.Header} ${styles.Empty}`}>
	Nothing suspended the initial paint.
	</div>
	</div>
	</div>
	);
	}
	return null;

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
Line: 481:496

Comment:
when `suspendedBy` is null/empty, not suspended, and not a root element, the function continues without returning, then tries to access `suspendedBy.length` at line 510

```suggestion
    // For roots, show an empty state since there's nothing else to show for
    // these elements.
    // This can happen for older versions of React without Suspense, older versions
    // of React with less sources for Suspense, or simple UIs that don't have any suspenders.
    if (inspectedElement.type === ElementTypeRoot) {
      return (
        <div>
          <div className={styles.HeaderRow}>
            <div className={`${styles.Header} ${styles.Empty}`}>
              Nothing suspended the initial paint.
            </div>
          </div>
        </div>
      );
    }
    return null;
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

missing return null for non-root elements - when suspendedBy is null/empty and element is not suspended and not a root, the code continues to line 510 where suspendedBy.length will throw TypeError

before this PR, line 480 had return null that handled this case

Suggested change

	}
	}
	return null;
	}

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js
Line: 496:496

Comment:
missing `return null` for non-root elements - when `suspendedBy` is null/empty and element is not suspended and not a root, the code continues to line 510 where `suspendedBy.length` will throw `TypeError`

before this PR, line 480 had `return null` that handled this case

```suggestion
    }
    return null;
  }
```

How can I resolve this? If you propose a fix, please make it concise.

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.