fix(updates): Prefetch changelog when update is active (#3211)

Author: charlesvien

packages/ui/src/features/updates/UpdateAvailableModal.tsx

@@ -4,6 +4,7 @@ import { ReleaseNotesSections } from "@posthog/ui/features/updates/ReleaseNotesS
 import { parseReleaseNotes } from "@posthog/ui/features/updates/releaseNotes";
 import { useUpdateModalStore } from "@posthog/ui/features/updates/updateModalStore";
 import {
+  useHasActiveUpdate,
   useInstallUpdate,
   useUpdateView,
 } from "@posthog/ui/features/updates/updateStore";
@@ -62,12 +63,13 @@ export function UpdateAvailableModal() {
   const downloadMutation = useMutation(
     hostTRPC.updates.download.mutationOptions(),
   );
+  const prefetchForActiveUpdate = useHasActiveUpdate();
   const targetVersion = version ?? availableVersion;
   const { data: releasesData, isPending: isPendingReleases } = useQuery({
     ...hostTRPC.githubReleases.list.queryOptions(
       targetVersion ? { expectVersion: targetVersion } : undefined,
     ),
-    enabled: isOpen,
+    enabled: isOpen || prefetchForActiveUpdate,
   });
 
   const percent = Math.round(downloadPercent ?? 0);

packages/ui/src/features/updates/WhatsNewModal.tsx

@@ -5,6 +5,7 @@ import {
   groupReleases,
   mergeReleaseNotes,
 } from "@posthog/ui/features/updates/releaseNotes";
+import { useHasActiveUpdate } from "@posthog/ui/features/updates/updateStore";
 import { useWhatsNewStore } from "@posthog/ui/features/updates/whatsNewStore";
 import {
   Badge,
@@ -41,6 +42,7 @@ function ChangelogSkeleton() {
 export function WhatsNewModal() {
   const isOpen = useWhatsNewStore((state) => state.isOpen);
   const close = useWhatsNewStore((state) => state.close);
+  const prefetchForActiveUpdate = useHasActiveUpdate();
   const hostTRPC = useHostTRPC();
   const { data: currentVersion, isError: isVersionError } = useQuery(
     hostTRPC.os.getAppVersion.queryOptions(),
@@ -53,7 +55,7 @@ export function WhatsNewModal() {
     ...hostTRPC.githubReleases.list.queryOptions(
       currentVersion ? { expectVersion: currentVersion } : undefined,
     ),
-    enabled: isOpen && !!currentVersion,
+    enabled: (isOpen || prefetchForActiveUpdate) && !!currentVersion,
   });
   const isError = isVersionError || isReleasesError;
 

packages/ui/src/features/updates/updateStore.ts

@@ -37,6 +37,17 @@ export function useUpdateView(): UpdateView {
   }));
 }
 
+export function useHasActiveUpdate(): boolean {
+  return useStore(
+    updateStore,
+    (state) =>
+      state.status === "available" ||
+      state.status === "downloading" ||
+      state.status === "ready" ||
+      state.status === "installing",
+  );
+}
+
 export function useInstallUpdate(): () => Promise<void> {
   const client = useService<UpdatesClient>(UPDATES_CLIENT);