From 2670097a5e99da7749767b391178d2b674daeb18 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 17 Jun 2026 14:46:06 +0300
Subject: [PATCH] feat(frontend): add shimmer loading and instrument name in
 operations table

---
 .../pages/broker/BrokerOperationsTable.tsx    | 46 ++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx b/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
index 1a3c612..89539a5 100644
--- a/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
+++ b/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
@@ -6,6 +6,7 @@ import {
   getBrokerOperationTypeLabel,
   type BrokerOperationImpact,
 } from './brokerDisplay';
+import { TableSkeleton } from '../../components/TableSkeleton';
 
 const tableStyle = {
   width: '100%',
@@ -50,18 +51,28 @@ function moneyColor(impact: BrokerOperationImpact): string {
 }
 
 function OperationInstrument({ operation }: { operation: BrokerOperation }) {
-  const label = operation.ticker || operation.description || '-';
+  const ticker = operation.ticker || operation.description || '-';
   const path = getBrokerInstrumentPath({
     ticker: operation.ticker,
     instrumentType: operation.instrumentType,
     classCode: operation.classCode,
   });
+  const name = operation.name || operation.description;
 
-  if (!path || label === '-') {
-    return <span>{label}</span>;
-  }
+  if (!path && !name) return <span>-</span>;
+  if (!path) return <span>{name}</span>;
+  if (!ticker || ticker === '-') return <Link to={path}>{name}</Link>;
 
-  return <Link to={path}>{label}</Link>;
+  return (
+    <div style={{ display: 'grid', gap: 2 }}>
+      <Link to={path} style={{ fontWeight: 700 }}>
+        {ticker}
+      </Link>
+      {name && name !== ticker && (
+        <span style={{ color: 'var(--color-text-secondary)', fontSize: 12 }}>{name}</span>
+      )}
+    </div>
+  );
 }
 
 const pagButtonStyle = {
@@ -145,7 +156,30 @@ export function BrokerOperationsTable({
       </div>
 
       {isLoading ? (
-        <p>Загрузка операций...</p>
+        <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
+          <table style={tableStyle}>
+            <thead>
+              <tr>
+                <th align="left" style={thStyle}>
+                  Дата
+                </th>
+                <th align="left" style={thStyle}>
+                  Тип
+                </th>
+                <th align="left" style={thStyle}>
+                  Инструмент
+                </th>
+                <th align="right" style={thStyle}>
+                  Сумма
+                </th>
+              </tr>
+            </thead>
+            <TableSkeleton
+              rows={5}
+              columns={[{ width: '35%' }, { width: '30%' }, { width: '40%' }, { width: '25%' }]}
+            />
+          </table>
+        </div>
       ) : operations.length === 0 ? (
         <p style={{ color: 'var(--color-text-secondary)' }}>Операций за выбранный период нет</p>
       ) : (