From 4299f57e2d6c23a716373365d5d6d12e24136420 Mon Sep 17 00:00:00 2001
From: Umar Adilov <99314948+adilovcode@users.noreply.github.com>
Date: Wed, 14 May 2025 20:21:29 +0500
Subject: [PATCH] Added loader while loading transactions

---
 .../(dashboard)/corporate-dashboard/index.tsx |  8 ++++--
 .../(dashboard)/customer-dashboard/index.tsx  |  8 ++++--
 src/pages-templates/login/index.tsx           |  5 +++-
 src/shared/components/spinner.tsx             | 20 +++++++++++++
 .../components/table-loading-overlay.tsx      | 28 +++++++++++++++++++
 src/widgets/transactions-table.tsx            |  8 ++++--
 6 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 src/shared/components/spinner.tsx
 create mode 100644 src/shared/components/table-loading-overlay.tsx

diff --git a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
index 912c887..6b65627 100644
--- a/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
@@ -32,8 +32,11 @@ export function CorporateDashboard() {
     page: 1,
   });
 
-  const { data: transactionsResponse, refetch } =
-    useFetchCorporateTransactionsQuery(request);
+  const {
+    data: transactionsResponse,
+    refetch,
+    isLoading,
+  } = useFetchCorporateTransactionsQuery(request);
 
   useEffect(() => {
     refetch();
@@ -160,6 +163,7 @@ export function CorporateDashboard() {
           </div>
 
           <TransactionsTable
+            isLoading={isLoading}
             data={
               transactionsResponse || {
                 limit: 10,
diff --git a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
index c60743c..cbba5c6 100644
--- a/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
+++ b/src/pages-templates/(dashboard)/customer-dashboard/index.tsx
@@ -33,8 +33,11 @@ export function CustomerDashboard() {
 
   const { data, isLoading } = useFetchMyBonusInfoQuery({});
 
-  const { data: transactionsResponse, refetch } =
-    useFetchBonusTransactionsQuery(request);
+  const {
+    data: transactionsResponse,
+    refetch,
+    isLoading: isTransactionLoading,
+  } = useFetchBonusTransactionsQuery(request);
 
   useEffect(() => {
     refetch();
@@ -149,6 +152,7 @@ export function CustomerDashboard() {
           </div>
 
           <TransactionsTable
+            isLoading={isTransactionLoading}
             data={
               transactionsResponse || {
                 limit: 10,
diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx
index 29f231f..8036332 100644
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@@ -155,7 +155,10 @@ export default function LoginPage() {
             <div className='mt-8 text-center text-sm text-gray-500'>
               <p>
                 {t('auth.loginIssues')}{' '}
-                <Link href='mailto:info@oriyo.tj' className='text-red-600 hover:underline'>
+                <Link
+                  href='mailto:info@oriyo.tj'
+                  className='text-red-600 hover:underline'
+                >
                   {t('auth.contactLink')}
                 </Link>
               </p>
diff --git a/src/shared/components/spinner.tsx b/src/shared/components/spinner.tsx
new file mode 100644
index 0000000..db4fab9
--- /dev/null
+++ b/src/shared/components/spinner.tsx
@@ -0,0 +1,20 @@
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+interface SpinnerProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function Spinner({ className, size = 'md' }: SpinnerProps) {
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
+  };
+
+  return (
+    <Loader2 className={cn(`animate-spin ${sizeClasses[size]}`, className)} />
+  );
+}
diff --git a/src/shared/components/table-loading-overlay.tsx b/src/shared/components/table-loading-overlay.tsx
new file mode 100644
index 0000000..1c8ad34
--- /dev/null
+++ b/src/shared/components/table-loading-overlay.tsx
@@ -0,0 +1,28 @@
+import { cn } from '../lib/utils';
+import { Spinner } from './spinner';
+
+interface TableLoadingOverlayProps {
+  isLoading: boolean;
+  message?: string;
+  className?: string;
+}
+
+export default function TableLoadingOverlay({
+  isLoading,
+  message = 'Загрузка данных...',
+  className,
+}: TableLoadingOverlayProps) {
+  if (!isLoading) return null;
+
+  return (
+    <div
+      className={cn(
+        'absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/80 backdrop-blur-[1px] transition-opacity duration-200',
+        className,
+      )}
+    >
+      <Spinner size='lg' className='mb-2 text-red-600' />
+      <p className='font-medium text-gray-700'>{message}</p>
+    </div>
+  );
+}
diff --git a/src/widgets/transactions-table.tsx b/src/widgets/transactions-table.tsx
index 9a90181..f0c71ef 100644
--- a/src/widgets/transactions-table.tsx
+++ b/src/widgets/transactions-table.tsx
@@ -10,6 +10,7 @@ import {
   TransactionResponse,
 } from '@/entities/transactions/model/types';
 
+import TableLoadingOverlay from '@/shared/components/table-loading-overlay';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Calendar } from '@/shared/shadcn-ui/calendar';
@@ -39,11 +40,13 @@ import {
 
 export interface TransactionsTableProps {
   onChange: (request: TransactionRequest) => void;
+  isLoading: boolean;
   data: TransactionResponse;
 }
 
 export const TransactionsTable = ({
   data,
+  isLoading,
   onChange,
 }: TransactionsTableProps) => {
   const [startDate, setStartDate] = useState<Date | undefined>(
@@ -98,7 +101,8 @@ export const TransactionsTable = ({
   if (!data) return null;
 
   return (
-    <div className='space-y-6'>
+    <div className='relative space-y-6'>
+      <TableLoadingOverlay isLoading={isLoading} />
       <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
         <h2 className='text-2xl font-bold'>
           {t('corporate.transactions.title')}
@@ -169,7 +173,7 @@ export const TransactionsTable = ({
         </div>
       </div>
 
-      <div className='rounded-md border'>
+      <div className='relative rounded-md border'>
         <Table>
           <TableHeader>
             <TableRow>