mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-22 23:31:12 +02:00
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:
parent
2facfd7a8d
commit
6037a0dc83
1 changed files with 12 additions and 6 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue