From 7666894d778e3c34cdbe337b5fb3f982103beac6 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 14 Mar 2023 15:24:48 -0700
Subject: [PATCH] chore(ui): minor trace viewer improvements (#21672)

---
 packages/trace-viewer/src/ui/actionList.css |  3 +++
 packages/trace-viewer/src/ui/actionList.tsx | 12 ++++++++----
 packages/trace-viewer/src/ui/sourceTab.tsx  | 10 ++++++----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/trace-viewer/src/ui/actionList.css b/packages/trace-viewer/src/ui/actionList.css
index a3f64244e9..8c293868ed 100644
--- a/packages/trace-viewer/src/ui/actionList.css
+++ b/packages/trace-viewer/src/ui/actionList.css
@@ -22,6 +22,9 @@
 }
 
 .action-duration {
+  display: flex;
+  flex: none;
+  align-items: center;
   margin: 0 4px;
   color: var(--gray);
 }
diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index dd394cbc3a..167910f22d 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -50,7 +50,6 @@ export const ActionList: React.FC<ActionListProps> = ({
     onHighlighted={onHighlighted}
     isError={action => !!action.error?.message}
     render={action => renderAction(action, sdkLanguage, revealConsole)}
-    noItemsMessage='No actions'
   />;
 };
 
@@ -62,16 +61,21 @@ const renderAction = (
   const { errors, warnings } = modelUtil.stats(action);
   const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector) : undefined;
 
+  let time: string = '';
+  if (action.endTime)
+    time = msToString(action.endTime - action.startTime);
+  else if (action.error)
+    time = 'Timed out';
   return <>
     <div className='action-title'>
       <span>{action.apiName}</span>
       {locator && <div className='action-selector' title={locator}>{locator}</div>}
       {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}
     </div>
-    <div className='action-duration' style={{ flex: 'none' }}>{action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out'}</div>
+    <div className='action-duration' style={{ flex: 'none' }}>{time || <span className='codicon codicon-loading'></span>}</div>
     <div className='action-icons' onClick={() => revealConsole()}>
-      {!!errors && <div className='action-icon'><span className={'codicon codicon-error'}></span><span className="action-icon-value">{errors}</span></div>}
-      {!!warnings && <div className='action-icon'><span className={'codicon codicon-warning'}></span><span className="action-icon-value">{warnings}</span></div>}
+      {!!errors && <div className='action-icon'><span className='codicon codicon-error'></span><span className="action-icon-value">{errors}</span></div>}
+      {!!warnings && <div className='action-icon'><span className='codicon codicon-warning'></span><span className="action-icon-value">{warnings}</span></div>}
     </div>
   </>;
 };
diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx
index 6ed5431c28..fb11f58092 100644
--- a/packages/trace-viewer/src/ui/sourceTab.tsx
+++ b/packages/trace-viewer/src/ui/sourceTab.tsx
@@ -35,10 +35,12 @@ export const SourceTab: React.FunctionComponent<{
   const [lastAction, setLastAction] = React.useState<ActionTraceEvent | undefined>();
   const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
 
-  if (lastAction !== action) {
-    setLastAction(action);
-    setSelectedFrame(0);
-  }
+  React.useEffect(() => {
+    if (lastAction !== action) {
+      setLastAction(action);
+      setSelectedFrame(0);
+    }
+  }, [action, lastAction, setLastAction, setSelectedFrame]);
 
   const stackInfo = React.useMemo<StackInfo>(() => {
     if (!action)