From 04ba09ab3bdd9fe83adeb31f8a160215561b47d2 Mon Sep 17 00:00:00 2001
From: Tudor <tudor.sitaru@gmail.com>
Date: Mon, 2 Feb 2026 22:47:37 +0000
Subject: [PATCH] Add loading state and debugging for comparison chart

Added better UX and debugging for the comparison screen:

1. Loading state for chart section
   - Shows "Loading comparison data..." when schools are selected
     but data hasn't loaded yet
   - Provides visual feedback to users

2. Enhanced debugging logs
   - Log URNs being fetched
   - Log API response status
   - Log received comparison data
   - Better error handling with null state on failure

3. Improved conditional rendering
   - Chart shows when data is available
   - Loading message shows when waiting for data
   - Nothing shows when no schools selected

This helps diagnose any API issues and provides better user feedback
during data loading.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../components/ComparisonView.module.css      |  7 ++++++
 nextjs-app/components/ComparisonView.tsx      | 24 +++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/nextjs-app/components/ComparisonView.module.css b/nextjs-app/components/ComparisonView.module.css
index c945f05..cd388d9 100644
--- a/nextjs-app/components/ComparisonView.module.css
+++ b/nextjs-app/components/ComparisonView.module.css
@@ -215,6 +215,13 @@
   position: relative;
 }
 
+.loadingMessage {
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-secondary);
+  font-size: 1rem;
+}
+
 /* Table Section */
 .tableSection {
   background: white;
diff --git a/nextjs-app/components/ComparisonView.tsx b/nextjs-app/components/ComparisonView.tsx
index c4a4cb4..88d7513 100644
--- a/nextjs-app/components/ComparisonView.tsx
+++ b/nextjs-app/components/ComparisonView.tsx
@@ -56,10 +56,20 @@ export function ComparisonView({
     // Fetch comparison data
     if (selectedSchools.length > 0) {
       const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || '/api';
+      console.log('Fetching comparison data for URNs:', urns);
       fetch(`${apiBaseUrl}/compare?urns=${urns}`)
-        .then((res) => res.json())
-        .then((data) => setComparisonData(data.comparison))
-        .catch((err) => console.error('Failed to fetch comparison:', err));
+        .then((res) => {
+          console.log('Comparison API response status:', res.status);
+          return res.json();
+        })
+        .then((data) => {
+          console.log('Comparison data received:', data);
+          setComparisonData(data.comparison);
+        })
+        .catch((err) => {
+          console.error('Failed to fetch comparison:', err);
+          setComparisonData(null);
+        });
     } else {
       setComparisonData(null);
     }
@@ -198,7 +208,7 @@ export function ComparisonView({
       </section>
 
       {/* Comparison Chart */}
-      {comparisonData && Object.keys(comparisonData).length > 0 && (
+      {comparisonData && Object.keys(comparisonData).length > 0 ? (
         <section className={styles.chartSection}>
           <h2 className={styles.sectionTitle}>Performance Over Time</h2>
           <div className={styles.chartContainer}>
@@ -209,7 +219,11 @@ export function ComparisonView({
             />
           </div>
         </section>
-      )}
+      ) : selectedSchools.length > 0 ? (
+        <section className={styles.chartSection}>
+          <div className={styles.loadingMessage}>Loading comparison data...</div>
+        </section>
+      ) : null}
 
       {/* Comparison Table */}
       {comparisonData && Object.keys(comparisonData).length > 0 && years.length > 0 && (