wip: add user orders page useInView and preloader

src/pages/dex/orders/index.tsx

@@ -16,6 +16,8 @@ import useUpdateUser from '@/hook/useUpdateUser';
 import { Footer } from '@/zano_ui/src';
 import { GetUserOrdersBodyStatus } from '@/interfaces/fetch-data/get-user-orders/GetUserOrdersData';
 import Decimal from 'decimal.js';
+import { useInView } from 'react-intersection-observer';
+import Preloader from '@/components/UI/Preloader/Preloader';
 import OrdersTable from './OrdersTable/OrdersTable';
 
 const ORDERS_PER_PAGE = 10;
@@ -23,6 +25,13 @@ const ORDERS_PER_PAGE = 10;
 function Orders() {
 	const fetchUser = useUpdateUser();
 
+	const { ref: inViewRef } = useInView({
+		threshold: 0,
+		onChange: (inView) => {
+			console.log('In view:', inView);
+		},
+	});
+
 	const ordersCategories = [
 		{
 			name: 'Active orders',
@@ -278,6 +287,10 @@ function Orders() {
 						setOrders={setOrders}
 						category={categoryState.code}
 					/>
+
+					<div className={styles['orders__preloader-wrapper']} ref={inViewRef}>
+						<Preloader />
+					</div>
 				</div>
 				{alertState && (
 					<Alert

src/styles/Orders.module.scss

@@ -92,5 +92,10 @@
 				}
 			}
 		}
+
+		.orders__preloader-wrapper {
+			display: flex;
+			justify-content: center;
+		}
 	}
 }