feat: refactor TopLoader to use a hook for active state management and improve CSS for fixed positioning

distribution_fe/app/(dashboard)/suppliers/[id]/payments/_components/supplier-payments-client.tsx

@@ -30,7 +30,7 @@ import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { toast } from '@/components/ui/toast'
-import { TopLoader } from '@/components/shared/top-loader'
+import { useTopLoader } from '@/components/shared/top-loader'
 import { EmptyState } from '@/components/shared/empty-state'
 import { ReceiptDollarIcon } from '@hugeicons/core-free-icons'
 
@@ -70,11 +70,12 @@ export function SupplierPaymentsClient({ supplierId }: { supplierId: string }) {
 
   useEffect(() => { loadPayments() }, [loadPayments])
 
+  useTopLoader(loading)
+
   const pageCount = Math.max(1, Math.ceil(total / pageSize))
 
   return (
-    <div className="relative">
-      <TopLoader active={loading} />
+    <div>
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-semibold text-foreground">Supplier Payments</h1>