Real-time response time

Closes https://feedback.yaak.app/p/real-time-display-of-request-execution-timer

src-web/components/HttpResponsePane.tsx

@@ -9,7 +9,7 @@ import { getContentTypeFromHeaders } from '../lib/model_util';
 import { ConfirmLargeResponse } from './ConfirmLargeResponse';
 import { Banner } from './core/Banner';
 import { CountBadge } from './core/CountBadge';
-import { DurationTag } from './core/DurationTag';
+import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
 import { HotKeyList } from './core/HotKeyList';
 import { LoadingIcon } from './core/LoadingIcon';
 import { SizeTag } from './core/SizeTag';
@@ -123,9 +123,8 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
                 {activeResponse.state !== 'closed' && <LoadingIcon size="sm" />}
                 <HttpStatusTag showReason response={activeResponse} />
                 <span>&bull;</span>
-                <DurationTag
-                  headers={activeResponse.elapsedHeaders}
-                  total={activeResponse.elapsed}
+                <HttpResponseDurationTag
+                  response={activeResponse}
                 />
                 <span>&bull;</span>
                 <SizeTag contentLength={activeResponse.contentLength ?? 0} />

src-web/components/core/DurationTag.tsx

@@ -1,33 +0,0 @@
-interface Props {
-  total: number;
-  headers: number;
-}
-
-export function DurationTag({ total, headers }: Props) {
-  return (
-    <span
-      className="font-mono"
-      title={`HEADER: ${formatMillis(headers)}\nTOTAL: ${formatMillis(total)}`}
-    >
-      {formatMillis(total)}
-    </span>
-  );
-}
-
-function formatMillis(millis: number) {
-  let num;
-  let unit;
-
-  if (millis > 1000 * 60) {
-    num = millis / 1000 / 60;
-    unit = 'min';
-  } else if (millis > 1000) {
-    num = millis / 1000;
-    unit = 's';
-  } else {
-    num = millis;
-    unit = 'ms';
-  }
-
-  return `${Math.round(num * 10) / 10} ${unit}`;
-}

src-web/components/core/HttpResponseDurationTag.tsx

@@ -0,0 +1,41 @@
+import type { HttpResponse } from '@yaakapp-internal/models';
+import { useEffect, useRef, useState } from 'react';
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function HttpResponseDurationTag({ response }: Props) {
+  const [fallbackDuration, setFallbackDuration] = useState<number>(0);
+  const timeout = useRef<NodeJS.Timeout>();
+
+  // Calculate the duration of the response for use when the response hasn't finished yet
+  useEffect(() => {
+    clearInterval(timeout.current);
+    timeout.current = setInterval(() => {
+      setFallbackDuration(Date.now() - new Date(response.createdAt + 'Z').getTime());
+    }, 100);
+    return () => clearInterval(timeout.current);
+  }, [response.createdAt, response.elapsed, response.state]);
+
+  const title = `HEADER: ${formatMillis(response.elapsedHeaders)}\nTOTAL: ${formatMillis(response.elapsed)}`;
+
+  return (
+    <span className="font-mono" title={title}>
+      {formatMillis(response.elapsed || fallbackDuration)}
+    </span>
+  );
+}
+
+function formatMillis(ms: number) {
+  if (ms < 1000) {
+    return `${ms} ms`;
+  } else if (ms < 60_000) {
+    const seconds = (ms / 1000).toFixed(ms < 10_000 ? 1 : 0);
+    return `${seconds} s`;
+  } else {
+    const minutes = Math.floor(ms / 60_000);
+    const seconds = Math.round((ms % 60_000) / 1000);
+    return `${minutes}m ${seconds}s`;
+  }
+}