Replace the Spinner in payments

web/apps/payments/src/components/EnteSpinner.tsx

@@ -1,10 +1,5 @@
 import * as React from "react";
-import { Spinner } from "react-bootstrap";
 
-export const EnteSpinner: React.FC = () => {
-    return (
-        <Spinner animation="border" variant="success" role="status">
-            <span className="sr-only">Loading...</span>
-        </Spinner>
-    );
+export const Spinner: React.FC = () => {
+    return <div className="loading-spinner"></div>;
 };

web/apps/payments/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import { Container } from "components/Container";
-import { EnteSpinner } from "components/EnteSpinner";
+import { Spinner } from "components/EnteSpinner";
 import * as React from "react";
 import { parseAndHandleRequest } from "services/billingService";
 import { CUSTOM_ERROR } from "utils/error";
@@ -35,7 +35,7 @@ export default function Home() {
             {errorMessageView ? (
                 <div>{constants.SOMETHING_WENT_WRONG}</div>
             ) : (
-                loading && <EnteSpinner />
+                loading && <Spinner />
             )}
         </Container>
     );

web/apps/payments/src/styles/globals.css

@@ -20,3 +20,19 @@ body {
     display: flex;
     flex-direction: column;
 }
+
+.loading-spinner {
+    color: #28a745;
+    width: 2rem;
+    height: 2rem;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: 0.75s linear infinite spinner-border;
+}
+
+@keyframes spinner-border {
+    100% {
+        transform: rotate(360deg);
+    }
+}