Merge branch 'main' of github.com:usebruno/bruno

packages/bruno-app/src/components/ResponsePane/Overlay/index.js

@@ -17,7 +17,7 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
       <div className="overlay">
         <div style={{ marginBottom: 15, fontSize: 26 }}>
           <div style={{ display: 'inline-block', fontSize: 20, marginLeft: 5, marginRight: 5 }}>
-            <StopWatch />
+            <StopWatch requestTimestamp={item?.requestSent?.timestamp} />
           </div>
         </div>
         <IconRefresh size={24} className="loading-icon" />

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   align-self: stretch;
   align-items: center;
   min-width: 34px;
+  flex-shrink: 0;
 
   span {
     position: relative;

packages/bruno-app/src/components/StopWatch/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-const StopWatch = () => {
+const StopWatch = ({ requestTimestamp }) => {
   const [milliseconds, setMilliseconds] = useState(0);
 
   const tickInterval = 200;
@@ -15,6 +15,10 @@ const StopWatch = () => {
     };
   });
 
+  useEffect(() => {
+    setMilliseconds(Date.now() - requestTimestamp);
+  }, [requestTimestamp]);
+
   if (milliseconds < 1000) {
     return 'Loading...';
   }

packages/bruno-electron/src/ipc/network/index.js

@@ -195,7 +195,8 @@ const registerNetworkIpc = (mainWindow) => {
           url: request.url,
           method: request.method,
           headers: request.headers,
-          data: safeParseJSON(safeStringifyJSON(request.data))
+          data: safeParseJSON(safeStringifyJSON(request.data)),
+          timestamp: Date.now()
         },
         collectionUid,
         itemUid: item.uid,