Feat: Bind data to the agent module of the home page #3221 (#7385)

### What problem does this PR solve?

Feat: Bind data to the agent module of the home page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/table-skeleton.tsx

@@ -1,5 +1,5 @@
+import { Loader2 } from 'lucide-react';
 import { PropsWithChildren } from 'react';
-import { SkeletonCard } from './skeleton-card';
 import { TableCell, TableRow } from './ui/table';
 
 type IProps = { columnsLength: number };
@@ -7,17 +7,22 @@ type IProps = { columnsLength: number };
 function Row({ children, columnsLength }: PropsWithChildren & IProps) {
   return (
     <TableRow>
-      <TableCell colSpan={columnsLength} className="h-24 text-center ">
+      <TableCell colSpan={columnsLength} className="h-24 text-center">
         {children}
       </TableCell>
     </TableRow>
   );
 }
 
-export function TableSkeleton({ columnsLength }: { columnsLength: number }) {
+export function TableSkeleton({
+  columnsLength,
+  children,
+}: PropsWithChildren & IProps) {
   return (
     <Row columnsLength={columnsLength}>
-      <SkeletonCard></SkeletonCard>
+      {children || (
+        <Loader2 className="animate-spin size-16 inline-block text-gray-400" />
+      )}
     </Row>
   );
 }