add a spinner for when video call video is loading

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}

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}

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';
 

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 {

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);
     });
   }

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();

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) {

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 = {