diff --git a/custom/shared/components/HairCheck/HairCheck.js b/custom/shared/components/HairCheck/HairCheck.js
index fbb65aa..c57c960 100644
--- a/custom/shared/components/HairCheck/HairCheck.js
+++ b/custom/shared/components/HairCheck/HairCheck.js
@@ -140,6 +140,17 @@ export const HairCheck = () => {
) : (
Waiting for host to grant access
)}
+
);
}, [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);
diff --git a/custom/shared/contexts/WaitingRoomProvider.js b/custom/shared/contexts/WaitingRoomProvider.js
index b99ab51..f6498de 100644
--- a/custom/shared/contexts/WaitingRoomProvider.js
+++ b/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);