fix: use single loading animation and fix checkbox column spacing

- Removed random animation selection, now uses only the main PageLoadingAnimation
- Fixed checkbox column taking too much space in applicants table:
  - Set checkbox column width to w-10 (40px)
  - Added min-width to applicant name column (min-w-[200px])
  - Set position column width to w-32
  - Reduced checkbox sizes to h-3 w-3
  - Adjusted checkbox margin from mt-8 to mt-6

This ensures the applicant name and position columns have adequate space while keeping the checkbox column compact.

Author: Zeff01

apps/codebility/app/home/_components/PageTransitionWrapper.tsx

@@ -4,37 +4,17 @@ import { useEffect, useState, useMemo } from "react";
 import { usePathname } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import PageLoadingAnimation from "./PageLoadingAnimation";
-import { 
-  CubeLoadingAnimation, 
-  DNALoadingAnimation, 
-  WaveLoadingAnimation, 
-  PulseLoadingAnimation 
-} from "./PageLoadingVariants";
 
 interface PageTransitionWrapperProps {
   children: React.ReactNode;
 }
 
-const loadingAnimations = [
-  PageLoadingAnimation,
-  CubeLoadingAnimation,
-  DNALoadingAnimation,
-  WaveLoadingAnimation,
-  PulseLoadingAnimation,
-];
-
 export default function PageTransitionWrapper({ children }: PageTransitionWrapperProps) {
   const pathname = usePathname();
   const [isLoading, setIsLoading] = useState(true);
   const [displayedPathname, setDisplayedPathname] = useState(pathname);
   const [animationEnabled, setAnimationEnabled] = useState(true);
   const [animationDuration, setAnimationDuration] = useState(800);
-  
-  // Randomly select a loading animation
-  const LoadingComponent = useMemo(() => {
-    const randomIndex = Math.floor(Math.random() * loadingAnimations.length);
-    return loadingAnimations[randomIndex];
-  }, [pathname]); // Change animation when route changes
 
   // Load user preferences
   useEffect(() => {
@@ -98,7 +78,7 @@ export default function PageTransitionWrapper({ children }: PageTransitionWrappe
               transition: { duration: 0.3, ease: "easeOut" }
             }}
           >
-            <LoadingComponent />
+            <PageLoadingAnimation />
           </motion.div>
         )}
       </AnimatePresence>

apps/codebility/app/home/applicants/_components/_table/applicantColumns.tsx

@@ -28,25 +28,29 @@ export const applicantsColumns: ColumnDef<NewApplicantType>[] = [
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
+        className="h-3 w-3"
       />
     ),
     cell: ({ row }) => (
       <Checkbox
         checked={row.getIsSelected()}
         onCheckedChange={(value) => row.toggleSelected(!!value)}
         aria-label="Select row"
-        className="mx-0 mt-8 px-0 xl:mt-0"
+        className="mx-0 mt-6 px-0 xl:mt-0 h-3 w-3"
       />
     ),
     enableSorting: false,
     enableHiding: false,
     meta: {
-      className: "align-top xl:align-middle",
+      className: "align-top xl:align-middle w-10",
     },
   },
   {
     id: "applicant",
     accessorKey: "first_name",
+    meta: {
+      className: "min-w-[200px]",
+    },
     header: ({ column }) => {
       return (
         <Button
@@ -92,6 +96,9 @@ export const applicantsColumns: ColumnDef<NewApplicantType>[] = [
         </div>
       );
     },
+    meta: {
+      className: "w-32",
+    },
   },
   {
     accessorKey: "years_of_experience",