packages/frontend/src/components/projects/create/AccountsDropdown.tsx

@@ -1,15 +1,18 @@
-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 ? (
+        !accounts.length ? (
           <div className="text-center">
             <p className="text-gray-700 dark:text-gray-300 mb-4">
               No accounts found. Please visit{' '}
@@ -40,6 +43,11 @@ const AccountsDropdown = ({
               ))}
             </Select>
           </div>
+        )
+      ) : (
+        <div className="flex items-center justify-center h-12">
+          <Spinner className="h-6 w-6" />
+        </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') {