From 5a3671776eed04a5754dd1614ffdc2cd2f88e4c9 Mon Sep 17 00:00:00 2001
From: Charles Vien <charles.v@posthog.com>
Date: Tue, 30 Jun 2026 14:21:37 -0700
Subject: [PATCH] show skeleton while release notes load

---
 .../src/features/updates/UpdateAvailableModal.tsx   | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/features/updates/UpdateAvailableModal.tsx b/packages/ui/src/features/updates/UpdateAvailableModal.tsx
index 73be8298af..c70b70a0c7 100644
--- a/packages/ui/src/features/updates/UpdateAvailableModal.tsx
+++ b/packages/ui/src/features/updates/UpdateAvailableModal.tsx
@@ -1,6 +1,5 @@
 import { X } from "@phosphor-icons/react";
 import { useHostTRPC } from "@posthog/host-router/react";
-import { MarkdownRenderer } from "@posthog/ui/features/editor/components/MarkdownRenderer";
 import { ReleaseNotesSections } from "@posthog/ui/features/updates/ReleaseNotesSections";
 import { parseReleaseNotes } from "@posthog/ui/features/updates/releaseNotes";
 import { useUpdateModalStore } from "@posthog/ui/features/updates/updateModalStore";
@@ -63,7 +62,7 @@ export function UpdateAvailableModal() {
   const downloadMutation = useMutation(
     hostTRPC.updates.download.mutationOptions(),
   );
-  const { data: releasesData, isLoading: isLoadingReleases } = useQuery({
+  const { data: releasesData, isPending: isPendingReleases } = useQuery({
     ...hostTRPC.githubReleases.list.queryOptions(),
     enabled: isOpen,
   });
@@ -115,7 +114,7 @@ export function UpdateAvailableModal() {
             </Dialog.Close>
           </Flex>
 
-          {hasParsedNotes || rawNotes || isLoadingReleases ? (
+          {hasParsedNotes || isPendingReleases ? (
             <Flex direction="column" gap="2">
               <Text
                 size="1"
@@ -125,18 +124,14 @@ export function UpdateAvailableModal() {
               >
                 Release notes
               </Text>
-              {hasParsedNotes || rawNotes ? (
+              {hasParsedNotes && parsedNotes ? (
                 <ScrollArea
                   type="auto"
                   scrollbars="vertical"
                   style={{ maxHeight: 240 }}
                 >
                   <div className="pr-3">
-                    {hasParsedNotes && parsedNotes ? (
-                      <ReleaseNotesSections notes={parsedNotes} />
-                    ) : rawNotes ? (
-                      <MarkdownRenderer content={rawNotes} />
-                    ) : null}
+                    <ReleaseNotesSections notes={parsedNotes} />
                   </div>
                 </ScrollArea>
               ) : (