From 774e2ba67cde56631761b1a58c8bbdb0acae94c6 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 22 Oct 2025 13:45:41 +0200
Subject: [PATCH] fix(reader): clear markdown render on change and add request
 guards to external URL loader to prevent stale content

---
 src/hooks/useExternalUrlLoader.ts | 9 +++++++--
 src/hooks/useMarkdownToHTML.ts    | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useExternalUrlLoader.ts b/src/hooks/useExternalUrlLoader.ts
index 077705fc..a29ab79b 100644
--- a/src/hooks/useExternalUrlLoader.ts
+++ b/src/hooks/useExternalUrlLoader.ts
@@ -49,6 +49,8 @@ export function useExternalUrlLoader({
   setCurrentArticleEventId
 }: UseExternalUrlLoaderProps) {
   const mountedRef = useRef(true)
+  // Track in-flight request to prevent stale updates when switching quickly
+  const currentRequestIdRef = useRef(0)
   
   // Load cached URL-specific highlights from event store
   const urlFilter = useMemo(() => {
@@ -70,6 +72,7 @@ export function useExternalUrlLoader({
     if (!relayPool || !url) return
     
     const loadExternalUrl = async () => {
+      const requestId = ++currentRequestIdRef.current
       if (!mountedRef.current) return
       
       setReaderLoading(true)
@@ -83,6 +86,7 @@ export function useExternalUrlLoader({
         const content = await fetchReadableContent(url)
         
         if (!mountedRef.current) return
+        if (currentRequestIdRef.current !== requestId) return
         
         setReaderContent(content)
         setReaderLoading(false)
@@ -114,6 +118,7 @@ export function useExternalUrlLoader({
               url,
               (highlight) => {
                 if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
                 
                 if (seen.has(highlight.id)) return
                 seen.add(highlight.id)
@@ -131,13 +136,13 @@ export function useExternalUrlLoader({
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          if (mountedRef.current) {
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
             setHighlightsLoading(false)
           }
         }
       } catch (err) {
         console.error('Failed to load external URL:', err)
-        if (mountedRef.current) {
+        if (mountedRef.current && currentRequestIdRef.current === requestId) {
           const filename = getFilenameFromUrl(url)
           setReaderContent({
             title: filename,
diff --git a/src/hooks/useMarkdownToHTML.ts b/src/hooks/useMarkdownToHTML.ts
index 3b7330d8..80b6f1e4 100644
--- a/src/hooks/useMarkdownToHTML.ts
+++ b/src/hooks/useMarkdownToHTML.ts
@@ -20,9 +20,11 @@ export const useMarkdownToHTML = (
   const [processedMarkdown, setProcessedMarkdown] = useState<string>('')
 
   useEffect(() => {
+    // Always clear previous render immediately to avoid showing stale content while processing
+    setRenderedHtml('')
+    setProcessedMarkdown('')
+    
     if (!markdown) {
-      setRenderedHtml('')
-      setProcessedMarkdown('')
       return
     }