Handle loading state

element-hq · Nov 18, 2024 · 625ddb8 · 625ddb8
1 parent 9a3c410
commit 625ddb8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git 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
-        (
-            <SettingsFlag
-                name={isEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled"}
-                level={SettingLevel.ROOM_DEVICE}
-                roomId={roomId}
-            />
-        );
+    const isEncrypted = useIsEncrypted(matrixClient, room);
+    const isLoading = isEncrypted === null;
 
     return (
         <SettingsFieldset
             legend={_t("room_settings|general|url_previews_section")}
-            description={<Description isEncrypted={isEncrypted} />}
+            description={!isLoading && <Description isEncrypted={isEncrypted} />}
         >
-            <PreviewsForRoom isEncrypted={isEncrypted} roomId={roomId} />
-            {previewsForRoomAccount}
+            {isLoading ? (
+                _t("common|loading")
+            ) : (
+                <>
+                    <PreviewsForRoom isEncrypted={isEncrypted} roomId={roomId} />
+                    <SettingsFlag
+                        name={isEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled"}
+                        level={SettingLevel.ROOM_DEVICE}
+                        roomId={roomId}
+                    />
+                </>
+            )}
         </SettingsFieldset>
     );
 }

diff --git 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(<UrlPreviewSettings room={room} />, 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/.../unit-tests/components/views/room_settings/__snapshots__/UrlPreviewSettings-test.tsx.snap b/.../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
   </fieldset>
 </DocumentFragment>
 `;
+
+exports[`UrlPreviewSettings should display the correct preview when the setting is in a loading state 1`] = `
+<DocumentFragment>
+  <fieldset
+    class="mx_SettingsFieldset"
+  >
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      URL Previews
+    </legend>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
+      Loading…
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;