use pendingUpdateCount rather, so we don't show multiple spinners

This commit is contained in:
Bruno Windels 2020-03-04 16:58:04 +01:00
parent 29af8add5d
commit afc7273d10

View file

@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, {useCallback, useMemo, useState, useEffect, useContext} from 'react'; import React, {useCallback, useMemo, useState, useEffect, useContext, useRef} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import {Group, RoomMember, User} from 'matrix-js-sdk'; import {Group, RoomMember, User} from 'matrix-js-sdk';
@ -136,25 +136,28 @@ function useIsEncrypted(cli, room) {
return isEncrypted; return isEncrypted;
} }
function useHasCrossSigningKeys(cli, member, canVerify) { function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
const [waitingForCrossSigningKeys, setWaitingForCrossSigningKeys] = useState(false); // use a ref to setUpdating because we don't want to rerun
const [hasCrossSigningKeys, setHasCrossSigningKeys] = useState(false); // the useAsyncMemo hook when it changes.
const updatingRef = useRef();
useEffect(() => { useEffect(() => {
if (canVerify) { updatingRef.current = setUpdating;
setWaitingForCrossSigningKeys(true); }, [setUpdating]);
(async () => {
return useAsyncMemo(async () => {
if (!canVerify) {
return false;
}
updatingRef.current(true);
try { try {
await cli.downloadKeys([member.userId]); await cli.downloadKeys([member.userId]);
const xsi = cli.getStoredCrossSigningForUser(member.userId); const xsi = cli.getStoredCrossSigningForUser(member.userId);
const key = xsi && xsi.getId(); const key = xsi && xsi.getId();
setHasCrossSigningKeys(!!key); return !!key;
} finally { } finally {
setWaitingForCrossSigningKeys(false); updatingRef.current(false);
} }
})(); }, [cli, member, canVerify], false);
}
}, [canVerify, cli, member]);
return {waitingForCrossSigningKeys, hasCrossSigningKeys};
} }
async function verifyDevice(userId, device) { async function verifyDevice(userId, device) {
@ -1353,20 +1356,18 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
homeserverSupportsCrossSigning && homeserverSupportsCrossSigning &&
isRoomEncrypted && !userVerified && !isMe; isRoomEncrypted && !userVerified && !isMe;
const {hasCrossSigningKeys, waitingForCrossSigningKeys} = const setUpdating = useCallback((updating) => {
useHasCrossSigningKeys(cli, member, canVerify); setPendingUpdateCount(pendingUpdateCount + (updating ? 1 : -1));
}, [setPendingUpdateCount, pendingUpdateCount]);
const hasCrossSigningKeys =
useHasCrossSigningKeys(cli, member, canVerify, setUpdating );
if (canVerify) { if (canVerify && hasCrossSigningKeys) {
if (hasCrossSigningKeys) {
verifyButton = ( verifyButton = (
<AccessibleButton className="mx_UserInfo_field" onClick={() => verifyUser(member)}> <AccessibleButton className="mx_UserInfo_field" onClick={() => verifyUser(member)}>
{_t("Verify")} {_t("Verify")}
</AccessibleButton> </AccessibleButton>
); );
} else if (waitingForCrossSigningKeys) {
const Spinner = sdk.getComponent("elements.Spinner");
verifyButton = <Spinner />;
}
} }
let devicesSection; let devicesSection;