fix(ui): don't display "Timed Out" when executing action (#34541)

Author: agg23

packages/trace-viewer/src/ui/callTab.tsx

@@ -40,18 +40,12 @@ export const CallTab: React.FunctionComponent<{
   const startTimeMillis = action.startTime - startTimeOffset;
   const startTime = msToString(startTimeMillis);
 
-  const duration = action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out';
-
   return (
     <div className='call-tab'>
       <div className='call-line'>{action.apiName}</div>
-      {
-        <>
-          <div className='call-section'>Time</div>
-          <DateTimeCallLine name='start:' value={startTime} />
-          <DateTimeCallLine name='duration:' value={duration} />
-        </>
-      }
+      <div className='call-section'>Time</div>
+      <DateTimeCallLine name='start:' value={startTime} />
+      <DateTimeCallLine name='duration:' value={renderDuration(action)} />
       {
         !!paramKeys.length && <>
           <div className='call-section'>Parameters</div>
@@ -78,6 +72,15 @@ type Property = {
   text: string;
 };
 
+function renderDuration(action: ActionTraceEventInContext): string {
+  if (action.endTime)
+    return msToString(action.endTime - action.startTime);
+  else if (!!action.error)
+    return 'Timed Out';
+  else
+    return 'Running';
+}
+
 function renderProperty(property: Property) {
   let text = property.text.replace(/\n/g, '↵');
   if (property.type === 'string')