Br1Im · Br1Im · May 13, 2026 · May 13, 2026
diff --git a/frontend/src/components/Acts.tsx b/frontend/src/components/Acts.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   Space,
   App,
-  Empty,
   Modal,
   DatePicker,
   Select,
@@ -28,6 +27,7 @@ import {
   InfoCircleOutlined,
   FileDoneOutlined,
 } from '@ant-design/icons';
+import { TableSkeleton, EmptyState } from './ui';
 import {
   actsApi,
   contractsApi,
@@ -393,15 +393,26 @@ const Acts: React.FC = () => {
       </FiltersRow>
 
       <TableCard>
-        <Table<CrmAct>
-          rowKey="id"
-          columns={columns}
-          dataSource={acts}
-          loading={loading}
-          pagination={{ pageSize: 12, showSizeChanger: true, showTotal: (t) => `Всего: ${t}` }}
-          locale={{ emptyText: <Empty description="Нет актов по выбранным фильтрам" /> }}
-          onRow={(r) => ({ onClick: () => openDetail(r) })}
-        />
+        {loading && acts.length === 0 ? (
+          <TableSkeleton rows={8} cols={columns.length} />
+        ) : (
+          <Table<CrmAct>
+            rowKey="id"
+            columns={columns}
+            dataSource={acts}
+            loading={loading}
+            pagination={{ pageSize: 12, showSizeChanger: true, showTotal: (t) => `Всего: ${t}` }}
+            locale={{
+              emptyText: (
+                <EmptyState
+                  title="Нет актов"
+                  description="По выбранным фильтрам результатов нет — попробуйте их очистить."
+                />
+              ),
+            }}
+            onRow={(r) => ({ onClick: () => openDetail(r) })}
+          />
+        )}
       </TableCard>
 
       {/* Модалка карточки акта */}

diff --git a/frontend/src/components/Applications.tsx b/frontend/src/components/Applications.tsx
@@ -2,8 +2,9 @@ import React, { useState, useCallback, useEffect } from 'react';
 import styled from '@emotion/styled';
 import dayjs from 'dayjs';
 import {
-  Table, Button, Space, App, Empty, Modal, Input, DatePicker, Popconfirm, Tag,
+  Table, Button, Space, App, Modal, Input, DatePicker, Popconfirm, Tag,
 } from 'antd';
+import { TableSkeleton, EmptyState } from './ui';
 import type { ColumnsType } from 'antd/es/table';
 import {
   PlusOutlined, ReloadOutlined, DeleteOutlined, FileTextOutlined,
@@ -106,15 +107,26 @@ const Applications: React.FC = () => {
         </Space>
       </ToolRow>
       <TableCard>
-        <Table<Application>
-          rowKey="id"
-          dataSource={data}
-          columns={columns}
-          loading={loading}
-          pagination={{ pageSize: 15, showSizeChanger: true, showTotal: (t) => `Всего: ${t}` }}
-          locale={{ emptyText: <Empty description="Нет заявлений" /> }}
-          size="middle"
-        />
+        {loading && data.length === 0 ? (
+          <TableSkeleton rows={8} cols={columns.length} withToolbar={false} />
+        ) : (
+          <Table<Application>
+            rowKey="id"
+            dataSource={data}
+            columns={columns}
+            loading={loading}
+            pagination={{ pageSize: 15, showSizeChanger: true, showTotal: (t) => `Всего: ${t}` }}
+            locale={{
+              emptyText: (
+                <EmptyState
+                  title="Нет заявлений"
+                  description="Заявления появятся здесь, как только вы их добавите."
+                />
+              ),
+            }}
+            size="middle"
+          />
+        )}
       </TableCard>
 
       <Modal

diff --git a/frontend/src/components/Appointments.tsx b/frontend/src/components/Appointments.tsx
@@ -11,6 +11,7 @@ import dayjs from 'dayjs';
 import 'dayjs/locale/ru';
 import { apiInstance } from '../shared/api/instance';
 import { useAuth } from '../shared/lib/hooks/useAuth';
+import { TableSkeleton } from './ui';
 import './Appointments.css';
 
 dayjs.locale('ru');
@@ -323,7 +324,7 @@ const Appointments: React.FC = () => {
   if (loading) {
     return (
       <div className="apt-container">
-        <div className="apt-loading">Загрузка записей...</div>
+        <TableSkeleton rows={6} cols={6} withToolbar />
       </div>
     );
   }

diff --git a/frontend/src/components/Arrivals.tsx b/frontend/src/components/Arrivals.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import styled from '@emotion/styled';
 import { Table, Select, Button, Space, App, Input, Tabs } from 'antd';
+import { TableSkeleton, EmptyState } from './ui';
 import type { ColumnsType } from 'antd/es/table';
 import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
 import { apiInstance } from '../shared/api/instance';
@@ -360,16 +361,27 @@ const Arrivals: React.FC = () => {
       {/* ─── Primary ─── */}
       {tab === 'primary' && (
         <TableCard>
-          <Table<PrimaryVisit>
-            dataSource={primaryVisits}
-            columns={primaryCols}
-            rowKey="id"
-            size="small"
-            pagination={false}
-            loading={loading}
-            locale={{ emptyText: 'Нет первичных приходов' }}
-            scroll={{ x: 900 }}
-          />
+          {loading && primaryVisits.length === 0 ? (
+            <TableSkeleton rows={6} cols={primaryCols.length} />
+          ) : (
+            <Table<PrimaryVisit>
+              dataSource={primaryVisits}
+              columns={primaryCols}
+              rowKey="id"
+              size="small"
+              pagination={false}
+              loading={loading}
+              locale={{
+                emptyText: (
+                  <EmptyState
+                    title="Нет первичных приходов"
+                    description="Первичные клиенты появятся здесь после регистрации визита."
+                  />
+                ),
+              }}
+              scroll={{ x: 900 }}
+            />
+          )}
         </TableCard>
       )}
 
@@ -408,16 +420,27 @@ const Arrivals: React.FC = () => {
           )}
 
           <TableCard>
-            <Table<ExistingVisit>
-              dataSource={existingVisits}
-              columns={existingCols}
-              rowKey="id"
-              size="small"
-              pagination={false}
-              loading={loading}
-              locale={{ emptyText: 'Нет приходов действующих клиентов' }}
-              scroll={{ x: 600 }}
-            />
+            {loading && existingVisits.length === 0 ? (
+              <TableSkeleton rows={5} cols={existingCols.length} />
+            ) : (
+              <Table<ExistingVisit>
+                dataSource={existingVisits}
+                columns={existingCols}
+                rowKey="id"
+                size="small"
+                pagination={false}
+                loading={loading}
+                locale={{
+                  emptyText: (
+                    <EmptyState
+                      title="Нет приходов действующих клиентов"
+                      description="Добавьте приход действующего клиента кнопкой выше."
+                    />
+                  ),
+                }}
+                scroll={{ x: 600 }}
+              />
+            )}
           </TableCard>
         </>
       )}

diff --git a/frontend/src/components/Cases.tsx b/frontend/src/components/Cases.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { Table, Tag, Button, Modal, Select, message, Drawer, Descriptions, List, Typography, Space, Empty, Tabs } from 'antd';
+import { Table, Tag, Button, Modal, Select, message, Drawer, Descriptions, List, Typography, Space, Tabs } from 'antd';
+import { TableSkeleton, EmptyState } from './ui';
 import { useAuth } from '../shared/lib/hooks/useAuth';
 import { buildApiUrl, getAuthHeaders } from '../shared/utils/apiUtils';
 
@@ -358,14 +359,25 @@ const Cases: React.FC = () => {
   // ---------- Docs cases table ----------
   const renderDocsTab = () => (
     <>
-      <Table
-        rowKey="id"
-        loading={loading}
-        dataSource={rows}
-        columns={columns as any}
-        size="small"
-        locale={{ emptyText: isExpert ? 'Нет назначенных дел' : 'Новых дел нет' }}
-      />
+      {loading && rows.length === 0 ? (
+        <TableSkeleton rows={6} cols={(columns as any).length || 5} />
+      ) : (
+        <Table
+          rowKey="id"
+          loading={loading}
+          dataSource={rows}
+          columns={columns as any}
+          size="small"
+          locale={{
+            emptyText: (
+              <EmptyState
+                title={isExpert ? 'Нет назначенных дел' : 'Новых дел нет'}
+                description={isExpert ? 'Новые дела появятся здесь после назначения.' : 'Неназначенные дела появятся здесь.'}
+              />
+            ),
+          }}
+        />
+      )}
 
       <Modal
         open={!!assignFor}
@@ -508,14 +520,25 @@ const Cases: React.FC = () => {
   // ---------- Representation tab ----------
   const renderRepresentationTab = () => (
     <>
-      <Table
-        rowKey="id"
-        loading={repLoading}
-        dataSource={repRows}
-        columns={repColumns as any}
-        size="small"
-        locale={{ emptyText: 'Нет договоров на представление интересов' }}
-      />
+      {repLoading && repRows.length === 0 ? (
+        <TableSkeleton rows={6} cols={(repColumns as any).length || 5} />
+      ) : (
+        <Table
+          rowKey="id"
+          loading={repLoading}
+          dataSource={repRows}
+          columns={repColumns as any}
+          size="small"
+          locale={{
+            emptyText: (
+              <EmptyState
+                title="Нет договоров на представление"
+                description="Договоры на представление интересов появятся здесь."
+              />
+            ),
+          }}
+        />
+      )}
 
       <Modal
         open={!!assignRepFor}

diff --git a/frontend/src/components/Documents.tsx b/frontend/src/components/Documents.tsx
@@ -5,6 +5,7 @@ import { useNotification } from '../hooks/useNotification';
 import { ToastContainer } from './Toast';
 import './Documents.css';
 import { FiEdit2, FiSearch, FiTrash2 } from 'react-icons/fi';
+import { TableSkeleton, EmptyState } from './ui';
 
 // Функция для перевода статусов на русский язык
 const getStatusText = (status: string) => {
@@ -825,7 +826,7 @@ const Documents: React.FC<DocumentsProps> = ({ contractId, headless = false }) =
       )}
 
       {!headless && (loading ? (
-        <div className="loading-indicator">Загрузка договоров...</div>
+        <TableSkeleton rows={8} cols={7} withToolbar={false} />
       ) : filteredDocuments.length > 0 ? (
         <div className="documents-table-container">
           <table className="documents-table">
@@ -880,9 +881,10 @@ const Documents: React.FC<DocumentsProps> = ({ contractId, headless = false }) =
           </table>
         </div>
       ) : (
-        <div className="no-documents">
-          <p>Документы не найдены</p>
-        </div>
+        <EmptyState
+          title="Документы не найдены"
+          description="Новые договоры появятся здесь после создания."
+        />
       ))}
 
       {/* Модальное окно для создания нового договора */}

diff --git a/frontend/src/components/Employees.tsx b/frontend/src/components/Employees.tsx
@@ -6,6 +6,7 @@ import { useAuth } from "../shared/lib/hooks/useAuth";
 import "./Lawyers.css";
 import "./Experts.css";
 import "./Employees.css";
+import { TableSkeleton, EmptyState } from "./ui";
 import "./EmployeesPolish.css";
 
 interface StaffMember {
@@ -596,7 +597,7 @@ const Employees = () => {
       </div>
 
       {loading ? (
-        <div className="no-employees"><p>Загрузка…</p></div>
+        <TableSkeleton rows={4} cols={3} withToolbar={false} />
       ) : filteredEmployees.length > 0 ? (
         <div className="employees-grid">
           {filteredEmployees.map((emp) => (
@@ -606,7 +607,10 @@ const Employees = () => {
           ))}
         </div>
       ) : (
-        <div className="no-employees"><p>Сотрудники не найдены</p></div>
+        <EmptyState
+          title="Сотрудники не найдены"
+          description="Попробуйте изменить фильтры или добавить нового сотрудника."
+        />
       )}
 
       {selectedEmployee && (

diff --git a/frontend/src/components/Expenses.tsx b/frontend/src/components/Expenses.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { buildApiUrl, getAuthHeaders } from '../shared/utils/apiUtils';
 import { useAuth } from '../shared/lib/hooks/useAuth';
+import { TableSkeleton } from './ui';
 import "./Expenses.css";
 
 interface SalaryDetail {
@@ -427,7 +428,7 @@ const Expenses: React.FC = () => {
       )}
 
       {loading ? (
-        <div className="exp-loading">{'\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432...'}</div>
+        <TableSkeleton rows={6} cols={4} withToolbar={false} />
       ) : summary ? (
         <div className="exp-table-wrapper">
           <table className="exp-table">

diff --git a/frontend/src/components/Materials.tsx b/frontend/src/components/Materials.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import "./Materials.css";
 import { buildApiUrl, getAuthHeaders } from "../shared/utils/apiUtils";
 import { useAuth } from "../shared/lib/hooks/useAuth";
+import { TableSkeleton } from "./ui";
 
 interface Employee {
   id: number;
@@ -401,7 +402,7 @@ const Materials: React.FC = () => {
       </div>
 
       {loading ? (
-        <div className="loading-indicator">Загрузка материалов дел...</div>
+        <TableSkeleton rows={5} cols={4} withToolbar={false} />
       ) : (
         <div className="cases-list">
           {cases.length > 0 ? (