diff --git a/src/pages/user/ProfilePage.tsx b/src/pages/user/ProfilePage.tsx
index 4e8cf15..19c1333 100644
--- a/src/pages/user/ProfilePage.tsx
+++ b/src/pages/user/ProfilePage.tsx
@@ -6,12 +6,70 @@ import { Label } from "@/components/ui/label";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
import { useAuth } from "@/contexts/AuthContext";
import { api, Organization, ApiError } from "@/lib/api";
import { toast } from "@/hooks/use-toast";
+function ProfileSkeleton() {
+ return (
+
+
+
+
+
+
+
+ {/* Personal Information Skeleton */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Email Skeleton */}
+
+
+
+
+
+
+
+
+
+
+ {/* Organizations Skeleton */}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
export default function ProfilePage() {
- const { user, refreshUser } = useAuth();
+ const { user, isLoading: authLoading, refreshUser } = useAuth();
const [name, setName] = useState("");
const [isEditing, setIsEditing] = useState(false);
const [isSaving, setIsSaving] = useState(false);
@@ -99,12 +157,8 @@ export default function ProfilePage() {
setIsEditing(false);
};
- if (!user) {
- return (
-
-
-
- );
+ if (authLoading || !user) {
+ return ;
}
return (
@@ -209,8 +263,9 @@ export default function ProfilePage() {
{orgsLoading ? (
-
-
+
+
+
) : organizations.length === 0 ? (