diff --git a/src/components/AIRoadmap/AIRoadmap.tsx b/src/components/AIRoadmap/AIRoadmap.tsx
index abb78b093..3e3e3e496 100644
--- a/src/components/AIRoadmap/AIRoadmap.tsx
+++ b/src/components/AIRoadmap/AIRoadmap.tsx
@@ -23,7 +23,9 @@ export function AIRoadmap(props: AIRoadmapProps) {
   const toast = useToast();
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
   const [isRegenerating, setIsRegenerating] = useState(false);
-  const [regeneratedSvgHtml, setRegeneratedSvgHtml] = useState('');
+  const [regeneratedSvgHtml, setRegeneratedSvgHtml] = useState<string | null>(
+    null,
+  );
 
   // only fetch the guide if the guideSlug is provided
   // otherwise we are still generating the guide
@@ -35,6 +37,7 @@ export function AIRoadmap(props: AIRoadmapProps) {
   const handleRegenerate = async (prompt?: string) => {
     flushSync(() => {
       setIsRegenerating(true);
+      setRegeneratedSvgHtml(null);
     });
 
     queryClient.cancelQueries(aiRoadmapOptions(roadmapSlug));
@@ -50,6 +53,7 @@ export function AIRoadmap(props: AIRoadmapProps) {
       };
     });
 
+    setRegeneratedSvgHtml('');
     await generateAIRoadmap({
       roadmapSlug: aiRoadmap?.slug || '',
       term: aiRoadmap?.term || '',
@@ -81,7 +85,7 @@ export function AIRoadmap(props: AIRoadmapProps) {
       <div className="grow overflow-y-auto p-4 pt-0">
         {roadmapSlug && (
           <AIRoadmapContent
-            svgHtml={regeneratedSvgHtml || aiRoadmap?.svgHtml || ''}
+            svgHtml={regeneratedSvgHtml ?? aiRoadmap?.svgHtml ?? ''}
             isLoading={isLoadingBySlug || isRegenerating}
             onRegenerate={handleRegenerate}
             roadmapSlug={roadmapSlug}
diff --git a/src/components/AIRoadmap/AIRoadmapContent.tsx b/src/components/AIRoadmap/AIRoadmapContent.tsx
index 11619c7d5..6d98447f2 100644
--- a/src/components/AIRoadmap/AIRoadmapContent.tsx
+++ b/src/components/AIRoadmap/AIRoadmapContent.tsx
@@ -25,7 +25,7 @@ export function AIRoadmapContent(props: AIRoadmapContentProps) {
         dangerouslySetInnerHTML={{ __html: svgHtml }}
       />
 
-      {isLoading && (
+      {isLoading && !svgHtml && (
         <div className="absolute inset-0 flex items-center justify-center">
           <LoadingChip message="Please wait..." />
         </div>