Add loading icon to be displayed while fetching data from REST API

codeforkansascity · Oct 25, 2024 · aa34b6f · aa34b6f
1 parent 54d3512
commit aa34b6f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git 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
@@ -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); }
+}
diff --git 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">