fix: add stale-request guard to useStickerWall hook

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/hooks/useStickerWall.js

@@ -21,32 +21,6 @@ export function useStickerWall(sessionId) {
     setImageUrl(url);
   }, [revokeUrl]);
 
-  const fetchWall = useCallback(async (id) => {
-    setLoading(true);
-    setError(false);
-    try {
-      const res = await api.get(`/stickerwalls/${id}`, { responseType: 'blob' });
-      setBlobUrl(res.data);
-    } catch (err) {
-      if (err.response?.status === 404) {
-        try {
-          const renderRes = await api.post(`/stickerwalls/${id}/render`, null, { responseType: 'blob' });
-          setBlobUrl(renderRes.data);
-        } catch (renderErr) {
-          revokeUrl();
-          setImageUrl(null);
-          setError(true);
-        }
-      } else {
-        revokeUrl();
-        setImageUrl(null);
-        setError(true);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }, [setBlobUrl, revokeUrl]);
-
   const refresh = useCallback(async () => {
     if (!sessionId) return;
     setLoading(true);
@@ -62,15 +36,54 @@ export function useStickerWall(sessionId) {
   }, [sessionId, setBlobUrl]);
 
   useEffect(() => {
-    if (sessionId) {
+    let stale = false;
-      fetchWall(sessionId);
+
-    } else {
+    if (!sessionId) {
       revokeUrl();
       setImageUrl(null);
       setError(false);
-    }
       return revokeUrl;
-  }, [sessionId, fetchWall, revokeUrl]);
+    }
+
+    const fetchWall = async (id) => {
+      setLoading(true);
+      setError(false);
+      try {
+        const res = await api.get(`/stickerwalls/${id}`, { responseType: 'blob' });
+        if (stale) return;
+        setBlobUrl(res.data);
+      } catch (err) {
+        if (stale) return;
+        if (err.response?.status === 404) {
+          try {
+            const renderRes = await api.post(`/stickerwalls/${id}/render`, null, { responseType: 'blob' });
+            if (stale) return;
+            setBlobUrl(renderRes.data);
+          } catch {
+            if (stale) return;
+            revokeUrl();
+            setImageUrl(null);
+            setError(true);
+          }
+        } else {
+          revokeUrl();
+          setImageUrl(null);
+          setError(true);
+        }
+      } finally {
+        if (!stale) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchWall(sessionId);
+
+    return () => {
+      stale = true;
+      revokeUrl();
+    };
+  }, [sessionId, setBlobUrl, revokeUrl]);
 
   return { imageUrl, loading, error, refresh };
 }