Refactor: utilize loading component with animated logo

app/loading.tsx

@@ -1,3 +1,19 @@
+import Image from "next/image";
+
 export default function Loading() {
-  return null
+  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="Loading..."
+          width={80}
+          height={80}
+          unoptimized
+          className="w-20 h-20 mx-auto mb-4"
+        />
+        <p className="text-gray-600">Loading articles...</p>
+      </div>
+    </div>
+  )
 }

app/page.tsx

@@ -7,7 +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"
 interface BlogPost {
   slug: string
   title: string
@@ -75,14 +75,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 />
   }
 
   if (!paginatedData) {