From e98b39a9da66a830c876de46e103d230c06de0d9 Mon Sep 17 00:00:00 2001
From: Atharva <aaombase@gmail.com>
Date: Sun, 23 Feb 2025 00:26:27 +0530
Subject: [PATCH] Feat:Added loading text to be replaced with animation after

---
 Frontend/src/components/FarmList.jsx | 67 +++++++++++++++-------------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/Frontend/src/components/FarmList.jsx b/Frontend/src/components/FarmList.jsx
index 8b647d0..709f080 100644
--- a/Frontend/src/components/FarmList.jsx
+++ b/Frontend/src/components/FarmList.jsx
@@ -3,7 +3,7 @@ import Td from "./Td";
 
 const FarmList = () => {
   const [data, setData] = useState([]);
-
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     fetch("http://localhost:8000/api/v1/farm", {
       credentials: "include",
@@ -12,43 +12,48 @@ const FarmList = () => {
     })
       .then((response) => response.json())
       .then((data) => setData(data))
+      .then(setLoading(false))
       .catch((error) => console.error(error));
   }, []);
 
   return (
     <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
-      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-          <tr>
-            <th scope="col" className="px-6 py-3">
-              Farm name
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Location
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Type
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Size (acres)
-            </th>
-            <th scope="col" className="px-6 py-3">
-              Action
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.length > 0 ? (
-            data.map((item) => <Td key={item.id} children={item} />)
-          ) : (
+      {loading ? (
+        <div>Loading...</div>
+      ) : (
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
             <tr>
-              <td colSpan={5} className="text-center">
-                No data available
-              </td>
+              <th scope="col" className="px-6 py-3">
+                Farm name
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Location
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Type
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Size (acres)
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Action
+              </th>
             </tr>
-          )}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {data.length > 0 ? (
+              data.map((item) => <Td key={item.id} children={item} />)
+            ) : (
+              <tr>
+                <td colSpan={5} className="text-center">
+                  No data available
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
     </div>
   );
 };