From 88f2cc11173f124186a1de99a18c3844edb72576 Mon Sep 17 00:00:00 2001
From: Isha <ishavenikar7@gmail.com>
Date: Fri, 8 Nov 2024 15:13:31 +0530
Subject: [PATCH] Display spinner till accounts data response is received

---
 .../projects/create/AccountsDropdown.tsx      | 66 +++++++++++--------
 .../components/projects/create/Configure.tsx  |  4 +-
 .../projects/create/IFrameModal.tsx           |  3 +
 3 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/projects/create/AccountsDropdown.tsx b/packages/frontend/src/components/projects/create/AccountsDropdown.tsx
index d885a018..95b1451b 100644
--- a/packages/frontend/src/components/projects/create/AccountsDropdown.tsx
+++ b/packages/frontend/src/components/projects/create/AccountsDropdown.tsx
@@ -1,44 +1,52 @@
-import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
+import { Select, Option, Spinner } from '@snowballtools/material-tailwind-react-fork';
 
 const AccountsDropdown = ({
   accounts,
+  isDataReceived,
   onAccountChange,
 }: {
   accounts: string[];
+  isDataReceived: boolean;
   onAccountChange: (selectedAccount: string) => void;
 }) => {
   return (
     <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
-      {!accounts.length ? (
-        <div className="text-center">
-          <p className="text-gray-700 dark:text-gray-300 mb-4">
-            No accounts found. Please visit{' '}
-            <a
-              href="https://store.laconic.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-600 underline dark:text-blue-400"
+      {isDataReceived ? (
+        !accounts.length ? (
+          <div className="text-center">
+            <p className="text-gray-700 dark:text-gray-300 mb-4">
+              No accounts found. Please visit{' '}
+              <a
+                href="https://store.laconic.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 underline dark:text-blue-400"
+              >
+                store.laconic.com
+              </a>{' '}
+              to create a wallet.
+            </p>
+          </div>
+        ) : (
+          <div>
+            <Select
+              label="Select Account"
+              defaultValue={accounts[0]}
+              onChange={(value) => value && onAccountChange(value)}
+              className="dark:bg-overlay2 dark:text-foreground"
+              aria-label="Wallet Account Selector"
             >
-              store.laconic.com
-            </a>{' '}
-            to create a wallet.
-          </p>
-        </div>
+              {accounts.map((account, index) => (
+                <Option key={index} value={account}>
+                  {account}
+                </Option>
+              ))}
+            </Select>
+          </div>
+        )
       ) : (
-        <div>
-          <Select
-            label="Select Account"
-            defaultValue={accounts[0]}
-            onChange={(value) => value && onAccountChange(value)}
-            className="dark:bg-overlay2 dark:text-foreground"
-            aria-label="Wallet Account Selector"
-          >
-            {accounts.map((account, index) => (
-              <Option key={index} value={account}>
-                {account}
-              </Option>
-            ))}
-          </Select>
+        <div className="flex items-center justify-center h-12">
+          <Spinner className="h-6 w-6" />
         </div>
       )}
     </div>
diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx
index 47cc2c04..dbc2d7b5 100644
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@@ -48,6 +48,7 @@ const Configure = () => {
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
   const [isPaymentDone, setIsPaymentDone] = useState(false);
   const [isFrameVisible, setIsFrameVisible] = useState(false);
+  const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
 
   const [searchParams] = useSearchParams();
   const templateId = searchParams.get('templateId');
@@ -573,9 +574,10 @@ const Configure = () => {
               </div>
             ) : (
               <>
-                <AccountsDropdown accounts={accounts} onAccountChange={onAccountChange} />
+                <AccountsDropdown accounts={accounts} onAccountChange={onAccountChange} isDataReceived={isAccountsDataReceived} />
                 <IFrameModal
                   setAccounts={setAccounts}
+                  setIsDataReceived={setIsAccountsDataReceived}
                   isVisible={isFrameVisible}
                   toggleModal={toggleModal}
                 />
diff --git a/packages/frontend/src/components/projects/create/IFrameModal.tsx b/packages/frontend/src/components/projects/create/IFrameModal.tsx
index d912438f..f9f00915 100644
--- a/packages/frontend/src/components/projects/create/IFrameModal.tsx
+++ b/packages/frontend/src/components/projects/create/IFrameModal.tsx
@@ -6,10 +6,12 @@ import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants'
 
 const IFrameModal = ({
   setAccounts,
+  setIsDataReceived,
   isVisible,
   toggleModal,
 }: {
   setAccounts: (accounts: string[]) => void;
+  setIsDataReceived: (isReceived: boolean) => void;
   isVisible: boolean;
   toggleModal: () => void;
 }) => {
@@ -18,6 +20,7 @@ const IFrameModal = ({
       // TODO: Use env for origin URL
       if (event.origin !== VITE_WALLET_IFRAME_URL) return;
 
+      setIsDataReceived(true);
       if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
         setAccounts(event.data.data);
       } else if (event.data.type === 'ERROR') {