feat: Add a Loading Indicator for API Calls (#6)

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 client/node_modules/
 server/node_modules/
+__pycache__/
+*.pyc
+*.pyo

client/src/Dashboard.jsx

@@ -1,24 +1,31 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { getBalance, transferMoney } from "./api";
+import LoadingSpinner from "./components/LoadingSpinner";
 
 function Dashboard() {
   const [balance, setBalance] = useState(0);
   const [to, setTo] = useState("");
   const [amount, setAmount] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [transferring, setTransferring] = useState(false);
 
   useEffect(() => {
     loadBalance();
   }, []);
 
   const loadBalance = async () => {
+    setLoading(true);
     const data = await getBalance();
     setBalance(data.balance);
+    setLoading(false);
   };
 
   const handleTransfer = async () => {
+    setTransferring(true);
     const data = await transferMoney(to, amount);
     alert(data.message);
-    loadBalance();
+    await loadBalance();
+    setTransferring(false);
   };
 
   const logout = () => {
@@ -29,17 +36,31 @@ function Dashboard() {
   return (
     <div>
       <h2>Dashboard</h2>
-      <h3>Balance: ₹{balance}</h3>
+
+      {loading ? (
+        <LoadingSpinner />
+      ) : (
+        <h3>Balance: ₹{balance}</h3>
+      )}
 
       <h3>Transfer Money</h3>
-      <input placeholder="Recipient Username" onChange={e => setTo(e.target.value)} />
-      <input placeholder="Amount" type="number" onChange={e => setAmount(e.target.value)} />
-      <button onClick={handleTransfer}>Send</button>
+      <input
+        placeholder="Recipient Username"
+        onChange={e => setTo(e.target.value)}
+      />
+      <input
+        placeholder="Amount"
+        type="number"
+        onChange={e => setAmount(e.target.value)}
+      />
+      <button onClick={handleTransfer} disabled={transferring}>
+        {transferring ? 'Sending…' : 'Send'}
+      </button>
 
       <br /><br />
       <button onClick={logout}>Logout</button>
     </div>
   );
 }
 
-export default Dashboard;
+export default Dashboard;

client/src/api.js

@@ -28,6 +28,11 @@ export const getBalance = async () => {
   return res.json();
 };
 
+export const getPosts = async () => {
+  const res = await fetch(`${API_URL}/api/posts`);
+  return res.json();
+};
+
 export const transferMoney = async (to, amount) => {
   const token = localStorage.getItem("token");
   const res = await fetch(`${API_URL}/api/transfer`, {

client/src/components/LoadingSpinner.jsx

@@ -0,0 +1,9 @@
+import styles from './LoadingSpinner.module.css';
+
+export default function LoadingSpinner() {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.spinner} role="status" aria-label="Loading" />
+    </div>
+  );
+}

client/src/components/LoadingSpinner.module.css

@@ -0,0 +1,21 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #e0e0e0;
+  border-top-color: #333;
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

client/src/pages/Home.jsx

@@ -1,10 +1,41 @@
-import React from 'react';
+import { useState, useEffect } from "react";
+import { getPosts } from "../api";
+import LoadingSpinner from "../components/LoadingSpinner";
 
 function Home() {
+  const [posts, setPosts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    getPosts()
+      .then((data) => setPosts(data || []))
+      .catch(() => setError("Failed to load posts."))
+      .finally(() => setLoading(false));
+  }, []);
+
   return (
-  <div>
-    <h1 className="red-bordered-heading">Welcome to DevStations E-Learning Platform</h1>
-  </div>
+    <div style={{ padding: "1rem 2rem" }}>
+      <h1 className="red-bordered-heading">
+        Welcome to DevStations E-Learning Platform
+      </h1>
+
+      {loading && <LoadingSpinner />}
+
+      {error && <p style={{ color: "red" }}>{error}</p>}
+
+      {!loading && !error && posts.length === 0 && <p>No posts yet.</p>}
+
+      {posts.map((post) => (
+        <div
+          key={post.id}
+          style={{ borderBottom: "1px solid #ddd", padding: "1rem 0" }}
+        >
+          <h2 style={{ margin: "0 0 0.25rem" }}>{post.title}</h2>
+          <p style={{ margin: 0, color: "#555" }}>{post.body}</p>
+        </div>
+      ))}
+    </div>
   );
 }