diff --git a/src/components/views/room_settings/UrlPreviewSettings.tsx b/src/components/views/room_settings/UrlPreviewSettings.tsx index 55f01d572ba..3690f602abd 100644 --- a/src/components/views/room_settings/UrlPreviewSettings.tsx +++ b/src/components/views/room_settings/UrlPreviewSettings.tsx @@ -37,23 +37,26 @@ interface UrlPreviewSettingsProps { export function UrlPreviewSettings({ room }: UrlPreviewSettingsProps): JSX.Element { const { roomId } = room; const matrixClient = useMatrixClientContext(); - const isEncrypted = Boolean(useIsEncrypted(matrixClient, room)); - const previewsForRoomAccount = // in an e2ee room we use a special key to enforce per-room opt-in - ( - - ); + const isEncrypted = useIsEncrypted(matrixClient, room); + const isLoading = isEncrypted === null; return ( } + description={!isLoading && } > - - {previewsForRoomAccount} + {isLoading ? ( + _t("common|loading") + ) : ( + <> + + + + )} ); } diff --git a/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx b/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx index 371fef9dfcc..cbd5410599a 100644 --- a/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx +++ b/test/unit-tests/components/views/room_settings/UrlPreviewSettings-test.tsx @@ -33,9 +33,17 @@ describe("UrlPreviewSettings", () => { return render(, withClientContextRenderOptions(client)); } + it("should display the correct preview when the setting is in a loading state", () => { + jest.spyOn(client, "getCrypto").mockReturnValue(undefined); + const { asFragment } = renderComponent(); + expect(screen.getByText("URL Previews")).toBeInTheDocument(); + + expect(asFragment()).toMatchSnapshot(); + }); + it("should display the correct preview when the room is encrypted and the url preview is enabled", async () => { jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true); - jest.spyOn(SettingsStore, "getValue").mockReturnValue(true); + jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true); const { asFragment } = renderComponent(); await waitFor(() => { diff --git a/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap b/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap index 2bbdcb6f21f..f9b10357ee2 100644 --- a/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap +++ b/test/unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap @@ -201,3 +201,22 @@ exports[`UrlPreviewSettings should display the correct preview when the room is `; + +exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = ` + +
+ + URL Previews + +
+ Loading… +
+
+
+`;