Cherry pick #2392 (#2400)

Author: JamesBurnside

change/@internal-react-components-d82957db-3d0c-4bad-94f6-dd5b1639426a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix VideoGallery showing video spinners when the CallComposites are disconnecting from a call. ",
+  "packageName": "@internal/react-components",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-composites-59bf493f-f02c-4cc1-a136-7069c8023113.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix CallWithChat control bar disappearing while the call is in the disconnecting state",
+  "packageName": "@internal/react-composites",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/RemoteVideoTile.tsx

@@ -83,6 +83,8 @@ export const _RemoteVideoTile = React.memo(
     // Handle creating, destroying and updating the video stream as necessary
     useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
 
+    const showLoadingIndicator = isAvailable && isReceiving === false && props.participantState !== 'Disconnected';
+
     const renderVideoStreamElement = useMemo(() => {
       // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
       // implies that, after their threshold, all streams have no child (blank video)
@@ -92,9 +94,9 @@ export const _RemoteVideoTile = React.memo(
       }
 
       return (
-        <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />
+        <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />
       );
-    }, [renderElement, isReceiving]);
+    }, [renderElement, showLoadingIndicator]);
 
     return (
       <VideoTile

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx

@@ -492,10 +492,11 @@ export const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.El
 const hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {
   /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
   return (
-    (page === 'call' && (callStatus === 'Connected' || callStatus === 'RemoteHold')) ||
-    (page === 'hold' && callStatus === 'LocalHold')
+    (page === 'call' &&
+      (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||
+    (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))
   );
-  return page === 'call' && callStatus === 'Connected';
+  return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');
 };
 
 const showShowChatTabHeaderButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {