From 4eba508c5f5a498e530d2db6e478676257769965 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Wed, 20 Nov 2024 18:49:02 -0600
Subject: [PATCH] Show connecting state before ringing for direct calls

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
---
 _locales/en/messages.json    |  4 ++++
 ts/components/CallScreen.tsx | 16 ++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index fb9c47ec132a..281c6b4fabdf 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -3635,6 +3635,10 @@
     "messageformat": "{ringer} is calling you, {first}, {second}, and {remaining, plural, one {# other} other {# others}}",
     "description": "Shown in the incoming call bar when someone is ringing you for a group call"
   },
+  "icu:outgoingCallConnecting": {
+    "messageformat": "Connecting...",
+    "description": "Shown in the call screen when placing an outgoing call that is connecting (prior to ringing)"
+  },
   "icu:outgoingCallRinging": {
     "messageformat": "Ringing...",
     "description": "Shown in the call screen when placing an outgoing call that is now ringing"
diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx
index 50e86f6e7b02..635235f712f2 100644
--- a/ts/components/CallScreen.tsx
+++ b/ts/components/CallScreen.tsx
@@ -365,6 +365,7 @@ export function CallScreen({
 
   let isRinging: boolean;
   let hasCallStarted: boolean;
+  let isConnecting: boolean;
   let isConnected: boolean;
   let participantCount: number;
   let conversationsByDemuxId: ConversationsByDemuxIdType;
@@ -372,10 +373,11 @@ export function CallScreen({
 
   switch (activeCall.callMode) {
     case CallMode.Direct: {
-      isRinging =
-        activeCall.callState === CallState.Prering ||
-        activeCall.callState === CallState.Ringing;
-      hasCallStarted = !isRinging;
+      isConnecting = activeCall.callState === CallState.Prering;
+      isRinging = activeCall.callState === CallState.Ringing;
+      hasCallStarted =
+        activeCall.callState !== CallState.Prering &&
+        activeCall.callState !== CallState.Ringing;
       isConnected = activeCall.callState === CallState.Accepted;
       participantCount = isConnected ? 2 : 0;
       conversationsByDemuxId = new Map();
@@ -394,6 +396,8 @@ export function CallScreen({
 
       isConnected =
         activeCall.connectionState === GroupCallConnectionState.Connected;
+      isConnecting =
+        activeCall.connectionState === GroupCallConnectionState.Connecting;
       break;
     default:
       throw missingCaseError(activeCall);
@@ -644,6 +648,9 @@ export function CallScreen({
   const raisedHandsCount: number = raisedHands?.size ?? 0;
 
   const callStatus: ReactNode | string = React.useMemo(() => {
+    if (isConnecting) {
+      return i18n('icu:outgoingCallConnecting');
+    }
     if (isRinging) {
       return i18n('icu:outgoingCallRinging');
     }
@@ -672,6 +679,7 @@ export function CallScreen({
     return null;
   }, [
     i18n,
+    isConnecting,
     isRinging,
     isConnected,
     activeCall.callMode,