feat: add loading states

pages/rates.js

@@ -4,6 +4,7 @@ import { fetchData } from '../utils/api';
 
 export default function Rates() {
     const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         const fetchDataFromApi = async () => {
@@ -13,6 +14,8 @@ export default function Rates() {
                 setData(apiData);
             } catch (error) {
                 console.error('Error fetching data:', error);
+            } finally {
+                setLoading(false); // Set loading to false regardless of success or error
             }
         };
 
@@ -43,15 +46,17 @@ export default function Rates() {
             <main>
                 <h2>For €1 you'll get the following rates</h2>
                 <section className="hero">
-                    {data && (
+                    {loading ? (
+                        <div><p> Loading...</p></div>
+                    ) : data && (
                         <div>
-                            <p>Send: {formatCurrency(data.send)}</p>
+                            <p><a href='https://send.flutterwave.com/'>Send: </a>{formatCurrency(data.send)}</p>
-                            <p>TapTap: {formatCurrency(data.tap)}</p>
+                            <p><a href='https://www.taptapsend.com/'>TapTap: </a>{formatCurrency(data.tap)}</p>
-                            <p>AceTransfer: {formatCurrency(data.ace)}</p>
+                            <p><a href='https://acemoneytransfer.com/referral-link/3056004'>AceTransfer: </a>{formatCurrency(data.ace)}</p>
                         </div>
                     )}
                 </section>
             </main>
-        </div>
+        </div >
     );
 }