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 FarmList = () => {
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
fetch("http://localhost:8000/api/v1/farm", { fetch("http://localhost:8000/api/v1/farm", {
credentials: "include", credentials: "include",
@@ -12,43 +12,48 @@ const FarmList = () => {
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => setData(data)) .then((data) => setData(data))
.then(setLoading(false))
.catch((error) => console.error(error)); .catch((error) => console.error(error));
}, []); }, []);
return ( return (
<div className="relative overflow-x-auto shadow-md sm:rounded-lg"> <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"> {loading ? (
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> <div>Loading...</div>
<tr> ) : (
<th scope="col" className="px-6 py-3"> <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
Farm name <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
</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} />)
) : (
<tr> <tr>
<td colSpan={5} className="text-center"> <th scope="col" className="px-6 py-3">
No data available Farm name
</td> </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> </tr>
)} </thead>
</tbody> <tbody>
</table> {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> </div>
); );
}; };