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 () => {
try { return useAsyncMemo(async () => {
await cli.downloadKeys([member.userId]); if (!canVerify) {
const xsi = cli.getStoredCrossSigningForUser(member.userId); return false;
const key = xsi && xsi.getId();
setHasCrossSigningKeys(!!key);
} finally {
setWaitingForCrossSigningKeys(false);
}
})();
} }
}, [canVerify, cli, member]); updatingRef.current(true);
return {waitingForCrossSigningKeys, hasCrossSigningKeys}; try {
await cli.downloadKeys([member.userId]);
const xsi = cli.getStoredCrossSigningForUser(member.userId);
const key = xsi && xsi.getId();
return !!key;
} finally {
updatingRef.current(false);
}
}, [cli, member, canVerify], false);
} }
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;