[DevTools] Tweak the presentation of the Promise value

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -490,7 +490,7 @@ export function logComponentAwait(
       if (typeof value === 'object' && value !== null) {
         addObjectToProperties(value, properties, 0, '');
       } else if (value !== undefined) {
-        addValueToProperties('Resolved', value, properties, 0, '');
+        addValueToProperties('awaited value', value, properties, 0, '');
       }
       const tooltipText = getIOLongName(
         asyncInfo.awaited,
@@ -547,7 +547,7 @@ export function logIOInfoErrored(
             String(error.message)
           : // eslint-disable-next-line react-internal/safe-string-coercion
             String(error);
-      const properties = [['Rejected', message]];
+      const properties = [['rejected with', message]];
       const tooltipText =
         getIOLongName(ioInfo, description, ioInfo.env, rootEnv) + ' Rejected';
       debugTask.run(

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css

@@ -97,11 +97,11 @@
 }
 
 .CollapsableContent {
-  padding: 0.25rem 0;
+  margin-top: -0.25rem;
 }
 
 .PreviewContainer {
-  padding: 0 0.25rem 0.25rem 0.25rem;
+  padding: 0.25rem;
 }
 
 .TimeBarContainer {

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js

@@ -107,11 +107,10 @@ function SuspendedByRow({
   }
 
   const value: any = asyncInfo.awaited.value;
-  const isErrored =
-    value !== null &&
-    typeof value === 'object' &&
-    value[meta.name] === 'rejected Thenable';
-
+  const metaName =
+    value !== null && typeof value === 'object' ? value[meta.name] : null;
+  const isFulfilled = metaName === 'fulfilled Thenable';
+  const isRejected = metaName === 'rejected Thenable';
   return (
     <div className={styles.CollapsableRow}>
       <Button
@@ -136,7 +135,7 @@ function SuspendedByRow({
         <div className={styles.TimeBarContainer}>
           <div
             className={
-              !isErrored ? styles.TimeBarSpan : styles.TimeBarSpanErrored
+              !isRejected ? styles.TimeBarSpan : styles.TimeBarSpanErrored
             }
             style={{
               left: left.toFixed(2) + '%',
@@ -147,6 +146,20 @@ function SuspendedByRow({
       </Button>
       {isOpen && (
         <div className={styles.CollapsableContent}>
+          {stack !== null && stack.length > 0 && (
+            <StackTraceView stack={stack} />
+          )}
+          {owner !== null && owner.id !== inspectedElement.id ? (
+            <OwnerView
+              key={owner.id}
+              displayName={owner.displayName || 'Anonymous'}
+              hocDisplayNames={owner.hocDisplayNames}
+              compiledWithForget={owner.compiledWithForget}
+              id={owner.id}
+              isInStore={store.containsElement(owner.id)}
+              type={owner.type}
+            />
+          ) : null}
           <div className={styles.PreviewContainer}>
             <KeyValue
               alphaSort={true}
@@ -158,27 +171,27 @@ function SuspendedByRow({
               element={element}
               hidden={false}
               inspectedElement={inspectedElement}
-              name={'Promise'}
-              path={[index, 'awaited', 'value']}
+              name={
+                isFulfilled
+                  ? 'awaited value'
+                  : isRejected
+                    ? 'rejected with'
+                    : 'pending value'
+              }
+              path={
+                isFulfilled
+                  ? [index, 'awaited', 'value', 'value']
+                  : isRejected
+                    ? [index, 'awaited', 'value', 'reason']
+                    : [index, 'awaited', 'value']
+              }
               pathRoot="suspendedBy"
               store={store}
-              value={asyncInfo.awaited.value}
+              value={
+                isFulfilled ? value.value : isRejected ? value.reason : value
+              }
             />
           </div>
-          {stack !== null && stack.length > 0 && (
-            <StackTraceView stack={stack} />
-          )}
-          {owner !== null && owner.id !== inspectedElement.id ? (
-            <OwnerView
-              key={owner.id}
-              displayName={owner.displayName || 'Anonymous'}
-              hocDisplayNames={owner.hocDisplayNames}
-              compiledWithForget={owner.compiledWithForget}
-              id={owner.id}
-              isInStore={store.containsElement(owner.id)}
-              type={owner.type}
-            />
-          ) : null}
         </div>
       )}
     </div>

packages/react-devtools-shared/src/hydration.js

@@ -21,6 +21,8 @@ import type {
   InspectedElementPath,
 } from 'react-devtools-shared/src/frontend/types';
 
+import noop from 'shared/noop';
+
 export const meta = {
   inspectable: (Symbol('inspectable'): symbol),
   inspected: (Symbol('inspected'): symbol),
@@ -317,6 +319,15 @@ export function dehydrate(
         };
       }
 
+      if (
+        data.status === 'resolved_model' ||
+        data.status === 'resolve_module'
+      ) {
+        // This looks it's a lazy initialization pattern such in Flight.
+        // Since we're about to inspect it. Let's eagerly initialize it.
+        data.then(noop);
+      }
+
       switch (data.status) {
         case 'fulfilled': {
           const unserializableValue: Unserializable = {