refactor: update Articles and Loading components for improved layout and loading states, enhance metadata for Posts page

Author: Llewellyn500

app/posts/[title]/page.tsx

@@ -5,6 +5,9 @@ import SocialSharing from "@/components/SocialSharing";
 import Subheading from "@/components/Subheading";
 import Link from "next/link";
 
+import { RiInstagramLine, RiTwitterFill, RiYoutubeFill, RiGithubFill, RiTiktokFill, RiPatreonFill } from "react-icons/ri";
+
+
 interface Article {
   id: string;
   title: string;
@@ -91,7 +94,15 @@ export default async function ArticleDetails({
       content: articleData.content.map(contentItem => ({
         ...contentItem,
         ...(contentItem.date && { date: contentItem.date.toDate() })
-      }))
+      })),
+      title: "",
+      slug: "",
+      read: "",
+      label: "",
+      img: "",
+      imgAlt: "",
+      description: "",
+      authorUID: ""
     };
 
     // Get latest articles (excluding current)
@@ -111,6 +122,13 @@ export default async function ArticleDetails({
           ...data,
           date: data.date?.toDate(),
           authorName: data.authorName || "Unknown Author",
+          label: data.label || "No Label",
+          slug: data.slug,
+          img: data.img || "/default-image.png",
+          imgAlt: data.imgAlt || "Article image",
+          title: data.title || "Untitled",
+          description: data.description || "No description available",
+          read: data.read || "Unknown",
         };
       })
       .filter(article => article.id !== processedArticle.id)
@@ -188,27 +206,39 @@ export default async function ArticleDetails({
               <div className="flex flex-wrap justify-between">
                 <p className="flex font-semibold">Share</p>
                 <SocialSharing
-                  links={[
-                    {
-                      href: "#",
-                      ariaLabel: "Share on Instagram",
-                      src: "/icons/ri_instagram-line.svg",
-                      alt: "Instagram",
-                    },
-                    {
-                      href: "#",
-                      ariaLabel: "Share on Twitter",
-                      src: "/icons/ri_twitter-fill.svg",
-                      alt: "Twitter",
-                    },
-                    {
-                      href: "#",
-                      ariaLabel: "Share on YouTube",
-                      src: "/icons/ri_youtube-fill.svg",
-                      alt: "YouTube",
-                    },
-                  ]}
-                />
+                                links={[
+                                  {
+                                    href: "https://www.youtube.com/@lap-tutorials",
+                                    ariaLabel: "Visit our YouTube channel",
+                                    Icon: RiYoutubeFill,
+                                  },
+                                  {
+                                    href: "https://github.com/LAP-Tutorials",
+                                    ariaLabel: "Visit our GitHub page",
+                                    Icon: RiGithubFill,
+                                  },
+                                  {
+                                    href: "https://www.instagram.com/lap.mgmt.team/",
+                                    ariaLabel: "Visit our Instagram page",
+                                    Icon: RiInstagramLine,
+                                  },
+                                  {
+                                    href: "https://x.com/lap_mgmt",
+                                    ariaLabel: "Visit our X page",
+                                    Icon: RiTwitterFill,
+                                  },
+                                  {
+                                    href: "https://www.tiktok.com/@lap_mgmt",
+                                    ariaLabel: "Visit our TikTok page",
+                                    Icon: RiTiktokFill,
+                                  },
+                                  {
+                                    href: "http://patreon.com/lap_mgmt",
+                                    ariaLabel: "Visit our GitHub page",
+                                    Icon: RiPatreonFill,
+                                  },
+                                ]}
+                              />
               </div>
             </div>
           </div>

app/posts/page.tsx

@@ -3,9 +3,10 @@ import Loading from "@/components/Articles/loading";
 import PageTitle from "@/components/PageTitle";
 import { Suspense } from "react";
 
+
 export const metadata = {
-  title: "Articles  | Fyrre Magazine",
-  description: "Articles from our team of writers, editors and artists",
+  title: "Posts  | L.A.P",
+  description: "Posts from our dedicated team.",
 };
 
 export default function MagazinePage() {

components/Articles/Articles.tsx

@@ -5,6 +5,7 @@ import { Button } from "../ui/button";
 import { useState, useEffect } from "react";
 import { collection, getDocs, query, orderBy } from "firebase/firestore";
 import Link from "next/link";
+import Loading from "./loading"
 
 interface Article {
   id: string;
@@ -53,6 +54,7 @@ export default function Articles() {
         const authorsSnapshot = await getDocs(collection(db, "authors"));
         const authors = authorsSnapshot.docs.map(doc => ({
           uid: doc.id,
+          name: doc.data().name,
           ...doc.data(),
         }));
 
@@ -83,7 +85,7 @@ export default function Articles() {
     : articles.filter(article => article.label === selectedLabel);
 
   if (loading) {
-    return <div className="text-center p-8">Loading articles...</div>;
+    return <Loading />;
   }
 
   return (
@@ -114,15 +116,15 @@ export default function Articles() {
                 <p className="uppercase">{article.label}</p>
               </span>
             </div>
-            <Link href={`magazine/${article.slug}`}>
+            <Link href={`posts/${article.slug}`}>
               <img
                 className="w-full my-8 hover:scale-105 transition"
                 src={article.img}
                 alt={article.imgAlt}
               />
             </Link>
             <h2 className="heading3-title mb-3">
-              <Link href={`/magazine/${article.slug}`}>
+              <Link href={`/posts/${article.slug}`}>
                 {article.title}
               </Link>
             </h2>

components/Articles/loading.tsx

@@ -1,3 +1,47 @@
+import { Skeleton } from "../ui/skeleton";
+
 export default function Loading() {
-  return <div>Test</div>;
+  return (
+    <div className="max-w-[95rem] w-full mx-auto py-8 lg:pt-24 lg:pb-48">
+      {/* Categories Filter Skeleton */}
+      <div className="flex justify-end gap-4 mb-6">
+        {[...Array(4)].map((_, index) => (
+          <Skeleton key={index} className="bg-[#a1a1a1] h-10 w-20 rounded-md" />
+        ))}
+      </div>
+
+      {/* Grid layout for the post cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {[...Array(9)].map((_, index) => (
+          <div key={index} className="bg-[#a1a1a1] p-6 flex flex-col gap-4">
+            {/* Date & Category */}
+            <div className="flex justify-between items-center">
+              <Skeleton className="bg-[#a1a1a1] h-4 w-28 rounded-md" />
+              <Skeleton className="bg-[#a1a1a1] h-6 w-12 rounded-md" />
+            </div>
+
+            {/* Image Skeleton */}
+            <Skeleton className="w-full h-60 bg-[#a1a1a1] rounded-md" />
+
+            {/* Title */}
+            <Skeleton className="h-6 w-3/4 bg-[#a1a1a1] rounded-md" />
+
+            {/* Description */}
+            <Skeleton className="h-4 w-full bg-[#a1a1a1] rounded-md" />
+            <Skeleton className="h-4 w-5/6 bg-[#a1a1a1] rounded-md" />
+            <Skeleton className="h-4 w-4/5 bg-[#a1a1a1] rounded-md" />
+
+            {/* Author & Duration */}
+            <div className="flex justify-between items-center mt-4">
+              <div className="flex gap-2">
+                <Skeleton className="bg-[#a1a1a1] h-4 w-16 rounded-md" />
+                <Skeleton className="bg-[#a1a1a1] h-4 w-20 rounded-md" />
+              </div>
+              <Skeleton className="bg-[#a1a1a1] h-4 w-16 rounded-md" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 }