From 1688f4e0acbd560a09fa4e6bd06ffa6fbd5a000c Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 5 Oct 2024 09:26:02 +0530
Subject: [PATCH] add : component to show loading

---
 src/components/Loading/payment-loading.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/components/Loading/payment-loading.tsx

diff --git a/src/components/Loading/payment-loading.tsx b/src/components/Loading/payment-loading.tsx
new file mode 100644
index 0000000..479c62b
--- /dev/null
+++ b/src/components/Loading/payment-loading.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { Loader2 } from "lucide-react"
+
+export function PaymentLoading() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[200px] p-4 bg-background rounded-lg shadow-md">
+      <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+      <h2 className="text-2xl font-semibold text-foreground mb-2">Processing Payment</h2>
+      <p className="text-muted-foreground text-center">
+        Please wait while we process your payment. This may take a few moments.
+      </p>
+      <div className="mt-6 flex items-center space-x-2">
+        <div className="h-2 w-2 bg-primary rounded-full animate-bounce" />
+        <div className="h-2 w-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0.2s" }} />
+        <div className="h-2 w-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0.4s" }} />
+      </div>
+    </div>
+  )
+}
\ No newline at end of file