Adding memo for multipleWaiting and fixing styling

custom/shared/components/HairCheck/HairCheck.js

@@ -140,6 +140,17 @@ export const HairCheck = () => {
         ) : (
           <span>Waiting for host to grant access</span>
         )}
+        <style jsx>{`
+          .waiting {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          }
+
+          .waiting span {
+            margin-left: var(--spacing-xxs);
+          }
+        `}</style>
       </div>
     );
   }, [denied]);
@@ -329,16 +340,6 @@ export const HairCheck = () => {
             grid-column-gap: var(--spacing-xs);
           }
 
-          .waiting {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          .waiting span {
-            margin-left: var(--spacing-xxs);
-          }
-
           .logo {
             position: absolute;
             top: var(--spacing-sm);

custom/shared/contexts/WaitingRoomProvider.js

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import PropTypes from 'prop-types';
@@ -13,7 +14,6 @@ const WaitingRoomContext = createContext(null);
 export const WaitingRoomProvider = ({ children }) => {
   const { callObject } = useCallState();
   const [waitingParticipants, setWaitingParticipants] = useState([]);
-  const [multipleWaiting, setMultipleWaiting] = useState();
   const [showModal, setShowModal] = useState(false);
 
   const handleWaitingParticipantEvent = useCallback(() => {
@@ -32,9 +32,12 @@ export const WaitingRoomProvider = ({ children }) => {
         };
       })
     );
-    setMultipleWaiting(waiting.length > 1);
   }, [callObject]);
 
+  const multipleWaiting = useMemo(() => waitingParticipants.length > 1, [
+    waitingParticipants,
+  ]);
+
   useEffect(() => {
     if (waitingParticipants.length === 0) {
       setShowModal(false);