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
This commit is contained in:
Aditya Vaish 2025-10-16 10:33:51 +05:30
parent 2facfd7a8d
commit 6037a0dc83

View file

@ -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">