added loading feature (#93) fix issue#76

* added loading feature * added loading feature * updated app/page.jsx
IMGIITRoorkee · Jan 14, 2025 · fa35aa7 · fa35aa7
1 parent f595760
commit fa35aa7
Showing 1 changed file with 44 additions and 6 deletions.
diff --git a/app/page.jsx b/app/page.jsx
@@ -18,7 +18,7 @@ const getTickets = async () => {
 
     return res.json();
   } catch (error) {
-    console.log("Error loading tickets: ", error);
+    console.error("Error loading tickets: ", error);
     return { tickets: [] };
   }
 };
@@ -28,16 +28,43 @@ const Dashboard = () => {
   const [filteredTickets, setFilteredTickets] = useState([]);
   const [statusFilter, setStatusFilter] = useState("all");
   const [viewBy, setViewBy] = useState("category");
+  const [isLoading, setIsLoading] = useState(true);
+  const timeout = 5000;
   const [groupVisibility, setGroupVisibility] = useState({});
 
   useEffect(() => {
-    const fetchTickets = async () => {
-      const data = await getTickets();
-      setTickets(data?.tickets || []);
-      setFilteredTickets(data?.tickets || []);
+    let ticketFetchTimeout;
+
+    const fetchTicketsWithTimeout = async () => {
+      setIsLoading(true);
+
+      try {
+        const ticketsPromise = getTickets();
+        ticketFetchTimeout = setTimeout(() => {
+          setTickets([]);
+          setFilteredTickets([]);
+          setIsLoading(false);
+        }, timeout);
+
+        const data = await ticketsPromise;
+        clearTimeout(ticketFetchTimeout);
+
+        setTickets(data.tickets);
+        setFilteredTickets(data.tickets);
+      } catch (error) {
+        console.error("Error fetching tickets:", error);
+        setTickets([]);
+        setFilteredTickets([]);
+      } finally {
+        setIsLoading(false);
+      }
     };
 
-    fetchTickets();
+    fetchTicketsWithTimeout();
+
+    return () => {
+      if (ticketFetchTimeout) clearTimeout(ticketFetchTimeout);
+    };
   }, []);
 
   useEffect(() => {
@@ -75,6 +102,17 @@ const Dashboard = () => {
     }));
   };
 
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen">
+        <div className="spinner-border animate-spin inline-block w-16 h-16 border-8 rounded-full border-t-blue-600 border-r-transparent border-b-blue-600 border-l-transparent"></div>
+        <p className="mt-4 text-lg font-medium text-dark-gray-700">
+          Loading tickets, please wait...
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="p-5">
       {tickets.length === 0 ? (