apps/frontend/src/pages/broker/BrokerAccountsPage.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { useBrokerAccounts } from '../../hooks/useBrokerAccounts';
+import { SkeletonBlock } from '../../components/SkeletonBlock';
 
 const cardStyle = {
   display: 'block',
@@ -15,7 +16,43 @@ const cardStyle = {
 export function BrokerAccountsPage() {
   const { data: accounts, isLoading, error } = useBrokerAccounts();
 
-  if (isLoading) return <p>Загрузка брокерских счетов...</p>;
+  if (isLoading) {
+    return (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
+          <h1 style={{ fontSize: 28, lineHeight: 1.2 }}>Брокерские счета</h1>
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gap: 16,
+            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+          }}
+        >
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              style={{
+                padding: 20,
+                background: 'var(--color-surface)',
+                border: '1px solid #e0e0e0',
+                borderRadius: 8,
+                boxShadow: 'var(--shadow)',
+              }}
+            >
+              <SkeletonBlock height={20} width="60%" />
+              <div style={{ height: 10 }} />
+              <SkeletonBlock height={12} width="40%" />
+              <div style={{ height: 6 }} />
+              <SkeletonBlock height={12} width="30%" />
+              <div style={{ height: 6 }} />
+              <SkeletonBlock height={12} width="50%" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
   if (error) return <p style={{ color: 'var(--color-negative)' }}>Не удалось загрузить счета</p>;
 
   return (