NW-6 | AREEB-SATTAR | REACT| React Module Project - Loading Message | WEEK-4

src/components/Bookings/Bookings.jsx

@@ -3,20 +3,25 @@ import SearchResult from "../SearchResult/SearchResult";
 import { useState, useEffect } from "react";
 
 const Bookings = () => {
-  const [bookings, setBookings] = useState([]);
+    const [bookings, setBookings] = useState([]);
+    const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    fetch("https://nw6-cyf-hotel.glitch.me/fakebookings")
+    fetch("https://nw6-cyf-hotel.glitch.me/delayed")
       .then((res) => {
         if (!res.ok) {
           throw new Error(`${res.status}: ${getReasonPhrase(res.status)}`);
         }
         return res.json();
       })
-      .then((data) => setBookings(data))
+      .then((data) => {
+        setBookings(data);
+        setLoading(false);
+      })
       .catch((error) => {
         setFetchError(error);
         console.log(error);
+        setLoading(false);
       });
   }),
     [];
@@ -27,7 +32,8 @@ const Bookings = () => {
   return (
     <main className="bookings">
       <Search search={search} />
-      <SearchResult results={bookings} />
+      {loading && <p>Loading Information Please Wait...</p>}
+      {!loading && <SearchResult results={bookings} />}
     </main>
   );
 };

src/components/Bookings/Bookings.test.jsx

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import Bookings from "./Bookings.jsx";
 
 describe("Bookings Component", () => {
@@ -8,4 +8,24 @@ describe("Bookings Component", () => {
     const mainElement = screen.getByRole("main");
     expect(mainElement).toBeInTheDocument();
   });
+
+  it("displays the loading message initially", () => {
+    render(<Bookings />);
+    const loadingMessage = screen.getByText("Loading Information Please Wait...");
+    expect(loadingMessage).toBeInTheDocument();
+  });
+
+  it("hides the loading message when booking data is rendered", async () => {
+    global.fetch = () =>
+      Promise.resolve({
+        ok: true,
+        json: async() => [{ id: 1, name: "John Doe" }] ,
+      });
+
+    render(<Bookings />);
+    await waitFor(() => {
+      const loadingMessage = screen.queryByText('Loading Information Please Wait...');
+      expect(loadingMessage).not.toBeInTheDocument();
+    });
+  });
 });