Merge pull request #97 from Atharva0506/refactor/animated-loading-spinner

Refactor: utilize loading component with animated logo

Author: Zahnentferner

app/loading.tsx

@@ -1,3 +1,25 @@
-export default function Loading() {
-  return null
+import Image from "next/image";
+
+interface LoadingProps {
+  message?: string;
 }
+
+export default function Loading({ message }: LoadingProps = {}) {
+  const displayMessage = message ?? "Loading...";
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 flex items-center justify-center">
+      <div className="text-center">
+        <Image
+          src="/logo-animated.gif"
+          alt={displayMessage}
+          width={80}
+          height={80}
+          unoptimized
+          className="w-20 h-20 mx-auto mb-4"
+        />
+        <p className="text-gray-600">{displayMessage}</p>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -7,6 +7,7 @@ import BlogCard from "@/components/blog-card"
 import Pagination from "@/components/pagination"
 import Link from "next/link"
 import Footer from "@/components/footer"
+import Loading from "@/app/loading"
 import type { PaginatedPosts } from "@/types/blog"
 
 export default function HomePage() {
@@ -59,14 +60,7 @@ export default function HomePage() {
   )
 
   if (loading) {
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#228B22] mx-auto mb-4"></div>
-          <p className="text-gray-600">Loading articles...</p>
-        </div>
-      </div>
-    )
+    return <Loading message="Loading articles..." />
   }
 
   if (!paginatedData) {