fix(ui): add error state handling to API Profiles page

Adds proper error handling when useProfiles() hook fails to fetch data.
Previously, API errors would cause a blank screen as the component had
no error state handling. Now shows a user-friendly error message with
a retry button.

Fixes #125
This commit is contained in:
kaitranntt
2025-12-18 00:20:25 -05:00
parent afe0f66b9f
commit 2e77646d60
+18 -1
View File
@@ -19,6 +19,7 @@ import {
Server,
ExternalLink,
FileJson,
RefreshCw,
} from 'lucide-react';
import { ProfileEditor } from '@/components/profile-editor';
import { ProfileCreateDialog } from '@/components/profile-create-dialog';
@@ -29,7 +30,7 @@ import { cn } from '@/lib/utils';
import { CopyButton } from '@/components/ui/copy-button';
export function ApiPage() {
const { data, isLoading } = useProfiles();
const { data, isLoading, isError, refetch } = useProfiles();
const deleteMutation = useDeleteProfile();
const [selectedProfile, setSelectedProfile] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState('');
@@ -111,6 +112,22 @@ export function ApiPage() {
<ScrollArea className="flex-1">
{isLoading ? (
<div className="p-4 text-sm text-muted-foreground">Loading profiles...</div>
) : isError ? (
<div className="p-4 text-center">
<div className="space-y-3 py-8">
<AlertCircle className="w-12 h-12 mx-auto text-destructive/50" />
<div>
<p className="text-sm font-medium">Failed to load profiles</p>
<p className="text-xs text-muted-foreground mt-1">
Unable to fetch API profiles. Please try again.
</p>
</div>
<Button size="sm" variant="outline" onClick={() => refetch()}>
<RefreshCw className="w-4 h-4 mr-1" />
Retry
</Button>
</div>
</div>
) : filteredProfiles.length === 0 ? (
<div className="p-4 text-center">
{profiles.length === 0 ? (