From 3330b41b0753bbc1a2d727878824ff710de75fc1 Mon Sep 17 00:00:00 2001
From: man0s <95379755+losman0s@users.noreply.github.com>
Date: Wed, 20 Sep 2023 21:51:58 +0800
Subject: [PATCH] feat(mfi-v2-ui): spinner when refreshing quotes

---
 apps/marginfi-v2-ui/src/components/Spinner.tsx      | 13 +++++++++++++
 .../components/Staking/StakingCard/StakingCard.tsx  | 11 ++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 apps/marginfi-v2-ui/src/components/Spinner.tsx

diff --git a/apps/marginfi-v2-ui/src/components/Spinner.tsx b/apps/marginfi-v2-ui/src/components/Spinner.tsx
new file mode 100644
index 0000000000..3465d54687
--- /dev/null
+++ b/apps/marginfi-v2-ui/src/components/Spinner.tsx
@@ -0,0 +1,13 @@
+export const Spinner = () => (              <svg
+  className="animate-spin ml-1 mr-3 h-5 w-5 text-white"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <circle width="opacity-10" cx="12" cy="12" r="10" stroke="#aaa" strokeWidth="4"></circle>
+  <path
+    width="opacity-100"
+    fill="#DCE85D"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  ></path>
+</svg>) 
diff --git a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx
index 02392b0966..234be202e3 100644
--- a/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx
+++ b/apps/marginfi-v2-ui/src/components/Staking/StakingCard/StakingCard.tsx
@@ -42,6 +42,7 @@ import { SettingsIcon } from "./SettingsIcon";
 import { SOL_MINT, TokenData, TokenDataMap } from "~/store/lstStore";
 import { RefreshIcon } from "./RefreshIcon";
 import { StakePoolProxyProgram } from "~/utils/stakePoolProxy";
+import { Spinner } from "~/components/Spinner";
 
 const QUOTE_EXPIRY_MS = 30_000;
 
@@ -458,7 +459,15 @@ export const StakingCard: FC = () => {
             loading={connected && !!ongoingAction}
             onClick={connected ? onMint : openWalletSelector}
           >
-            {!connected ? "connect" : ongoingAction ? `${ongoingAction}...` : "mint"}
+            {!connected ? (
+              "connect"
+            ) : ongoingAction ? (
+              `${ongoingAction}...`
+            ) : refreshingQuotes ? (
+              <Spinner />
+            ) : (
+              "mint"
+            )}
           </PrimaryButton>
         </div>
         <div className="flex flex-row justify-between w-full my-auto">