Fix UX around pending requests and show live counting timers

Author: pimterry

src/components/common/duration-pill.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
+
 import { TimingEvents } from '../../types';
+import { observableClock } from '../../util/observable';
 
 import { Pill } from './pill';
 
@@ -11,20 +13,30 @@ function sigFig(num: number, figs: number): number {
 type DurationPillProps = { className?: string } & (
     | { durationMs: number }
     | { timingEvents: Partial<TimingEvents> }
-)
+);
+
+const calculateDuration = (timingEvents: Partial<TimingEvents>) => {
+    const doneTimestamp = timingEvents.responseSentTimestamp ?? timingEvents.abortedTimestamp;
+
+    if (timingEvents.startTimestamp !== undefined && doneTimestamp !== undefined) {
+        return doneTimestamp - timingEvents.startTimestamp;
+    }
+
+    if (timingEvents.startTime !== undefined) {
+        // This may not be perfect - note that startTime comes from the server so we might be
+        // mildly out of sync (ehhhh, in theory) but this is only for pending requests where
+        // that's unlikely to be an issue - the final time will be correct regardless.
+        return observableClock.getTime() - timingEvents.startTime;
+    }
+}
 
 export const DurationPill = observer((p: DurationPillProps) => {
     let duration: number | undefined;
 
     if ('durationMs' in p) {
         duration = p.durationMs;
-    } else {
-        const timingEvents = p.timingEvents;
-        const doneTimestamp = timingEvents.responseSentTimestamp ?? timingEvents.abortedTimestamp;
-
-        duration = doneTimestamp !== undefined && timingEvents.startTimestamp !== undefined
-            ? doneTimestamp - timingEvents.startTimestamp
-            : undefined;
+    } else if (p.timingEvents) {
+        duration = calculateDuration(p.timingEvents);
     }
 
     if (duration === undefined) return null;

src/components/send/request-pane.tsx

@@ -56,7 +56,8 @@ export class RequestPane extends React.Component<{
     editorNode: portals.HtmlPortalNode<typeof ContainerSizedEditor>,
 
     requestInput: RequestInput,
-    sendRequest: () => void
+    sendRequest: () => void,
+    isSending: boolean
 }> {
 
     get cardProps() {
@@ -81,22 +82,28 @@ export class RequestPane extends React.Component<{
     }
 
     render() {
-        const { requestInput, editorNode, uiStore } = this.props;
+        const {
+            requestInput,
+            sendRequest,
+            isSending,
+            editorNode,
+            uiStore
+        } = this.props;
 
         return <SendCardContainer
             hasExpandedChild={!!uiStore?.expandedSendRequestCard}
         >
             <RequestPaneKeyboardShortcuts
-                sendRequest={this.sendRequest}
+                sendRequest={sendRequest}
             />
 
             <SendRequestLine
                 method={requestInput.method}
                 updateMethod={this.updateMethod}
                 url={requestInput.url}
                 updateUrl={this.updateUrl}
-                isSending={this.isSending}
-                sendRequest={this.sendRequest}
+                isSending={isSending}
+                sendRequest={sendRequest}
             />
             <SendRequestHeadersCard
                 {...this.cardProps.requestHeaders}
@@ -143,21 +150,4 @@ export class RequestPane extends React.Component<{
         requestInput.rawBody.updateDecodedBody(input);
     }
 
-    @observable
-    private isSending = false;
-
-    sendRequest = flow(function * (this: RequestPane) {
-        if (this.isSending) return;
-
-        this.isSending = true;
-
-        try {
-            yield this.props.sendRequest();
-        } catch (e) {
-            console.warn('Sending request failed', e);
-        } finally {
-            this.isSending = false;
-        }
-    }).bind(this);
-
 }

src/components/send/response-pane.tsx

@@ -101,11 +101,12 @@ export class ResponsePane extends React.Component<{
     }
 
     renderInProgressResponse() {
-        const { uiStore, editorNode, requestInput } = this.props;
+        const { uiStore, editorNode, requestInput, exchange } = this.props;
 
         return <>
             <PendingResponseStatusSection
                 theme={uiStore!.theme}
+                timingEvents={exchange?.timingEvents}
             />
             <PendingResponseHeaderSection
                 {...this.cardProps.responseHeaders}

src/components/send/send-page.tsx

@@ -53,6 +53,15 @@ export class SendPage extends React.Component<{
         attributes: { 'style': 'height: 100%' }
     });
 
+    private sendRequest = () => {
+        const {
+            sendRequest,
+            selectedRequest
+        } = this.props.sendStore!;
+
+        sendRequest(selectedRequest);
+    };
+
     render() {
         const {
             sendRequests,
@@ -91,7 +100,10 @@ export class SendPage extends React.Component<{
                 >
                     <RequestPane
                         requestInput={selectedRequest.request}
-                        sendRequest={() => sendRequest(selectedRequest)}
+                        sendRequest={this.sendRequest}
+                        isSending={
+                            selectedRequest.pendingSendPromise?.state === 'pending'
+                        }
                         editorNode={this.requestEditorNode}
                     />
                     <ResponsePane

src/components/send/sent-response-status.tsx

@@ -1,6 +1,8 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { observer } from 'mobx-react-lite';
 
+import { TimingEvents } from '../../types';
 import { Theme, styled } from '../../styles';
 import { getReadableSize } from '../../util/buffer';
 
@@ -54,8 +56,9 @@ export const ResponseStatusSection = (props: {
     </ResponseStatusSectionCard>;
 }
 
-export const PendingResponseStatusSection = (props: {
-    theme: Theme
+export const PendingResponseStatusSection = observer((props: {
+    theme: Theme,
+    timingEvents?: Partial<TimingEvents>
 }) => {
     return <ResponseStatusSectionCard
         className='ignores-expanded' // This always shows, even if something is expanded
@@ -69,9 +72,10 @@ export const PendingResponseStatusSection = (props: {
             >
                 &nbsp;...&nbsp;
             </Pill>
+            <DurationPill timingEvents={props.timingEvents ?? {}} />
         </header>
     </ResponseStatusSectionCard>;
-}
+});
 
 export const FailedResponseStatusSection = (props: {
     exchange: CompletedExchange,

src/model/send/send-request-model.ts

@@ -3,9 +3,15 @@ import * as serializr from 'serializr';
 import { observable } from 'mobx';
 
 import { HttpExchange, RawHeaders } from "../../types";
+import { ObservablePromise } from '../../util/observable';
+
 import { EditableContentType, getEditableContentTypeFromViewable } from "../events/content-types";
 import { EditableBody } from '../http/editable-body';
-import { syncBodyToContentLength, syncFormattingToContentType, syncUrlToHeaders } from '../http/editable-request-parts';
+import {
+    syncBodyToContentLength,
+    syncFormattingToContentType,
+    syncUrlToHeaders
+} from '../http/editable-request-parts';
 
 // This is our model of a Request for sending. Smilar to the API model,
 // but not identical, as we add extra UI metadata etc.
@@ -70,6 +76,7 @@ export interface SendRequest {
     id: string;
     request: RequestInput;
     sentExchange: HttpExchange | undefined;
+    pendingSendPromise?: ObservablePromise<void>;
 }
 
 const requestInputSchema = serializr.createModelSchema(RequestInput, {
@@ -94,7 +101,8 @@ const requestInputSchema = serializr.createModelSchema(RequestInput, {
 export const sendRequestSchema = serializr.createSimpleSchema({
     id: serializr.primitive(),
     request: serializr.object(requestInputSchema),
-    sentExchange: false // Never persisted here
+    sentExchange: false, // Never persisted here (exportable as HAR etc though)
+    pendingSendPromise: false // Never persisted at all
 });
 
 export async function buildRequestInputFromExchange(exchange: HttpExchange): Promise<RequestInput> {

src/model/send/send-store.ts

@@ -10,7 +10,7 @@ import {
 } from 'mockttp';
 
 import { logError } from '../../errors';
-import { lazyObservablePromise } from '../../util/observable';
+import { getObservableDeferred, lazyObservablePromise } from '../../util/observable';
 import { persist, hydrate } from '../../util/mobx-persist/persist';
 import { ErrorLike, UnreachableCheck } from '../../util/error';
 import { rawHeadersToHeaders } from '../../util/headers';
@@ -131,10 +131,15 @@ export class SendStore {
         trackEvent({ category: 'Send', action: 'Sent request' });
 
         const requestInput = sendRequest.request;
+        const pendingRequestDeferred = getObservableDeferred();
         runInAction(() => {
             sendRequest.sentExchange = undefined;
+
+            sendRequest.pendingSendPromise = pendingRequestDeferred.promise;
+            sendRequest.pendingSendPromise.then(() => { sendRequest.pendingSendPromise = undefined; });
         });
 
+
         const exchangeId = uuid();
 
         const passthroughOptions = this.rulesStore.activePassthroughOptions;
@@ -194,11 +199,14 @@ export class SendStore {
                 },
                 tags: error.code ? [`passthrough-error:${error.code}`] : []
             });
-        }));
+        }))
+        .then(() => pendingRequestDeferred.resolve());
 
         runInAction(() => {
             sendRequest.sentExchange = exchange;
         });
+
+        return sendRequest.pendingSendPromise;
     }
 
 }

src/util/observable.ts

@@ -165,4 +165,47 @@ export function debounceComputed<T>(
 
         return computed(debounced(fn, timeoutMs), computedOptions);
     }
-}
+}
+
+// An observable clock, allowing for time-reactive logic & UI, but ticking only while
+// observed, so no intervals etc are required any time it isn't in active use. Closely
+// based on the example in https://mobx.js.org/custom-observables.html.
+class Clock {
+
+    private atom: IAtom = createAtom(
+        "Clock",
+        () => this.startTicking(),
+        () => this.stopTicking()
+    );
+
+    private intervalHandler: ReturnType<typeof setInterval> | null = null;
+    private currentDateTime: number = Date.now();
+
+    getTime() {
+        if (this.atom.reportObserved()) {
+            return this.currentDateTime;
+        } else {
+            return Date.now();
+        }
+    }
+
+    tick() {
+        this.currentDateTime = Date.now();
+        this.atom.reportChanged();
+    }
+
+    startTicking() {
+        this.tick();
+        this.intervalHandler = setInterval(() => this.tick(), 50);
+    }
+
+    stopTicking() {
+        if (this.intervalHandler == null) return;
+
+        clearInterval(this.intervalHandler);
+        this.intervalHandler = null;
+    }
+
+}
+
+export const observableClock = new Clock();