refactor: Replace axios with api module in ASNs, Domains, IPRanges managers, and S3MetaBar for consistent API interaction and improved code maintainability

frontend/src/components/S3MetaBar.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import axios from 'axios';
+import api from '../lib/api.js';
 import { IconHash, IconClock, IconFileText, IconRefresh } from '@tabler/icons-react';
 
 function S3MetaBar({ keys = [], className = '' }) {
@@ -9,7 +9,7 @@ function S3MetaBar({ keys = [], className = '' }) {
   const fetchMeta = async () => {
     setLoading(true);
     try {
-      const res = await axios.get('/api/s3/last-modified');
+      const res = await api.get('/s3/last-modified');
       setMeta(res.data || {});
     } catch {
       setMeta({});

frontend/src/components/TableSkeleton.jsx

@@ -0,0 +1,29 @@
+export default function TableSkeleton({ rows = 10, cols = 3 }) {
+  const Row = () => (
+    <tr>
+      {Array.from({ length: cols }).map((_, i) => (
+        <td key={i}>
+          <div className="placeholder col-8" style={{ height: 14 }}></div>
+        </td>
+      ))}
+    </tr>
+  );
+  return (
+    <div className="table-responsive">
+      <table className="table card-table table-vcenter table-nowrap mb-0">
+        <thead>
+          <tr>
+            {Array.from({ length: cols }).map((_, i) => (
+              <th key={i}><div className="placeholder col-6"></div></th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: rows }).map((_, i) => <Row key={i} />)}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+