feat: create loading component

apps/admin/app/(dashboard)/dashboard/assemblies/details/assembly.tsx

@@ -20,17 +20,14 @@ import {
   DialogTrigger,
 } from '@ui/components/ui/dialog';
 import { Label } from '@ui/components/ui/label';
+import Loading from '@ui/components/ui/loading';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ui/components/ui/select';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ui/components/ui/table';
 import { Textarea } from '@ui/components/ui/textarea';
-import { BookOpenText, CircleArrowLeft, HomeIcon, Loader2 } from 'lucide-react';
+import { BookOpenText, CircleArrowLeft, HomeIcon } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import { type FormEvent, useEffect, useState } from 'react';
 
-const Icons = {
-  spinner: Loader2,
-};
-
 export default function AssemblyDetail(): JSX.Element {
   const searchParams = useSearchParams();
   const idPoll = searchParams.get('id');
@@ -90,11 +87,7 @@ export default function AssemblyDetail(): JSX.Element {
   }
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <Icons.spinner className="w-12 h-12 animate-spin text-primary-500" />
-      </div>
-    );
+    return <Loading />;
   }
 
   return (

apps/admin/app/(dashboard)/dashboard/page.tsx

@@ -1,14 +1,10 @@
 'use client';
 import { type Stats, getStats } from '@/app/lib/actions';
 import { Card, CardContent, CardHeader, CardTitle } from '@repo/ui/components/ui/card';
-import { Loader2 } from 'lucide-react';
+import Loading from '@repo/ui/components/ui/loading';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-const Icons = {
-  spinner: Loader2,
-};
-
 const NoDataMessage = () => (
   <div className="flex items-center justify-center h-full">
     <p className="text-gray-500">Aucune donnée disponible</p>
@@ -33,11 +29,7 @@ function Page(): JSX.Element {
   }, []);
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <Icons.spinner className="w-12 h-12 animate-spin text-primary-500" />
-      </div>
-    );
+    return <Loading />;
   }
 
   return (

apps/admin/app/(dashboard)/dashboard/sports/page.tsx

@@ -11,16 +11,13 @@ import {
 } from '@ui/components/ui/dialog';
 import { Input } from '@ui/components/ui/input';
 import { Label } from '@ui/components/ui/label';
+import Loading from '@ui/components/ui/loading';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ui/components/ui/table';
 import { Textarea } from '@ui/components/ui/textarea';
-import { EditIcon, Loader2, Trash2 } from 'lucide-react';
+import { EditIcon, Trash2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { type Sports, addSport, deleteSport, getAllSports, updateSport } from './utils';
 
-const Icons = {
-  spinner: Loader2,
-};
-
 export default function SportsPage(): JSX.Element {
   const [loading, setLoading] = useState<boolean>(true);
   const [sports, setSports] = useState<Sports[] | null>(null);
@@ -66,11 +63,7 @@ export default function SportsPage(): JSX.Element {
   }
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <Icons.spinner className="w-12 h-12 animate-spin text-primary-500" />
-      </div>
-    );
+    return <Loading />;
   }
 
   return (

apps/client/app/(auth)/(members)/members/page.tsx

@@ -1,13 +1,9 @@
 'use client';
-import { Loader2 } from 'lucide-react';
+import Loading from '@repo/ui/components/ui/loading';
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { type Hierarchy, type Role, getHierarchy } from './action';
 
-const Icons = {
-  spinner: Loader2,
-};
-
 const roleToFrench = (role: Role): string => {
   switch (role) {
     case 'PRESIDENT':
@@ -80,11 +76,7 @@ export default function AssociationHierarchyTree() {
   }, []);
 
   if (loading || !treeData) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <Icons.spinner className="w-12 h-12 animate-spin text-primary-500" />
-      </div>
-    );
+    return <Loading />;
   }
 
   return (

apps/client/app/(auth)/(members)/members/votes/page.tsx

@@ -4,13 +4,9 @@ import { getAllVotes } from '@/app/lib/votes/utils';
 import { Badge } from '@repo/ui/components/ui/badge';
 import { Button } from '@repo/ui/components/ui/button';
 import { Card } from '@repo/ui/components/ui/card';
-import { Loader2 } from 'lucide-react';
+import Loading from '@repo/ui/components/ui/loading';
 import { useEffect, useState } from 'react';
 
-const Icons = {
-  spinner: Loader2,
-};
-
 export default function ListVotes() {
   const [votes, setVotes] = useState<Vote[]>([]);
   const [loading, setLoading] = useState(true);
@@ -44,11 +40,7 @@ export default function ListVotes() {
   };
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <Icons.spinner className="w-12 h-12 animate-spin text-primary-500" />
-      </div>
-    );
+    return <Loading />;
   }
 
   return (

apps/client/app/(auth)/account/page.tsx

@@ -12,15 +12,12 @@ import { Button } from '@repo/ui/components/ui/button';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@repo/ui/components/ui/card';
 import { Input } from '@repo/ui/components/ui/input';
 import { Label } from '@repo/ui/components/ui/label';
+import Loading from '@repo/ui/components/ui/loading';
 import { toast } from '@repo/ui/components/ui/sonner';
-import { CircleArrowLeft, Loader2 } from 'lucide-react';
+import { CircleArrowLeft } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
-const Icons = {
-  spinner: Loader2,
-};
-
 export default function UserAccount() {
   const [user, setUser] = useState<User | null>(null);
   const [status, setStatus] = useState<null | 'applied' | 'approved' | 'rejected'>(null);
@@ -50,11 +47,7 @@ export default function UserAccount() {
   }
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <Icons.spinner className="w-12 h-12 animate-spin text-primary-500" />
-      </div>
-    );
+    return <Loading />;
   }
 
   if (!user) {

packages/ui/src/components/ui/loading.tsx

@@ -0,0 +1,18 @@
+import { Loader2 } from 'lucide-react';
+import type React from 'react';
+
+interface FullPageSpinnerProps {
+  size?: number;
+  color?: string;
+  className?: string;
+}
+
+const Loading: React.FC<FullPageSpinnerProps> = ({ size = 64, color = 'text-primary', className = '' }) => {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <Loader2 className={`animate-spin ${color} ${className}`} size={size} />
+    </div>
+  );
+};
+
+export default Loading;