ok

src/pages/Transactions.js

@@ -11,6 +11,7 @@ import {
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
+import { ThreeDots } from "react-loader-spinner";
 
 import ButtonWithReplica from "../components/ButtonWithReplica";
 
@@ -27,6 +28,8 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
   const [searchTerm, setSearchTerm] = useState('');
 const [matchedItems, setMatchedItems] = useState([]);
 
+  const [loading, setLoading] = useState(false);
+
 useEffect(() => {
   setMatchedItems(searchAndAggregateItems(transactions, searchTerm));
 }, [searchTerm, transactions]);
@@ -35,8 +38,10 @@ useEffect(() => {
   useEffect(() => {
     const fetchTransactions = async () => {
       try {
+        setLoading(true);
         let response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
-        console.log(response)
+        
+        setLoading(false);
         if (response) setTransactions(response);
       } catch (error) {
         console.error("Error fetching transactions:", error);
@@ -127,6 +132,15 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
     }
   };
 
+  if (loading)
+    return (
+      <div className="Loader">
+        <div className="LoaderChild">
+          <ThreeDots />
+          <h1></h1>
+        </div>
+      </div>
+    );
   return (
     <div className={styles.Transactions}>
       <h2 className={styles["Transactions-title"]}>