From aa34b6f86917732690e7a4c0ed265c3617a45c0d Mon Sep 17 00:00:00 2001
From: dross20 <drew.e.ross@gmail.com>
Date: Thu, 24 Oct 2024 19:57:33 -0500
Subject: [PATCH] Add loading icon to be displayed while fetching data from
 REST API

---
 src/DonationCharityForm/DonationCharityForm.tsx |  1 +
 src/DonationForm/DonationForm.css               | 16 ++++++++++++++++
 src/DonationItemForm/DonationItemForm.tsx       |  1 +
 3 files changed, 18 insertions(+)

diff --git a/src/DonationCharityForm/DonationCharityForm.tsx b/src/DonationCharityForm/DonationCharityForm.tsx
index bd6c443..112f787 100644
--- a/src/DonationCharityForm/DonationCharityForm.tsx
+++ b/src/DonationCharityForm/DonationCharityForm.tsx
@@ -72,6 +72,7 @@ function charityForm () {
         }}>
          {selectedOrg.length === org.length ? 'Deselect All' : 'Select All'}
       </a>
+      {org.length === 0 ? ( <div class="loader"></div> ) : <></>}
       <div className="checkbox-grid">
         {org.map((org) => (
           <label key={org.id} className="checkbox-label">
diff --git a/src/DonationForm/DonationForm.css b/src/DonationForm/DonationForm.css
index 6d5ffec..28e29eb 100644
--- a/src/DonationForm/DonationForm.css
+++ b/src/DonationForm/DonationForm.css
@@ -80,3 +80,19 @@ form label:hover {
     width: 100%;  /* Stack labels on small screens */
   }
 }
+
+.loader {
+  border: 4px solid #f3f3f3; /* Light grey */
+  border-top: 4px solid #3498db; /* Blue */
+  border-radius: 100%;
+  width: 24px;
+  height: 24px;
+  animation: spin 2s linear infinite;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/src/DonationItemForm/DonationItemForm.tsx b/src/DonationItemForm/DonationItemForm.tsx
index 3538d66..ac7408d 100644
--- a/src/DonationItemForm/DonationItemForm.tsx
+++ b/src/DonationItemForm/DonationItemForm.tsx
@@ -62,6 +62,7 @@ import './DonationItemsForm.css'; // Assuming you create a CSS file for styling
           }}>
           Clear selections
         </a>
+        {items.length === 0 ? ( <div class="loader"></div> ) : <></>}
         <div className="checkbox-grid">
             {items.map((item) => (
               <label key={item.id} className="checkbox-label">