From 26371381e0bd25f417b05626886fb98aeaa2b266 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Thu, 18 Jun 2026 06:59:43 +0300
Subject: [PATCH] feat: add loading overlay and spinner to
 BrokerOperationsTable

---
 .../pages/broker/BrokerOperationsTable.tsx    | 123 +++++++++++-------
 1 file changed, 74 insertions(+), 49 deletions(-)

diff --git a/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx b/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
index 89539a5..62f32b4 100644
--- a/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
+++ b/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
@@ -95,6 +95,7 @@ const pagButtonDisabledStyle = {
 
 export function BrokerOperationsTable({
   isLoading,
+  isFetching,
   page,
   pageNumber,
   canGoBack,
@@ -103,6 +104,7 @@ export function BrokerOperationsTable({
   onNext,
 }: {
   isLoading: boolean;
+  isFetching: boolean;
   page: BrokerOperationsPage | undefined;
   pageNumber: number;
   canGoBack: boolean;
@@ -128,10 +130,17 @@ export function BrokerOperationsTable({
           <button
             type="button"
             onClick={onPrevious}
-            disabled={!canGoBack}
-            style={canGoBack ? pagButtonStyle : pagButtonDisabledStyle}
+            disabled={!canGoBack || isFetching}
+            style={canGoBack && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
           >
-            ←
+            {isFetching ? (
+              <span
+                className="loading-spinner"
+                style={{ width: 14, height: 14, display: 'block' }}
+              />
+            ) : (
+              '←'
+            )}
           </button>
           <span
             style={{
@@ -147,10 +156,17 @@ export function BrokerOperationsTable({
           <button
             type="button"
             onClick={onNext}
-            disabled={!canGoForward}
-            style={canGoForward ? pagButtonStyle : pagButtonDisabledStyle}
+            disabled={!canGoForward || isFetching}
+            style={canGoForward && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
           >
-            →
+            {isFetching ? (
+              <span
+                className="loading-spinner"
+                style={{ width: 14, height: 14, display: 'block' }}
+              />
+            ) : (
+              '→'
+            )}
           </button>
         </div>
       </div>
@@ -180,51 +196,60 @@ export function BrokerOperationsTable({
             />
           </table>
         </div>
-      ) : operations.length === 0 ? (
+      ) : operations.length === 0 && !isFetching ? (
         <p style={{ color: 'var(--color-text-secondary)' }}>Операций за выбранный период нет</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>
-            <tbody>
-              {operations.map((operation) => {
-                const impact = getBrokerOperationImpact(operation);
-
-                return (
-                  <tr key={operation.cursor || operation.id}>
-                    <td style={tdStyle}>{formatDate(operation.date)}</td>
-                    <td style={tdStyle}>
-                      <span>{getBrokerOperationTypeLabel(operation)}</span>
-                    </td>
-                    <td style={tdStyle}>
-                      <OperationInstrument operation={operation} />
-                    </td>
-                    <td
-                      align="right"
-                      style={{ ...tdStyle, color: moneyColor(impact), fontWeight: 700 }}
-                    >
-                      {formatMoney(operation.payment)}
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+        <div className="table-container">
+          <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>
+              <tbody>
+                {operations.map((operation) => {
+                  const impact = getBrokerOperationImpact(operation);
+                  return (
+                    <tr key={operation.cursor || operation.id}>
+                      <td style={tdStyle}>{formatDate(operation.date)}</td>
+                      <td style={tdStyle}>
+                        <span>{getBrokerOperationTypeLabel(operation)}</span>
+                      </td>
+                      <td style={tdStyle}>
+                        <OperationInstrument operation={operation} />
+                      </td>
+                      <td
+                        align="right"
+                        style={{ ...tdStyle, color: moneyColor(impact), fontWeight: 700 }}
+                      >
+                        {formatMoney(operation.payment)}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          {isFetching && (
+            <div className="table-loading-overlay">
+              <div className="loading-spinner" />
+              <span style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
+                Загрузка страницы {pageNumber}…
+              </span>
+            </div>
+          )}
         </div>
       )}
     </section>