Add skeleton loading component to feed page

app/(Main)/feed/loading.tsx

@@ -0,0 +1,67 @@
+import PopularPosts from '@/components/feed/popular-posts';
+import FeaturedDev from '@/components/feed/featured/featured-dev';
+import { fetchFeed } from '@/components/feed/get-feed';
+import InfinitiveScrollFeed from '@/components/feed/feed';
+import { fetchUsers } from '@/components/feed/fetch-user';
+import Link from 'next/link';
+import TagBadge from '@/components/tags/tag';
+import { fetchTags } from '@/components/feed/get-tags';
+import { getSessionUser } from '@/components/get-session-user';
+import FeedTabs from '@/components/feed/navbar/navbar';
+import { redirect } from 'next/navigation';
+import { fetchFollowingTags } from '@/components/get-following-tags';
+import { getSession } from 'next-auth/react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getBookmarks, getFollowings } from '@/lib/prisma/session';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { dateFormat } from '@/lib/format-date';
+import { Icons } from '@/components/icon';
+import { EmptyPlaceholder } from '@/components/empty-placeholder';
+import { SiteFooter } from '@/components/footer';
+import FeedTabsSkeleton from '@/components/feed/navbar/navbar-skeleton';
+import PostCardSkeleton from '@/components/skeletons/feed-post-card';
+import { Separator } from '@/components/ui/separator';
+import PopularPostsSkeleton from '@/components/feed/popular-posts-skeleton';
+import TagsCardSkeleton from '@/components/skeletons/tags';
+import FeaturedDevSkeleton from '@/components/feed/featured/featured-dev-skeleton';
+import BookmarksCardSkeleton from '@/components/skeletons/bookmark-card';
+
+export default async function Loading() {
+  return (
+    <>
+      <main className="flex flex-col items-center justify-between feed xl:px-8">
+        <div className="md:flex lg:flex-nowrap flex-wrap md:mx-[-16px] w-full xl:gap-8 md:gap-4">
+          <div className="md:my-4 w-full lg:w-2/3">
+            <FeedTabsSkeleton />
+            <div className="pt-10">
+              <div className="feed__list">
+                <div className="divide-y">
+                  <PostCardSkeleton className="rounded-lg bg-backgreound max-h-72 w-full border-none shadow-none" />
+                  <Separator />
+                  <PostCardSkeleton className="rounded-lg bg-backgreound max-h-72 w-full border-none shadow-none" />
+                  <Separator />
+                  <PostCardSkeleton className="rounded-lg bg-backgreound max-h-72 w-full border-none shadow-none" />
+                  <Separator />
+                  <PostCardSkeleton className="rounded-lg bg-backgreound max-h-72 w-full border-none shadow-none" />
+                  <Separator />
+                  <PostCardSkeleton className="rounded-lg bg-backgreound max-h-72 w-full border-none shadow-none" />
+                  <Separator />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="hidden lg:block md:my-4 lg:w-1/3 xl:pl-8 md:pl-4 border-l min-h-screen">
+            <div className="relative w-full h-full inline-block">
+              <div className="sticky space-y-4 top-16">
+                <PopularPostsSkeleton />
+                <TagsCardSkeleton />
+                <FeaturedDevSkeleton />
+                <BookmarksCardSkeleton />
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}

components/feed/featured/featured-dev-skeleton.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
+import { AvatarFallback } from "@radix-ui/react-avatar";
+import { Button } from "@/components/ui/button";
+import { Suspense, useEffect, useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { getSessionUser } from "@/components/get-session-user";
+import { useSession } from "next-auth/react";
+import { Icons } from "@/components/icon";
+import UserHoverCard from "@/components/user-hover-card";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+const formatDate = (dateString: string | number | Date) => {
+  const date = new Date(dateString)
+  const currentYear = new Date().getFullYear()
+  const year = date.getFullYear()
+  const formattedDate = date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour12: true,
+  })
+  if (year !== currentYear) {
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour12: true,
+    })
+  }
+  return formattedDate
+}
+
+export default function FeaturedDevSkeleton(
+  { ...props }: React.ComponentPropsWithoutRef<typeof Card>) {
+
+  return (
+    <Card className={cn("feed__content_featured_card bg-background border-none shadow-none", props.className)} {...props}>
+      <CardHeader className="py-4 px-0">
+        <CardTitle className="feed__content_featured_card_title text-base">
+          <Skeleton className="h-6 w-20" />
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="feed__content_featured_card_content flex flex-col items-start justify-between space-y-4">
+          <div className="flex gap-4 w-full items-center justify-between">
+            <div className="flex items-center">
+              <Skeleton className="h-8 w-8 rounded-full mr-1.5 md:mr-2" />
+              <div className="space-y-2">
+                <Skeleton className="h-3.5 w-28" />
+                <Skeleton className="h-3.5 w-20" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-16" />
+          </div>
+          <div className="flex gap-4 w-full items-center justify-between">
+            <div className="flex items-center">
+              <Skeleton className="h-8 w-8 rounded-full mr-1.5 md:mr-2" />
+              <div className="space-y-2">
+                <Skeleton className="h-3.5 w-28" />
+                <Skeleton className="h-3.5 w-20" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-16" />
+          </div>
+          <div className="flex gap-4 w-full items-center justify-between">
+            <div className="flex items-center">
+              <Skeleton className="h-8 w-8 rounded-full mr-1.5 md:mr-2" />
+              <div className="space-y-2">
+                <Skeleton className="h-3.5 w-28" />
+                <Skeleton className="h-3.5 w-20" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-16" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/feed/feed.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader } from '../ui/card';
 import { cn } from '@/lib/utils';
 import { Separator } from '@radix-ui/react-context-menu';
 import { EmptyPlaceholder } from '../empty-placeholder';
+import PostCardSkeleton from '../skeletons/feed-post-card';
 
 export default function InfinitiveScrollFeed({ initialFeed, tag, session }: { initialFeed: any | undefined, tag: string | undefined, session: any }) {
   const [feed, setFeed] = useState<Array<any>>(initialFeed)
@@ -51,36 +52,7 @@ export default function InfinitiveScrollFeed({ initialFeed, tag, session }: { in
         {
           feed.length >= 10 && (
             <div className="feed__list_loadmore !py-0 h-max" ref={ref}>
-              <Card className="rounded-lg bg-backgreound max-h-72 w-full border-none shadow-none">
-                <CardContent className="py-0 px-0 md:px-4">
-                  <CardHeader className={cn("pt-4 pb-3 md:pt-6 px-0 gap-y-4")}>
-                    <div className="flex items-center space-x-1">
-                      <Skeleton className="h-6 w-6 mr-1 md:mr-1.5" />
-                      <Skeleton className="w-32 h-3" />
-                    </div>
-                  </CardHeader>
-                  <div className="flex justify-between">
-                    <div className='w-full'>
-                      <div>
-                        <div className="pb-3 space-y-2">
-                          <Skeleton className='w-full h-4' />
-                          <Skeleton className='w-full h-4 md:hidden' />
-                        </div>
-                        <div className="space-y-2 hidden md:block">
-                          <Skeleton className='w-full h-4' />
-                          <Skeleton className='w-full h-4' />
-                        </div>
-                      </div>
-                      <div className="py-8">
-                        <div className="flex justify-between">
-                          <Skeleton className='w-20 h-3' />
-                        </div>
-                      </div>
-                    </div>
-                    <Skeleton className="h-14 md:h-28 aspect-[4/3] md:aspect-square ml-6 md:ml-8 rounded-none" />
-                  </div>
-                </CardContent>
-              </Card>
+              <PostCardSkeleton className="rounded-lg bg-backgreound max-h-72 w-full border-none shadow-none" />
             </div>
           )
         }

components/feed/navbar/navbar-skeleton.tsx

@@ -0,0 +1,48 @@
+'use client';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Skeleton } from "@/components/ui/skeleton";
+
+
+export default function FeedTabsSkeleton() {
+
+     return (
+          <>
+
+               <div className="bg-background sticky top-[60px] z-10">
+                    <Tabs defaultValue={''} className="">
+                         <TabsList className="bg-transparent gap-2">
+                              <TabsTrigger value="foryou" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                                   <Skeleton className="h-5 w-10" />
+                              </TabsTrigger>
+                         </TabsList>
+                         <TabsList className="bg-transparent gap-2">
+                              <TabsTrigger value="foryou" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                                   <Skeleton className="h-5 w-10" />
+                              </TabsTrigger>
+                         </TabsList>
+                         <TabsList className="bg-transparent gap-2">
+                              <TabsTrigger value="foryou" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                                   <Skeleton className="h-5 w-10" />
+                              </TabsTrigger>
+                         </TabsList>
+                         <TabsList className="bg-transparent gap-2">
+                              <TabsTrigger value="foryou" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                                   <Skeleton className="h-5 w-10" />
+                              </TabsTrigger>
+                         </TabsList>
+                         <TabsList className="bg-transparent gap-2">
+                              <TabsTrigger value="foryou" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                                   <Skeleton className="h-5 w-10" />
+                              </TabsTrigger>
+                         </TabsList>
+                         <TabsList className="bg-transparent gap-2">
+                              <TabsTrigger value="foryou" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                                   <Skeleton className="h-5 w-10" />
+                              </TabsTrigger>
+                         </TabsList>
+                    </Tabs>
+
+               </div>
+          </>
+     );
+}

components/feed/popular-posts-skeleton.tsx

@@ -0,0 +1,56 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Skeleton } from "../ui/skeleton";
+
+export default async function PopularPostsSkeleton() {
+
+  return (<Card className="feed__content_featured_card bg-background border-none shadow-none">
+        <CardHeader className="py-4 px-0">
+          <CardTitle className="feed__content_featured_card_title text-base">
+            <Skeleton className="h-6 w-20" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <ol className="flex flex-col items-start justify-between space-y-4">
+            <li className="text-sm space-y-2.5">
+
+              <div className="flex items-center mb-2">
+                <Skeleton className="h-5 w-5 mr-1 md:mr-1.5" />
+                <Skeleton className="w-28 h-3.5" />
+              </div>
+
+
+              <div className="text-base font-bold space-y-1.5">
+                <Skeleton className="h-5 w-full" />
+                <Skeleton className="h-5 w-full" />
+              </div>
+            </li>
+            <li className="text-sm space-y-2.5">
+
+              <div className="flex items-center mb-2">
+                <Skeleton className="h-5 w-5 mr-1 md:mr-1.5" />
+                <Skeleton className="w-28 h-3.5" />
+              </div>
+
+
+              <div className="text-base font-bold space-y-1.5">
+                <Skeleton className="h-5 w-full" />
+                <Skeleton className="h-5 w-full" />
+              </div>
+            </li>
+            <li className="text-sm space-y-2.5">
+
+              <div className="flex items-center mb-2">
+                <Skeleton className="h-5 w-5 mr-1 md:mr-1.5" />
+                <Skeleton className="w-28 h-3.5" />
+              </div>
+
+
+              <div className="text-base font-bold space-y-1.5">
+                <Skeleton className="h-5 w-full" />
+                <Skeleton className="h-5 w-full" />
+              </div>
+            </li>
+          </ol>
+        </CardContent>
+      </Card>)
+}

components/skeletons/bookmark-card.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Skeleton } from "../ui/skeleton";
+
+export default function BookmarksCardSkeleton(
+     { className, ...props }: React.ComponentPropsWithoutRef<typeof Card> & { className?: string; }
+) {
+     return (
+          <Card className="feed__content_featured_card bg-background border-none shadow-none">
+               <CardHeader className="py-4 px-0">
+                    <CardTitle className="feed__content_featured_card_title text-base">
+                         <Skeleton className="h-6 w-20" />
+                    </CardTitle>
+               </CardHeader>
+               <CardContent className="p-0">
+                    <ol className="flex flex-col items-start justify-between space-y-4">
+                         <li className="text-sm space-y-2.5">
+                              <div className="flex items-center mb-2">
+                                   <Skeleton className="h-5 w-5 mr-1 md:mr-1.5" />
+                                   <Skeleton className="w-28 h-3.5" />
+                              </div>
+                              <div className="text-base font-bold space-y-1.5">
+                                   <Skeleton className="h-5 w-full" />
+                                   <Skeleton className="h-5 w-full" />
+                              </div>
+                              <Skeleton className="h-3.5 w-28" />
+                         </li>
+                         <li className="text-sm space-y-2.5">
+                              <div className="flex items-center mb-2">
+                                   <Skeleton className="h-5 w-5 mr-1 md:mr-1.5" />
+                                   <Skeleton className="w-28 h-3.5" />
+                              </div>
+                              <div className="text-base font-bold space-y-1.5">
+                                   <Skeleton className="h-5 w-full" />
+                                   <Skeleton className="h-5 w-full" />
+                              </div>
+                              <Skeleton className="h-3.5 w-28" />
+                         </li>
+                         <li className="text-sm space-y-2.5">
+                              <div className="flex items-center mb-2">
+                                   <Skeleton className="h-5 w-5 mr-1 md:mr-1.5" />
+                                   <Skeleton className="w-28 h-3.5" />
+                              </div>
+                              <div className="text-base font-bold space-y-1.5">
+                                   <Skeleton className="h-5 w-full" />
+                                   <Skeleton className="h-5 w-full" />
+                              </div>
+                              <Skeleton className="h-3.5 w-28" />
+                         </li>
+                    </ol>
+               </CardContent>
+          </Card>
+     )
+}