notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Feat:Added loading text to be replaced with animation after

Browse Source
This commit is contained in:
Atharva
2025-02-23 00:26:27 +05:30
parent ae9108769c
commit e98b39a9da
1 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/FarmList.jsx
+36 -31
View File
@@ -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>
);
};