Created a cute little custom spinner that can work with the fa icons; need to figure out how to make background transparent.

ShopOnline.Web/Pages/DisplayCustomSpinner.razor

@@ -0,0 +1 @@
+<div class="lds-spin"><i class="custom fa-regular fa-heart fa-10x" style="background: transparent;"></i></div>

ShopOnline.Web/Pages/DisplayCustomSpinner.razor.css

@@ -0,0 +1,47 @@
+.lds-spin {
+    display: inline-block;
+    transform: translateZ(1px);
+}
+
+    .lds-spin > i {
+        margin-top: 2em;
+        padding: 30px;
+        border-radius: 65%;
+        display: inline-block;
+        box-shadow:  inset 0 0 50px #fff, /* inner white */
+            inset 20px 0 80px #f0f, /* inner left magenta short */
+            inset -20px 0 80px #0ff, /* inner right cyan short */
+            inset 20px 0 300px #f0f, /* inner left magenta broad */
+            inset -20px 0 300px #0ff, /* inner right cyan broad */
+            0 0 50px #fff, /* outer white */
+            -10px 0 80px #f0f, /* outer left magenta */
+            10px 0 80px #0ff; /* outer right cyan */
+        animation: lds-spin 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+        color: floralwhite;
+    }
+
+
+
+.custom {
+    background: transparent;
+    
+}
+
+@keyframes lds-spin {
+    0%, 100% {
+        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+    }
+
+    0% {
+        transform: rotateY(0deg);
+    }
+
+    50% {
+        transform: rotateY(1800deg);
+        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+    }
+
+    100% {
+        transform: rotateY(3600deg);
+    }
+}

ShopOnline.Web/Pages/ProductDetails.razor

@@ -5,7 +5,7 @@
 {
     <div class="row d-flex justify-content-center">
         <div class="col-md-1">
-            <DisplaySpinner />
+            <DisplayCustomSpinner />
         </div>
     </div>
 }

ShopOnline.Web/Pages/Products.razor

@@ -6,7 +6,7 @@
 {
     <div class="row d-flex justify-content-center">
         <div class="col-md-1">
-            <DisplaySpinner/>
+            <DisplayCustomSpinner/>
         </div>
     </div>
 

ShopOnline.Web/Pages/ShoppingCart.razor

@@ -4,7 +4,7 @@
 @if(ShoppingCartItems == null && ErrorMessage == null) {
     <div class="row d-flex justify-content-center">
         <div class="col-md-1">
-            <DisplaySpinner />
+            <DisplayCustomSpinner />
         </div>
     </div>
 }