From 1a4006ded16e325139000cfa7d096313addde9c3 Mon Sep 17 00:00:00 2001
From: chuma-beep <wisboynelson123@gmail.com>
Date: Thu, 5 Dec 2024 04:20:30 +0100
Subject: [PATCH]  added skeleton for prifle and fix routing error

---
 app/profile/[id]/page.tsx      | 64 ++++++++++++++++++++++++++++++----
 app/protected/account/page.tsx |  2 ++
 components/Followers.tsx       |  0
 3 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 components/Followers.tsx

diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx
index c3f4f61..f9940f7 100644
--- a/app/profile/[id]/page.tsx
+++ b/app/profile/[id]/page.tsx
@@ -5,11 +5,12 @@ import { useParams } from 'next/navigation';
 import { createClient } from '@/utils/supabase/client';
 import Image from 'next/image';
 import Link from 'next/link';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { CalendarIcon, Heart, MessageCircle } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import BackButton from '@/components/BackButton';
-import { useRouter } from 'next/router'
 
 interface Profile {
   username: string;
@@ -22,7 +23,6 @@ interface Profile {
 interface Post {
   id: number | string;
   title: string;
-  // date: string;
   content: string;
   likes_count: number;
   comments_count: number;
@@ -63,6 +63,21 @@ async function fetchPosts(profileId: string): Promise<Post[]> {
   }));
 }
 
+function ProfileHeaderSkeleton() {
+  return (
+    <div className="p-8 shadow mt-24">
+      <div className="flex flex-col items-center text-center gap-6">
+        <Skeleton circle width={192} height={192} />
+        <Skeleton width={200} height={30} />
+        <Skeleton width={150} />
+        <Skeleton width={250} />
+        <Skeleton width={300} height={20} />
+        <Skeleton width={100} height={40} />
+      </div>
+    </div>
+  );
+}
+
 function ProfileHeader({ profile }: { profile: Profile }) {
   return (
     <div className="p-8 shadow mt-24">
@@ -94,6 +109,39 @@ function ProfileHeader({ profile }: { profile: Profile }) {
   );
 }
 
+function PostListSkeleton() {
+  return (
+    <div className="container mx-auto py-8">
+      <h2 className="text-center text-3xl font-bold mb-8">
+        <Skeleton width={250} />
+      </h2>
+      <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <Card key={index}>
+            <CardHeader>
+              <CardTitle><Skeleton width={200} /></CardTitle>
+              <CardDescription className="flex items-center text-sm text-muted-foreground">
+                <Skeleton width={220} />
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Skeleton count={3} />
+            </CardContent>
+            <CardFooter className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Skeleton width={40} height={20} circle />
+                <Skeleton width={40} />
+                <Skeleton width={40} height={20} circle />
+                <Skeleton width={40} />
+              </div>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function PostList({ posts }: { posts: Post[] }) {
   return (
     <div className="container mx-auto py-8">
@@ -131,13 +179,11 @@ function PostList({ posts }: { posts: Post[] }) {
 }
 
 export default function UserProfile() {
-   const { query } = useRouter()
-  const id = Array.isArray(query.id) ? query.id[0] : query.id;
+  const { id } = useParams();
   const [loading, setLoading] = useState(true);
   const [profile, setProfile] = useState<Profile | null>(null);
   const [posts, setPosts] = useState<Post[]>([]);
 
-
   useEffect(() => {
     if (id) {
       (async () => {
@@ -153,7 +199,13 @@ export default function UserProfile() {
   }, [id]);
 
   if (loading) {
-    return <p className="text-center py-16">Loading...</p>;
+    return (
+      <div>
+        <BackButton />
+        <ProfileHeaderSkeleton />
+        <PostListSkeleton />
+      </div>
+    );
   }
 
   if (!profile) {
diff --git a/app/protected/account/page.tsx b/app/protected/account/page.tsx
index d1963b6..5ca2ced 100644
--- a/app/protected/account/page.tsx
+++ b/app/protected/account/page.tsx
@@ -18,6 +18,7 @@ interface Profile {
   bio: string;
 }
 
+
 const supabase = createClient();
 
 export default function Profile() {
@@ -25,6 +26,7 @@ export default function Profile() {
   const [user, setUser] = useState<User | null>(null);
   const [profile, setProfile] = useState<Profile | null>(null);
   const [loading, setLoading] = useState(true);
+  // const []
 
   useEffect(() => {
     const fetchUserAndProfile = async () => {
diff --git a/components/Followers.tsx b/components/Followers.tsx
new file mode 100644
index 0000000..e69de29