Fixed loading issue of user verification in user info panel

[kanchan-gangwar]

Issue Summary

Changes are done to fix loading issue of user verification in user info panel. Currently, if you select any user from members list of a room, user info panel opens up where we get an option to verify user.

For certain users in the list verify user option doesn't shows up instead just a spinner keeps on loading. Certain scenarios for which this could happen are -

1. If the user selected from the list is self.
2. If the user hasn't logged in even once.
3. If the user doesn't has any verified device yet.

### Changes

Changes are done to show "user verification unavailable" for the scenarios mentioned above instead of showing spinner loading. For good user experience it's better to show some message instead of just showing spinner and keep on loading.

Below are the screenshots of before and after the code changes -

Before the changes

After the changes

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ kanchan-gangwar
❌ EXI-Gangwar, Kanchan

---

EXI-Gangwar, Kanchan seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[MidhunSureshR]

👋, Thanks for the detailed description but I don't think this is right.

You removed two conditions from canVerify relating to devices and moved isMe out of that variable to be passed separately to the view. I'm not sure what this accomplishes?

We should have a step by step repro of the issue first because I can't really repro the spinner issue on my end.

[kanchan-gangwar]

To reproduce this issue follow below steps -

1. Open member info panel of any room.
2. Click on your user name and open your user info.
3. You will notice spinner showing in the header section

I have mentioned scenarios for which this can happen in PR.

[MidhunSureshR]

No, I don't see a spinner based on your instructions.

[MidhunSureshR]

Looking at the code, I can see that this can happen if your device isn't verified.
I think just returning false here instead of undefined should be good enough?

[kanchan-gangwar]

In that case, spinner will not be shown instead user will get the message "user verification unavailable" and as soon as CrossSigninKeys are fetched accordingly "Verify User" link will be shown.

[MidhunSureshR]

Right, the spinner will not be shown which is what we want. Verify link button would also not be shown because canVerify would be false (because of the && !isMe).

Anyhow, I think it's more appropriate to render nothing in that section for own user so I would suggest doing the following:

1. UserInfoHeaderView component has if(vm.isMe) return null; so that it renders nothing for own user.
2. Remove that return statement.

Also need to make sure that the failing checks passes.

[kanchan-gangwar]

This will not always work. For example, let say we got hasCrossSigningKeys as true but devices list is still not retrieve and it is empty. In this case user will see spinner first then user verification unavailable message then verify user link once device list is retrieved.

Since user will have CrossSigninKeys only when he is using any device, I would suggest we go with -

1. UserInfoHeaderView component has if(vm.isMe) return null; so that it renders nothing for own user.
2. Remove that return statement.
3. const canVerify =
   hasUserVerificationStatus &&
   homeserverSupportsCrossSigning &&
   !isUserVerified &&
   !isMe;