From 555d997e34a37f5af14a41fa3565bf14f425f170 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Mar 2026 18:53:23 +0200
Subject: [PATCH] client/about dialog: show the dialog only after the required
 information is ready

---
 apps/client/src/widgets/dialogs/about.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx
index 69783e198c..d47e8167a4 100644
--- a/apps/client/src/widgets/dialogs/about.tsx
+++ b/apps/client/src/widgets/dialogs/about.tsx
@@ -14,14 +14,21 @@ import { Trans } from "react-i18next";
 import type React from "react";
 import icon from "../../assets/icon.svg";
 import iconAlt from "../../assets/icon-alt.svg";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
     const [shown, setShown] = useState(false);
     const [isNightly, setNightly] = useState(false);
 
-    useTriliumEvent("openAboutDialog", () => setShown(true));
+    const onLoad = useCallback(async () => {
+        if (!appInfo) {
+            setAppInfo(await server.get<AppInfo>("app-info"));
+        }
+        setShown(true);
+    }, []);
+
+    useTriliumEvent("openAboutDialog", onLoad);
 
     useEffect(() => {
         setNightly(!!appInfo?.appVersion.includes("test"));
@@ -31,10 +38,6 @@ export default function AboutDialog() {
         <Modal className="about-dialog"
             size="md"
             show={shown}
-            onShown={async () => {
-                const appInfo = await server.get<AppInfo>("app-info");
-                setAppInfo(appInfo);
-            }}
             onHidden={() => setShown(false)}
         >
            <div className="about-dialog-content">