Cursor — IDE Component Study

Explorer ⋯ ⊕

web-app

▾src

▾components

⟨⟩UserCard.tsx

⟨⟩Button.tsx

#theme.css

▸hooks

▸lib

⟨⟩App.tsx

⟨⟩main.tsx

▸public

{}package.json

{}tsconfig.json

MREADME.md

⚙vite.config.ts

⟨⟩ UserCard.tsx ×

⟨⟩ Button.tsx ×

# theme.css ×

⋯

// UserCard — loading + error statesimport { useEffect, useState } from "react";import { fetchUser } from "@/lib/api";import { Avatar } from "./Avatar";import { Skeleton, ErrorState } from "./ui";interface UserCardProps { userId: string; onSelect?: (user: User) => void;}export function UserCard({ userId, onSelect }: UserCardProps) { const [user, setUser] = useState<User | null>(null); const [loading, setLoading] = useState(true); const [error, setError] = useState<string | null>(null); useEffect(() => { let cancelled = false; setLoading(true); fetchUser(userId) .then((u) => { if (cancelled) return; setUser(u); setError(null); }) .catch((e) => setError(e.message)) .finally(() => setLoading(false)); return () => { cancelled = true }; }, [userId]); if (loading) return <Skeleton lines={3} />; if (error) return <ErrorState msg={error} />; if (!user) return null; return ( <div className="user-card" onClick={() => onSelect?.(user)}> <Avatar src={user.avatar} alt={user.name} /> <div className="info"> <h3>{user.name>}h3> <p className="bio">{user.bio>}p> div> div> );}export const UserCardMemo = memo(UserCard);

✦ Chat ▾

⊕ ⋯

Can you add a loading skeleton to the UserCard component and handle the error state?

✦

Here's the updated UserCard with a skeleton loader and error boundary. I added a Skeleton component and a third state for failed requests.

UserCard.tsx 📋+

const [error, setError] = useState(null);

useEffect(() => {
  fetchUser(userId)
    .then(setUser)
    .catch(setError)
    .finally(() => setLoading(false));
}, [userId]);

↻ Retry 👍 👎 📋 Copy

Ask, edit, or chat about your code…

@ Codebase + Add context

↑