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`] = `
+
+
+
+`;