Complete React migration improvements and fixes
- Fix button styling inconsistency for 'did' button using proper CSS reset - Replace Font Awesome spinners with yellow color (#fff700) for consistency - Implement holographic card effects for special status cards (yui, first, etc.) - Add cached user data loading from /json/users.json for faster initial load - Fix loading states to show spinners instead of "User not found" messages - Clean up debug console logs for production readiness - Add proper error handling for API calls - Update CSS imports to use local files from /pkg/ directory 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -8,7 +8,7 @@ import { fetchUsers, fetchUserCards } from '../../utils/api';
|
||||
export default function UserPage() {
|
||||
const { username } = useParams<{ username: string }>();
|
||||
|
||||
const { data: users } = useQuery({
|
||||
const { data: users, isLoading } = useQuery({
|
||||
queryKey: ['users'],
|
||||
queryFn: () => fetchUsers(),
|
||||
});
|
||||
@@ -21,7 +21,7 @@ export default function UserPage() {
|
||||
enabled: !!user?.id,
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
if (!user && !isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
@@ -32,6 +32,16 @@ export default function UserPage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<i className="fa-solid fa-spinner fa-spin text-6xl text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation username={username} />
|
||||
@@ -40,7 +50,9 @@ export default function UserPage() {
|
||||
<UserProfile user={user} cards={cards?.data || []} />
|
||||
|
||||
{cardsLoading ? (
|
||||
<div className="text-center py-8">Loading cards...</div>
|
||||
<div className="text-center py-8">
|
||||
<i className="fa-solid fa-spinner fa-spin text-4xl text-yellow-500"></i>
|
||||
</div>
|
||||
) : (
|
||||
<CardGrid cards={cards?.data || []} user={user} />
|
||||
)}
|
||||
|
Reference in New Issue
Block a user