Fix infinite spinner bug during screenshare (#2191)

communication-ui-bot · github-actions[bot] · communication-ui-bot · commit 4a260d294680 · 2022-08-11T10:35:22.000-07:00
Co-authored-by: Nan Jiang &lt;jinan@microsoft.com&gt;
Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
diff --git a/change/@internal-react-components-269980ac-ec3f-4f91-a760-7ffcfd8551e3.json b/change/@internal-react-components-269980ac-ec3f-4f91-a760-7ffcfd8551e3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Hotfix: infinite spinner for screenShare in stable",
+  "packageName": "@internal/react-components",
+  "email": "jinan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/RemoteVideoTile.tsx b/packages/react-components/src/components/RemoteVideoTile.tsx
@@ -90,7 +90,9 @@ export const _RemoteVideoTile = React.memo(
         return undefined;
       }
 
-      return <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving ? 'none' : 'loading'} />;
+      return (
+        <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />
+      );
     }, [renderElement, isReceiving]);
 
     return (
diff --git a/packages/react-components/src/components/VideoGallery/RemoteScreenShare.tsx b/packages/react-components/src/components/VideoGallery/RemoteScreenShare.tsx
@@ -64,7 +64,7 @@ export const RemoteScreenShare = React.memo(
         isMuted={isMuted}
         renderElement={
           renderElement ? (
-            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving ? 'none' : 'loading'} />
+            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />
           ) : undefined
         }
         onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}

Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,9 @@ export const _RemoteVideoTile = React.memo(`
`90`	`90`	`return undefined;`
`91`	`91`	`}`
`92`	`92`
`93`		`- return <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving ? 'none' : 'loading'} />;`
	`93`	`+ return (`
	`94`	`+ <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />`
	`95`	`+ );`
`94`	`96`	`}, [renderElement, isReceiving]);`
`95`	`97`
`96`	`98`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export const RemoteScreenShare = React.memo(`
`64`	`64`	`isMuted={isMuted}`
`65`	`65`	`renderElement={`
`66`	`66`	`renderElement ? (`
`67`		`- <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving ? 'none' : 'loading'} />`
	`67`	`+ <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />`
`68`	`68`	`) : undefined`
`69`	`69`	`}`
`70`	`70`	`onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}`