fix: resolve AI insights loading, clean up debug logs, add favicon

AngeloPrabajith · AngeloPrabajith · commit 04a86f9e1f3e · 2026-03-28T12:30:19.000+05:30
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -9,7 +9,9 @@
       "Bash(npx eslint:*)",
       "Bash(ls /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/eslint.config.*)",
       "Bash(ls -la /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/eslint*)",
-      "Bash(npm test:*)"
+      "Bash(npm test:*)",
+      "Bash(grep -n \"console.log\\\\|console.error\\\\|console.warn\" /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/web/app/api/**/*.ts)",
+      "Bash(grep -r console. /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/web --include=*.tsx --include=*.ts)"
     ]
   }
 }
diff --git a/assets/results-page.jpeg b/assets/results-page.jpeg
diff --git a/assets/results-page.png b/assets/results-page.png
diff --git a/docs/architecture.md b/docs/architecture.md
@@ -61,6 +61,7 @@ Key design decisions:
 | Render Blocking | `render-blocking` | Scripts in `<head>` without async/defer |
 | Image Optimization | `image-optimization` | Large images, legacy formats |
 | Third-Party Impact | `third-party-impact` | External script weight |
+| Resource Hints | `resource-hints` | Missing preconnect/preload for third-party domains |
 
 ### Detectors (`src/detectors/`)
 
diff --git a/web/app/api/ai-insights/route.ts b/web/app/api/ai-insights/route.ts
@@ -2,6 +2,8 @@ import { NextRequest, NextResponse } from "next/server";
 import Anthropic from "@anthropic-ai/sdk";
 import type { AnalyzeOutput } from "@analyzer";
 
+export const maxDuration = 30;
+
 const client = new Anthropic();
 
 export async function POST(req: NextRequest) {
diff --git a/web/components/AIInsights.tsx b/web/components/AIInsights.tsx
@@ -141,36 +141,52 @@ export function AIInsights({ analyzeOutput }: AIInsightsProps) {
   const [data, setData] = useState<AIInsightsData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  // Use a ref to prevent re-fetching when the parent re-renders with the same data
   const fetchedRef = useRef(false);
 
   useEffect(() => {
-    if (fetchedRef.current) return;
-    fetchedRef.current = true;
-
+    // In React Strict Mode, the first effect run is cleaned up immediately.
+    // Reset the ref on cleanup so the second run can actually fetch.
     let cancelled = false;
 
+    // Skip if we already have data (prevents re-fetching on parent re-renders)
+    if (fetchedRef.current) return;
+
     async function fetchInsights() {
       setLoading(true);
       setError(null);
 
       try {
+        // Send only what the AI endpoint needs (exclude waterfall/pages to reduce payload)
+        const { waterfall: _w, pages: _p, ...payload } = analyzeOutput;
+
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 30000);
+
         const res = await fetch("/api/ai-insights", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(analyzeOutput),
+          body: JSON.stringify(payload),
+          signal: controller.signal,
         });
 
+        clearTimeout(timeout);
+
         if (!res.ok) {
           const body = await res.json().catch(() => ({}));
           throw new Error(body.error ?? `HTTP ${res.status}`);
         }
 
         const json = await res.json();
-        if (!cancelled) setData(json);
+        if (!cancelled) {
+          fetchedRef.current = true;
+          setData(json);
+        }
       } catch (err) {
         if (!cancelled) {
-          setError(err instanceof Error ? err.message : "AI request failed");
+          const msg = err instanceof Error
+            ? err.name === "AbortError" ? "AI request timed out" : err.message
+            : "AI request failed";
+          setError(msg);
         }
       } finally {
         if (!cancelled) setLoading(false);

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,9 @@`
`9`	`9`	`"Bash(npx eslint:*)",`
`10`	`10`	`"Bash(ls /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/eslint.config.*)",`
`11`	`11`	`"Bash(ls -la /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/eslint*)",`
`12`		`- "Bash(npm test:*)"`
	`12`	`+ "Bash(npm test:*)",`
	`13`	`+ "Bash(grep -n \"console.log\\\\\|console.error\\\\\|console.warn\" /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/web/app/api/*/.ts)",`
	`14`	`+ "Bash(grep -r console. /Users/angeloprabajith/Home/GitHub/shopify-performance-analyzer/web --include=.tsx --include=.ts)"`
`13`	`15`	`]`
`14`	`16`	`}`
`15`	`17`	`}`