[Click to call] Resize observer fix (#3192)

* fix infinite loop

* Change files

* Duplicate change files for beta release

* fix lint

Author: dmceachernmsft

change-beta/@azure-communication-react-95de45ef-fd1d-4265-8792-690b936fe4d1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixes resizeObserver infinite loop error in older versions of react",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-95de45ef-fd1d-4265-8792-690b936fe4d1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixes resizeObserver infinite loop error in older versions of react",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -245,7 +245,8 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
   const [isHovered, setIsHovered] = useState<boolean>(false);
   /* @conditional-compile-remove(pinned-participants) */
   const [isFocused, setIsFocused] = useState<boolean>(false);
-  const [personaSize, setPersonaSize] = useState<number>();
+  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.
+  const [personaSize, setPersonaSize] = useState<number>(1);
   const videoTileRef = useRef<HTMLDivElement>(null);
 
   const locale = useLocale();
@@ -256,8 +257,11 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
   const observer = useRef(
     new ResizeObserver((entries): void => {
       const { width, height } = entries[0].contentRect;
-      const personaSize = Math.min(width, height) / 3;
-      setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));
+      const personaCalcSize = Math.min(width, height) / 3;
+      // we only want to set the persona size if it has changed
+      if (personaCalcSize !== personaSize) {
+        setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));
+      }
     })
   );