Display spinner till accounts data response is received

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 ? (
+      {isDataReceived ? (
-        <div className="text-center">
+        !accounts.length ? (
-          <p className="text-gray-700 dark:text-gray-300 mb-4">
+          <div className="text-center">
-            No accounts found. Please visit{' '}
+            <p className="text-gray-700 dark:text-gray-300 mb-4">
-            <a
+              No accounts found. Please visit{' '}
-              href="https://store.laconic.com"
+              <a
-              target="_blank"
+                href="https://store.laconic.com"
-              rel="noopener noreferrer"
+                target="_blank"
-              className="text-blue-600 underline dark:text-blue-400"
+                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
+              {accounts.map((account, index) => (
-            </a>{' '}
+                <Option key={index} value={account}>
-            to create a wallet.
+                  {account}
-          </p>
+                </Option>
-        </div>
+              ))}
+            </Select>
+          </div>
+        )
       ) : (
-        <div>
+        <div className="flex items-center justify-center h-12">
-          <Select
+          <Spinner className="h-6 w-6" />
-            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>
       )}
     </div>

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}
                 />

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') {