Merge pull request #206 from legend4tech/Skeleton-Loading-Component-Wrapper

feat: add skeleton loader component

Author: gabito1451

frontend/src/app/[locale]/guilds/page.tsx

@@ -1,40 +1,52 @@
-'use client'
+"use client";
 
-import { useState, useEffect } from 'react'
-import Link from 'next/link'
-import { Search, Plus, Filter } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import { useGuildStore } from '@/store/guildStore'
-import { GuildCard } from '@/features/guilds/components/GuildCard'
-import { Button } from '@/components/ui/Button'
-import { EmptyState } from '@/components/ui/EmptyState'
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Search, Plus, Filter } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useGuildStore } from "@/store/guildStore";
+import { GuildCard } from "@/features/guilds/components/GuildCard";
+import { Button } from "@/components/ui/Button";
+import { EmptyState } from "@/components/ui/EmptyState";
 
 export default function GuildsPage() {
-  const router = useRouter()
-  const { guilds, fetchGuilds } = useGuildStore()
-  const [searchQuery, setSearchQuery] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState<string>('')
-  const [selectedTier, setSelectedTier] = useState<string>('')
+  const router = useRouter();
+  const { guilds, fetchGuilds } = useGuildStore();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+  const [selectedTier, setSelectedTier] = useState<string>("");
 
   useEffect(() => {
-    fetchGuilds()
-  }, [fetchGuilds])
+    fetchGuilds();
+  }, [fetchGuilds]);
 
-  const categories = ['All', 'Development', 'DeFi', 'Education', 'Gaming', 'NFT', 'DAO', 'Social']
-  const tiers = ['All', 'bronze', 'silver', 'gold', 'platinum']
+  const categories = [
+    "All",
+    "Development",
+    "DeFi",
+    "Education",
+    "Gaming",
+    "NFT",
+    "DAO",
+    "Social",
+  ];
+  const tiers = ["All", "bronze", "silver", "gold", "platinum"];
 
   const filteredGuilds = guilds.filter((guild) => {
     const matchesSearch =
       guild.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      guild.description.toLowerCase().includes(searchQuery.toLowerCase())
+      guild.description.toLowerCase().includes(searchQuery.toLowerCase());
 
     const matchesCategory =
-      !selectedCategory || selectedCategory === 'All' || guild.category === selectedCategory
+      !selectedCategory ||
+      selectedCategory === "All" ||
+      guild.category === selectedCategory;
 
-    const matchesTier = !selectedTier || selectedTier === 'All' || guild.tier === selectedTier
+    const matchesTier =
+      !selectedTier || selectedTier === "All" || guild.tier === selectedTier;
 
-    return matchesSearch && matchesCategory && matchesTier
-  })
+    return matchesSearch && matchesCategory && matchesTier;
+  });
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
@@ -81,7 +93,7 @@ export default function GuildsPage() {
                 className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-white"
               >
                 {categories.map((cat) => (
-                  <option key={cat} value={cat === 'All' ? '' : cat}>
+                  <option key={cat} value={cat === "All" ? "" : cat}>
                     {cat}
                   </option>
                 ))}
@@ -96,7 +108,7 @@ export default function GuildsPage() {
                 className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-white capitalize"
               >
                 {tiers.map((tier) => (
-                  <option key={tier} value={tier === 'All' ? '' : tier}>
+                  <option key={tier} value={tier === "All" ? "" : tier}>
                     {tier}
                   </option>
                 ))}
@@ -124,12 +136,12 @@ export default function GuildsPage() {
             title="No guilds found"
             description="Try adjusting your search or filters, or create a new guild."
             createLabel="Create Guild"
-            onCreate={() => router.push('/guilds/create')}
+            onCreate={() => router.push("/guilds/create")}
             illustration={<Filter className="h-14 w-14 text-gray-400" />}
             className="border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
           />
         )}
       </div>
     </div>
-  )
+  );
 }

frontend/src/components/ui/Skeleton.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Animation variant
+   * - shimmer: Sliding gradient effect (default)
+   * - pulse: Simple opacity pulse
+   */
+  animation?: 'shimmer' | 'pulse'
+  /**
+   * Skeleton shape variant
+   * - text: Rounded corners for text lines
+   * - circular: Circle for avatars
+   * - rectangular: Full rounded corners for cards/images
+   */
+  variant?: 'text' | 'circular' | 'rectangular'
+}
+
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, animation = 'shimmer', variant = 'text', ...props }, ref) => {
+    const baseClasses = "bg-stellar-lightNavy overflow-hidden relative"
+
+    const variantClasses = {
+      text: "rounded-md",
+      circular: "rounded-full",
+      rectangular: "rounded-lg",
+    }
+
+    const animationClasses = {
+      shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-stellar-slate/10 before:to-transparent",
+      pulse: "animate-[pulse_1.5s_ease-in-out_infinite]",
+    }
+
+    return (
+      <div
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          animationClasses[animation],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+
+Skeleton.displayName = "Skeleton"
+
+export { Skeleton }

frontend/tailwind.config.ts

@@ -59,6 +59,13 @@ const config: Config = {
         height: "height",
         spacing: "margin, padding",
       },
+      keyframes: {
+        shimmer: {
+          "100%": {
+            transform: "translateX(100%)",
+          },
+        },
+      },
     },
   },
   plugins: [typography],