From ef25e5956f704ab86c495af1ac596bea16d233b0 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 8 Nov 2021 14:09:50 +1100
Subject: [PATCH] add a spinner for when video call video is loading

---
 .../calling/DraggableCallContainer.tsx        |  2 ++
 .../calling/InConversationCallContainer.tsx   | 21 +++++++++++++++++++
 .../conversation/SessionConversation.tsx      |  2 +-
 .../composition/CompositionBox.tsx            |  2 +-
 ts/models/conversation.ts                     |  6 +++---
 ts/receiver/dataMessage.ts                    |  2 +-
 ts/receiver/queuedJob.ts                      |  2 +-
 ts/receiver/receiver.ts                       |  2 +-
 8 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/ts/components/session/calling/DraggableCallContainer.tsx b/ts/components/session/calling/DraggableCallContainer.tsx
index 3946f2733..1b543c5f4 100644
--- a/ts/components/session/calling/DraggableCallContainer.tsx
+++ b/ts/components/session/calling/DraggableCallContainer.tsx
@@ -13,6 +13,7 @@ import { openConversationWithMessages } from '../../../state/ducks/conversations
 import { Avatar, AvatarSize } from '../../Avatar';
 import { useVideoCallEventsListener } from '../../../hooks/useVideoEventListener';
 import { useAvatarPath, useConversationUsername } from '../../../hooks/useParamSelector';
+import { VideoLoadingSpinner } from './InConversationCallContainer';
 
 export const DraggableCallWindow = styled.div`
   position: absolute;
@@ -134,6 +135,7 @@ export const DraggableCallContainer = () => {
     >
       <DraggableCallWindow className="dragHandle">
         <DraggableCallWindowInner>
+          <VideoLoadingSpinner fullWidth={true} />
           <StyledDraggableVideoElement
             ref={videoRefRemote}
             autoPlay={true}
diff --git a/ts/components/session/calling/InConversationCallContainer.tsx b/ts/components/session/calling/InConversationCallContainer.tsx
index dc1f43620..99dd00993 100644
--- a/ts/components/session/calling/InConversationCallContainer.tsx
+++ b/ts/components/session/calling/InConversationCallContainer.tsx
@@ -22,10 +22,12 @@ import {
 } from '../../../hooks/useParamSelector';
 import { useModuloWithTripleDots } from '../../../hooks/useModuloWithTripleDots';
 import { CallWindowControls } from './CallButtons';
+import { SessionSpinner } from '../SessionSpinner';
 
 const VideoContainer = styled.div`
   height: 100%;
   width: 50%;
+  z-index: 0;
 `;
 
 const InConvoCallWindow = styled.div`
@@ -94,6 +96,24 @@ const ConnectingLabel = () => {
   return <StyledCenteredLabel>{modulatedStr}</StyledCenteredLabel>;
 };
 
+const StyledSpinner = styled.div<{ fullWidth: boolean }>`
+  height: 100%;
+  width: ${props => (props.fullWidth ? '100%' : '50%')};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: -1;
+`;
+
+export const VideoLoadingSpinner = (props: { fullWidth: boolean }) => {
+  return (
+    <StyledSpinner fullWidth={props.fullWidth}>
+      <SessionSpinner loading={true} />
+    </StyledSpinner>
+  );
+};
+
 // tslint:disable-next-line: max-func-body-length
 export const InConversationCallContainer = () => {
   const ongoingCallProps = useSelector(getHasOngoingCallWith);
@@ -140,6 +160,7 @@ export const InConversationCallContainer = () => {
         <RingingLabel />
         <ConnectingLabel />
         <VideoContainer>
+          <VideoLoadingSpinner fullWidth={false} />
           <StyledVideoElement
             ref={videoRefRemote}
             autoPlay={true}
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx
index 0dc49ea88..baf7fc883 100644
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/ts/components/session/conversation/SessionConversation.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import {
-  SendMessageType,
   CompositionBox,
+  SendMessageType,
   StagedAttachmentType,
 } from './composition/CompositionBox';
 
diff --git a/ts/components/session/conversation/composition/CompositionBox.tsx b/ts/components/session/conversation/composition/CompositionBox.tsx
index 0ea38bee7..6c50f1821 100644
--- a/ts/components/session/conversation/composition/CompositionBox.tsx
+++ b/ts/components/session/conversation/composition/CompositionBox.tsx
@@ -43,9 +43,9 @@ import { getDraftForConversation, updateDraftForConversation } from '../SessionC
 import { showLinkSharingConfirmationModalDialog } from '../../../../interactions/conversationInteractions';
 import {
   AddStagedAttachmentButton,
+  SendMessageButton,
   StartRecordingButton,
   ToggleEmojiButton,
-  SendMessageButton,
 } from './CompositionButtons';
 
 export interface ReplyingToMessageProps {
diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts
index d92a3e86c..6cf622e35 100644
--- a/ts/models/conversation.ts
+++ b/ts/models/conversation.ts
@@ -597,7 +597,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     return unreadCount;
   }
 
-  public queueJob(callback: () => Promise<void>) {
+  public async queueJob(callback: () => Promise<void>) {
     // tslint:disable-next-line: no-promise-as-boolean
     const previous = this.pending || Promise.resolve();
 
@@ -606,7 +606,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     this.pending = previous.then(taskWithTimeout, taskWithTimeout);
     const current = this.pending;
 
-    current.then(() => {
+    void current.then(() => {
       if (this.pending === current) {
         delete this.pending;
       }
@@ -874,7 +874,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     });
     await this.commit();
 
-    this.queueJob(async () => {
+    await this.queueJob(async () => {
       await this.sendMessageJob(messageModel, expireTimer);
     });
   }
diff --git a/ts/receiver/dataMessage.ts b/ts/receiver/dataMessage.ts
index aff80bf61..b41265c09 100644
--- a/ts/receiver/dataMessage.ts
+++ b/ts/receiver/dataMessage.ts
@@ -626,7 +626,7 @@ export async function handleMessageEvent(event: MessageEvent): Promise<void> {
     return;
   }
 
-  conversation.queueJob(async () => {
+  void conversation.queueJob(async () => {
     if (await isMessageDuplicate(data)) {
       window?.log?.info('Received duplicate message. Dropping it.');
       confirm();
diff --git a/ts/receiver/queuedJob.ts b/ts/receiver/queuedJob.ts
index 794edaae0..b0bbeebe8 100644
--- a/ts/receiver/queuedJob.ts
+++ b/ts/receiver/queuedJob.ts
@@ -471,7 +471,7 @@ export async function handleMessageJob(
     });
     trotthledAllMessagesAddedDispatch();
     if (message.get('unread')) {
-      await conversation.throttledNotify(message);
+      conversation.throttledNotify(message);
     }
 
     if (confirm) {
diff --git a/ts/receiver/receiver.ts b/ts/receiver/receiver.ts
index 601a4f1fd..c3a8c0521 100644
--- a/ts/receiver/receiver.ts
+++ b/ts/receiver/receiver.ts
@@ -303,7 +303,7 @@ export async function handleOpenGroupV2Message(
     return;
   }
 
-  conversation.queueJob(async () => {
+  void conversation.queueJob(async () => {
     const isMe = UserUtils.isUsFromCache(sender);
     // for an opengroupv2 incoming message the serverTimestamp and the timestamp
     const messageCreationData: MessageCreationData = {