From 8ae7ae2de9f76eda5a6288f313deb4bcefe6af78 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 1 Apr 2024 15:31:55 +0530
Subject: [PATCH] Replace the Spinner in payments

---
 web/apps/payments/src/components/EnteSpinner.tsx |  9 ++-------
 web/apps/payments/src/pages/index.tsx            |  4 ++--
 web/apps/payments/src/styles/globals.css         | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/apps/payments/src/components/EnteSpinner.tsx b/web/apps/payments/src/components/EnteSpinner.tsx
index 277857e0ef..d65c736143 100644
--- a/web/apps/payments/src/components/EnteSpinner.tsx
+++ b/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>;
 };
diff --git a/web/apps/payments/src/pages/index.tsx b/web/apps/payments/src/pages/index.tsx
index 69288efa78..93535f9c5f 100644
--- a/web/apps/payments/src/pages/index.tsx
+++ b/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>
     );
diff --git a/web/apps/payments/src/styles/globals.css b/web/apps/payments/src/styles/globals.css
index d0d1ccf237..e75d7598d1 100644
--- a/web/apps/payments/src/styles/globals.css
+++ b/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);
+    }
+}