UserInfo step 3: DevicesSection

Author: richvdh

src/components/views/right_panel/UserInfo.tsx

@@ -242,15 +242,17 @@ function DevicesSection({
 
     const [isExpanded, setExpanded] = useState(false);
 
-    if (loading) {
+    const deviceTrusts = useAsyncMemo(() => {
+        const cryptoApi = cli.getCrypto();
+        if (!cryptoApi) return Promise.resolve(undefined);
+        return Promise.all(devices.map((d) => cryptoApi.getDeviceVerificationStatus(userId, d.deviceId)));
+    }, [cli, userId, devices]);
+
+    if (loading || deviceTrusts === undefined) {
         // still loading
         return <Spinner />;
     }
-    if (devices === null) {
-        return <p>{_t("Unable to load session list")}</p>;
-    }
     const isMe = userId === cli.getUserId();
-    const deviceTrusts = devices.map((d) => cli.checkDeviceTrust(userId, d.deviceId));
 
     let expandSectionDevices: IDevice[] = [];
     const unverifiedDevices: IDevice[] = [];
@@ -268,7 +270,7 @@ function DevicesSection({
             // cross-signing so that other users can then safely trust you.
             // For other people's devices, the more general verified check that
             // includes locally verified devices can be used.
-            const isVerified = isMe ? deviceTrust.isCrossSigningVerified() : deviceTrust.isVerified();
+            const isVerified = deviceTrust && (isMe ? deviceTrust.crossSigningVerified : deviceTrust.isVerified());
 
             if (isVerified) {
                 expandSectionDevices.push(device);

src/i18n/strings/en_EN.json

@@ -2252,7 +2252,6 @@
     "Room settings": "Room settings",
     "Trusted": "Trusted",
     "Not trusted": "Not trusted",
-    "Unable to load session list": "Unable to load session list",
     "%(count)s verified sessions|other": "%(count)s verified sessions",
     "%(count)s verified sessions|one": "1 verified session",
     "Hide verified sessions": "Hide verified sessions",

test/components/views/right_panel/UserInfo-test.tsx

@@ -29,7 +29,7 @@ import {
     DeviceVerificationStatus,
 } from "matrix-js-sdk/src/matrix";
 import { Phase, VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import { DeviceTrustLevel, UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
+import { UserTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { defer } from "matrix-js-sdk/src/utils";
 
@@ -148,7 +148,6 @@ beforeEach(() => {
         currentState: {
             on: jest.fn(),
         },
-        checkDeviceTrust: jest.fn(),
         checkUserTrust: jest.fn(),
         getRoom: jest.fn(),
         credentials: {},
@@ -266,7 +265,6 @@ describe("<UserInfo />", () => {
         beforeEach(() => {
             mockClient.isCryptoEnabled.mockReturnValue(true);
             mockClient.checkUserTrust.mockReturnValue(new UserTrustLevel(false, false, false));
-            mockClient.checkDeviceTrust.mockReturnValue(new DeviceTrustLevel(false, false, false, false));
 
             const device1 = DeviceInfo.fromStorage(
                 {