From aaf9ad451882c93faaf86ee13b619676250caea7 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Thu, 30 Apr 2026 17:23:17 -0700
Subject: [PATCH] show progress during upload

More explicit feedback of the state of their upload. Also prevents
recording more media at the same time or interacting with the stream
which would feel stale to the human since they just created something
and it's yet to be present in the stream.
---
 .../src/features/compose/ComposeDock.tsx      | 29 ++++++++--
 .../src/features/compose/ReviewSheet.tsx      | 55 ++++++++++++++-----
 2 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/js/mobile/src/features/compose/ComposeDock.tsx b/js/mobile/src/features/compose/ComposeDock.tsx
index 4b2f80a..25a6577 100644
--- a/js/mobile/src/features/compose/ComposeDock.tsx
+++ b/js/mobile/src/features/compose/ComposeDock.tsx
@@ -36,7 +36,12 @@ type ComposeUiState =
       uri: string;
       durationMs: number;
     }
-  | { kind: "uploading" };
+  | {
+      kind: "uploading";
+      mode: RecordingMode;
+      uri: string;
+      durationMs: number;
+    };
 
 interface SubmitMediaParams {
   fileUri: string;
@@ -125,7 +130,12 @@ export function ComposeDock({
   const sendReview = useEvent(async () => {
     if (ui.kind !== "review" || !userId) return;
     const captured = ui;
-    setUi({ kind: "uploading" });
+    setUi({
+      kind: "uploading",
+      mode: captured.mode,
+      uri: captured.uri,
+      durationMs: captured.durationMs,
+    });
     try {
       const mimeType =
         captured.mode === "audio" ? "audio/mp4" : "video/mp4";
@@ -251,10 +261,17 @@ export function ComposeDock({
       ) : null}
 
       <ReviewSheet
-        open={ui.kind === "review"}
-        uri={ui.kind === "review" ? ui.uri : null}
-        mode={ui.kind === "review" ? ui.mode : null}
-        durationMs={ui.kind === "review" ? ui.durationMs : 0}
+        open={ui.kind === "review" || ui.kind === "uploading"}
+        uri={
+          ui.kind === "review" || ui.kind === "uploading" ? ui.uri : null
+        }
+        mode={
+          ui.kind === "review" || ui.kind === "uploading" ? ui.mode : null
+        }
+        durationMs={
+          ui.kind === "review" || ui.kind === "uploading" ? ui.durationMs : 0
+        }
+        sending={ui.kind === "uploading"}
         onSend={sendReview}
         onRetake={retake}
         onCancel={cancelReview}
diff --git a/js/mobile/src/features/compose/ReviewSheet.tsx b/js/mobile/src/features/compose/ReviewSheet.tsx
index 47352ea..1f8824c 100644
--- a/js/mobile/src/features/compose/ReviewSheet.tsx
+++ b/js/mobile/src/features/compose/ReviewSheet.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { Modal, Pressable, Text, View } from "react-native";
+import { useEffect } from "react";
+import { ActivityIndicator, Modal, Pressable, Text, View } from "react-native";
 import {
   initialWindowMetrics,
   SafeAreaProvider,
@@ -17,6 +17,12 @@ interface ReviewSheetProps {
   uri: string | null;
   mode: "video" | "audio" | null;
   durationMs: number;
+  /**
+   * True once the parent has flipped to the uploading state. The sheet stays
+   * mounted (so playback doesn't tear down) and blocks all interaction behind
+   * a "Sending..." overlay until the parent clears it.
+   */
+  sending: boolean;
   onSend: () => Promise<void>;
   onRetake: () => void;
   onCancel: () => void;
@@ -32,6 +38,7 @@ export function ReviewSheet({
   uri,
   mode,
   durationMs,
+  sending,
   onSend,
   onRetake,
   onCancel,
@@ -41,22 +48,22 @@ export function ReviewSheet({
     p.muted = false;
     p.audioMixingMode = "mixWithOthers";
   });
-  const [submitting, setSubmitting] = useState(false);
 
   useEffect(() => {
-    if (open && uri) {
+    if (!open || !uri) return;
+    if (sending) {
+      player.pause();
+    } else {
       player.play();
     }
-  }, [open, uri, player]);
+  }, [open, uri, sending, player]);
 
   const handleSend = async () => {
-    if (submitting) return;
-    setSubmitting(true);
+    if (sending) return;
     try {
       await onSend();
     } catch (err) {
       toast.error(toUserMessage(err));
-      setSubmitting(false);
     }
   };
 
@@ -67,7 +74,7 @@ export function ReviewSheet({
       visible={open}
       animationType="fade"
       transparent={false}
-      onRequestClose={onCancel}
+      onRequestClose={sending ? undefined : onCancel}
     >
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       <View className="flex-1 bg-black">
@@ -110,10 +117,18 @@ export function ReviewSheet({
           <View className="px-4 pt-3">
             <Pressable
               onPress={onCancel}
+              disabled={sending}
               hitSlop={12}
               accessibilityLabel="Cancel"
             >
-              <Text className="text-white/80 text-base">Cancel</Text>
+              <Text
+                className={cn(
+                  "text-base",
+                  sending ? "text-white/30" : "text-white/80",
+                )}
+              >
+                Cancel
+              </Text>
             </Pressable>
           </View>
         </SafeAreaView>
@@ -125,8 +140,11 @@ export function ReviewSheet({
           <View className="flex-row items-center justify-between px-6 pb-4 pt-3">
             <Pressable
               onPress={onRetake}
-              disabled={submitting}
-              className="rounded-full bg-white/15 px-5 py-3"
+              disabled={sending}
+              className={cn(
+                "rounded-full bg-white/15 px-5 py-3",
+                sending && "opacity-40",
+              )}
               accessibilityLabel="Retake"
             >
               <Text className="text-white text-base font-medium">Retake</Text>
@@ -134,19 +152,26 @@ export function ReviewSheet({
 
             <Pressable
               onPress={handleSend}
-              disabled={submitting}
+              disabled={sending}
               className={cn(
                 "rounded-full px-7 py-3",
-                submitting ? "bg-white/40" : "bg-white",
+                sending ? "bg-white/40" : "bg-white",
               )}
               accessibilityLabel="Send"
             >
               <Text className="text-black text-base font-semibold">
-                {submitting ? "Sending..." : "Send"}
+                {sending ? "Sending..." : "Send"}
               </Text>
             </Pressable>
           </View>
         </SafeAreaView>
+
+        {sending ? (
+          <View className="absolute inset-0 items-center justify-center bg-black/85">
+            <ActivityIndicator color="white" />
+            <Text className="text-white/70 mt-4 text-sm">Sending...</Text>
+          </View>
+        ) : null}
       </View>
       </SafeAreaProvider>
     </Modal>