diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index abe54b355e..65519270b5 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -142,7 +142,7 @@ function useIsEncrypted(cli, room) { function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) { return useAsyncMemo(async () => { if (!canVerify) { - return false; + return undefined; } setUpdating(true); try { @@ -153,7 +153,7 @@ function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) { } finally { setUpdating(false); } - }, [cli, member, canVerify], false); + }, [cli, member, canVerify], undefined); } function DeviceItem({userId, device}) { @@ -1307,18 +1307,28 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => { const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member, canVerify, setUpdating ); + const showDeviceListSpinner = devices === undefined; if (canVerify) { - verifyButton = ( - { - if (hasCrossSigningKeys) { - verifyUser(member); - } else { - legacyVerifyUser(member); - } - }}> - {_t("Verify")} - - ); + if (hasCrossSigningKeys !== undefined) { + // Note: mx_UserInfo_verifyButton is for the end-to-end tests + verifyButton = ( + { + if (hasCrossSigningKeys) { + verifyUser(member); + } else { + legacyVerifyUser(member); + } + }}> + {_t("Verify")} + + ); + } else if (!showDeviceListSpinner) { + // HACK: only show a spinner if the device section spinner is not shown, + // to avoid showing a double spinner + // We should ask for a design that includes all the different loading states here + const Spinner = sdk.getComponent('elements.Spinner'); + verifyButton = ; + } } const securitySection = ( @@ -1327,7 +1337,7 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {

{ text }

{ verifyButton }