Fix "No Station Configured" warning flash during page load (#127)

* Initial plan

* Fix "No Station Configured" warning flash during page load

Co-authored-by: patrickrb <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: patrickrb <[email protected]>

Author: Copilot

src/app/new-contact/page.tsx

@@ -22,6 +22,7 @@ interface Station {
 
 export default function NewContactPage() {
   const [stations, setStations] = useState<Station[]>([]);
+  const [stationsLoading, setStationsLoading] = useState(true);
   const [selectedStationId, setSelectedStationId] = useState<string>('');
   const [isLiveLogging, setIsLiveLogging] = useState(false);
   const [formData, setFormData] = useState({
@@ -93,6 +94,7 @@ export default function NewContactPage() {
 
   const fetchStations = async () => {
     try {
+      setStationsLoading(true);
       const response = await fetch('/api/stations');
       if (response.ok) {
         const data = await response.json();
@@ -106,6 +108,8 @@ export default function NewContactPage() {
       }
     } catch {
       // Silent error handling for stations fetch
+    } finally {
+      setStationsLoading(false);
     }
   };
 
@@ -321,7 +325,7 @@ export default function NewContactPage() {
                 )}
 
                 {/* No stations warning */}
-                {stations.length === 0 && (
+                {!stationsLoading && stations.length === 0 && (
                   <div className="bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                     <div className="flex items-start">
                       <AlertCircle className="h-5 w-5 text-yellow-600 dark:text-yellow-500 mt-0.5 mr-3" />

tests/contact-management.spec.ts

@@ -1,6 +1,42 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('Contact Management Pages', () => {
+  test('new contact page should not show station warning during loading', async ({ page }) => {
+    // Track if the warning appears during page load
+    let warningAppeared = false;
+    
+    // Monitor for the "No Station Configured" warning
+    page.on('domcontentloaded', async () => {
+      try {
+        // Check if warning is visible immediately after DOM content loaded
+        const warning = page.locator('text=No Station Configured');
+        if (await warning.isVisible({ timeout: 100 })) {
+          warningAppeared = true;
+        }
+      } catch {
+        // Warning not found, which is good
+      }
+    });
+    
+    // Navigate to the new contact page
+    const response = await page.goto('/new-contact');
+    
+    // Check that the response is valid
+    if (response?.status()) {
+      expect(response.status()).toBeLessThan(500);
+    }
+    
+    // Wait a moment for any initial rendering and API calls
+    await page.waitForTimeout(1000);
+    
+    // The warning should not have appeared during the initial loading phase
+    expect(warningAppeared).toBe(false);
+    
+    // Check that we're on the new contact page or redirected appropriately
+    const url = page.url();
+    expect(url).toMatch(/(new-contact|install|login)/);
+  });
+
   test('new contact page should load correctly', async ({ page }) => {
     // The page should load without server errors
     const response = await page.goto('/new-contact');