chore: show submitting loader during compose

js/src/features/compose/compose-overlay.tsx

@@ -10,7 +10,7 @@ import { ConfigureStreamStep } from "@/features/compose/configure-stream-step";
 import { apiClient } from "@/api/client";
 import { useMediaSettingsStore } from "@/stores/media-settings-store";
 
-type ComposeStep = "idle" | "recording" | "reviewing" | "typing" | "configuring";
+type ComposeStep = "idle" | "recording" | "reviewing" | "typing" | "configuring" | "submitting";
 
 interface ComposeOverlayProps {
   networkId: string;
@@ -46,7 +46,6 @@ export function ComposeOverlay({
 
   // Refs for synchronous reads in keyboard handlers
   const stepRef = useRef(step);
-  const submittingRef = useRef(false);
   const recordStartRef = useRef(0);
 
   const setStepSync = useCallback((next: ComposeStep) => {
@@ -60,7 +59,6 @@ export function ComposeOverlay({
   }, [step, onActiveChange]);
 
   const cancel = useCallback(() => {
-    submittingRef.current = false;
     setStepSync("idle");
     setError(null);
     setTextContent("");
@@ -154,8 +152,8 @@ export function ComposeOverlay({
 
   // Reply mode: create particle directly under targetPath
   const onSubmitReply = useEffectEvent(async () => {
-    if (!targetPath || !userEmail || submittingRef.current) return;
-    submittingRef.current = true;
+    if (!targetPath || !userEmail || stepRef.current === "submitting") return;
+    setStepSync("submitting");
     await createChildParticle(targetPath);
     cancel();
   });
@@ -163,8 +161,8 @@ export function ComposeOverlay({
   // New stream mode: create stream + first child
   const handleStreamSubmit = useCallback(
     async (streamName: string, visibleTo: string[]) => {
-      if (!userEmail || submittingRef.current) return;
-      submittingRef.current = true;
+      if (!userEmail || stepRef.current === "submitting") return;
+      setStepSync("submitting");
 
       const streamId = await createStream.mutateAsync({
         networkId,
@@ -306,6 +304,11 @@ export function ComposeOverlay({
           onSubmit={handleStreamSubmit}
         />
       )}
+      {step === "submitting" && (
+        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90">
+          <span className="animate-pulse text-sm text-white/60">Sending...</span>
+        </div>
+      )}
     </>
   );
 }