From 6037a0dc83199a0fe75ad8c7192839201a817bea Mon Sep 17 00:00:00 2001
From: Aditya Vaish <adityavaish846@gmail.com>
Date: Thu, 16 Oct 2025 10:33:51 +0530
Subject: [PATCH] Fix React component loading state and unique ID issues

- Fix loading state: Initialize loading=true when searchSpaceId changes, await all fetch calls with Promise.all, and clear loading in finally block
- Fix unique ID lint issue: Replace static 'is_active' ID with React useId() generated stable ID
- Import useId hook and generate isActiveSwitchId for Switch component and Label
- Ensure loading spinner properly clears whether requests succeed or fail
- Make component more accessible with proper unique IDs
---
 .../connectors/schedules/page.tsx              | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/schedules/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/schedules/page.tsx
index 5bb34159e..09639989b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/schedules/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/schedules/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useId } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -77,6 +77,7 @@ export default function ConnectorSchedulesPage({
 }: {
   params: Promise<{ search_space_id: string }>;
 }) {
+  const isActiveSwitchId = useId();
   const [searchSpaceId, setSearchSpaceId] = useState<string>("");
   const [schedules, setSchedules] = useState<ConnectorSchedule[]>([]);
   const [connectors, setConnectors] = useState<Connector[]>([]);
@@ -104,9 +105,14 @@ export default function ConnectorSchedulesPage({
 
   useEffect(() => {
     if (searchSpaceId) {
-      fetchSchedules();
-      fetchConnectors();
-      fetchSchedulerStatus();
+      setLoading(true);
+      Promise.all([
+        fetchSchedules(),
+        fetchConnectors(),
+        fetchSchedulerStatus()
+      ]).finally(() => {
+        setLoading(false);
+      });
     }
   }, [searchSpaceId]);
 
@@ -410,11 +416,11 @@ export default function ConnectorSchedulesPage({
 
               <div className="flex items-center space-x-2">
                 <Switch
-                  id="is_active"
+                  id={isActiveSwitchId}
                   checked={newSchedule.is_active}
                   onCheckedChange={(checked) => setNewSchedule({ ...newSchedule, is_active: checked })}
                 />
-                <Label htmlFor="is_active">Active</Label>
+                <Label htmlFor={isActiveSwitchId}>Active</Label>
               </div>
 
               <div className="flex justify-end space-x-2">