feat: add loading overlay and spinner to PositionGroupTable

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

@@ -100,7 +100,7 @@ function PositionGroupTable({
   const [cursor, setCursor] = useState<string | undefined>(undefined);
 
   const query = group.type ? { type: group.type, limit: 10, cursor } : { limit: 100, cursor };
-  const { data: page, isLoading } = useBrokerPositions(accountId, query);
+  const { data: page, isLoading, isFetching } = useBrokerPositions(accountId, query);
 
   const rawPositions = page?.items ?? [];
   const positions = group.type
@@ -148,10 +148,17 @@ function PositionGroupTable({
             <button
               type="button"
               onClick={handlePrevious}
-              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={{
@@ -167,10 +174,17 @@ function PositionGroupTable({
             <button
               type="button"
               onClick={handleNext}
-              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>
         )}
@@ -213,6 +227,7 @@ function PositionGroupTable({
       )}
 
       {!isLoading && positions.length > 0 && (
+        <div className="table-container">
           <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
             <table aria-label={`Брокерские позиции: ${group.title}`} style={tableStyle}>
               <thead>
@@ -266,6 +281,15 @@ function PositionGroupTable({
               </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>
   );