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

frontend/src/ASNsNewManager.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import axios from 'axios';
+import api from './lib/api.js';
 import CommunityAutocompleteInput from './components/CommunityAutocompleteInput.jsx';
 import { 
   IconPlus, 
@@ -18,6 +18,7 @@ import {
   IconFileText
 } from '@tabler/icons-react';
 import LockBanner from './components/LockBanner.jsx';
+import TableSkeleton from './components/TableSkeleton.jsx';
 import S3MetaBar from './components/S3MetaBar.jsx';
 import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
 
@@ -51,7 +52,7 @@ function ASNsNewManager() {
   useEffect(() => {
     (async () => {
       try {
-        const res = await axios.get(`${API_URL}/communities`);
+        const res = await api.get(`/communities`);
         setCommunities(Array.isArray(res.data) ? res.data : []);
       } catch (e) {
         // тихо игнорируем
@@ -81,21 +82,21 @@ function ASNsNewManager() {
     localStorage.setItem('uiOwner', owner);
     const resource = 'asns';
     const acquire = async () => {
-      try { await axios.post(`${API_URL}/locks/${resource}`, { owner, ttlSeconds: 180 }); } catch {}
+      try { await api.post(`/locks/${resource}`, { owner, ttlSeconds: 180 }); } catch {}
     };
     acquire();
     const interval = setInterval(acquire, 60_000);
     fetchItems();
     return () => {
       clearInterval(interval);
-      axios.delete(`${API_URL}/locks/${resource}`).catch(() => {});
+      api.delete(`/locks/${resource}`).catch(() => {});
     };
   }, []);
 
   const fetchItems = async () => {
     setLoading(true);
     try {
-      const response = await axios.get(`${API_URL}/asns`, { params: { offset: 0, limit: 0 } });
+      const response = await api.get(`/asns`, { params: { offset: 0, limit: 0 } });
       const payload = Array.isArray(response.data?.items) ? response.data.items : (Array.isArray(response.data) ? response.data : []);
       const mapped = payload.map(item => ({ asn: item.domain, community: item.type }));
       setItems(mapped);
@@ -223,7 +224,7 @@ function ASNsNewManager() {
         .map(i => ({ asn: String(i.asn).trim(), community: String(i.community).trim() }));
       const unique = deduplicate(valid);
       const payload = { domains: unique.map(i => ({ domain: i.asn, type: i.community })), etag };
-      const response = await axios.post(`${API_URL}/asns`, payload, { validateStatus: () => true });
+      const response = await api.post(`/asns`, payload, { validateStatus: () => true });
       if (response.status === 412) {
         setError('Данные изменились в S3 (ETag mismatch). Обновите список и попробуйте снова.');
         return;
@@ -548,6 +549,9 @@ function ASNsNewManager() {
               </div>
             </div>
             {/* Мета-информация будет показана внизу карточки */}
+            {loading ? (
+              <TableSkeleton rows={10} cols={3} />
+            ) : (
             <div className="table-responsive">
               <table className="table card-table table-vcenter table-nowrap mb-0">
                 <thead>
@@ -600,6 +604,7 @@ function ASNsNewManager() {
                 </tbody>
               </table>
             </div>
+            )}
             {/* Пагинация */}
             {totalPages > 1 && (
               <div className="card-footer d-flex align-items-center justify-content-between">