Fix inApp wallet config form values + show loading state (#4323)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to improve the loading state handling in the in-app wallets section and refactor the form values handling in the Configure component.

### Detailed summary
- Improved loading state handling in in-app wallets section
- Refactored form values handling in the Configure component

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/components/embedded-wallets/Configure/index.tsx

@@ -26,7 +26,6 @@ import {
 } from "components/settings/ApiKeys/validations";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { useEffect } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { LuTrash2 } from "react-icons/lu";
 import {
@@ -70,7 +69,7 @@ export const Configure: React.FC<ConfigureProps> = ({
 
   const form = useForm<ApiKeyEmbeddedWalletsValidationSchema>({
     resolver: zodResolver(apiKeyEmbeddedWalletsValidationSchema),
-    defaultValues: {
+    values: {
       customAuthEndpoint: config.customAuthEndpoint,
       customAuthentication: config.customAuthentication,
       ...(hasCustomBranding
@@ -84,28 +83,12 @@ export const Configure: React.FC<ConfigureProps> = ({
       redirectUrls: apiKey.redirectUrls.join("\n"),
     },
   });
+
   const customHeaderFields = useFieldArray({
     control: form.control,
     name: "customAuthEndpoint.customHeaders",
   });
 
-  // FIXME: jesus do we need this? - there has to be a better way
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    form.reset({
-      customAuthEndpoint: config.customAuthEndpoint,
-      customAuthentication: config.customAuthentication,
-      ...(hasCustomBranding
-        ? {
-            branding: {
-              applicationName: config.applicationName,
-              applicationImageUrl: config.applicationImageUrl,
-            },
-          }
-        : undefined),
-    });
-  }, [config, form, hasCustomBranding]);
-
   const { onSuccess, onError } = useTxNotifications(
     "In-App Wallet API Key configuration updated",
     "Failed to update an API Key",
@@ -630,7 +613,11 @@ export const Configure: React.FC<ConfigureProps> = ({
           <Divider />
 
           <Box alignSelf="flex-end">
-            <Button type="submit" colorScheme="primary">
+            <Button
+              type="submit"
+              colorScheme="primary"
+              isLoading={mutation.isLoading}
+            >
               Save changes
             </Button>
           </Box>

apps/dashboard/src/pages/dashboard/connect/in-app-wallets.tsx

@@ -103,17 +103,25 @@ const DashboardConnectEmbeddedWallets: ThirdwebNextPage = () => {
         </Text>
       </Flex>
 
-      {!hasApiKeys && <NoApiKeys service="in-app wallets" />}
-
-      {hasApiKeys && selectedKey && (
-        <EmbeddedWallets
-          apiKey={selectedKey}
-          wallets={wallets}
-          isLoading={walletsQuery.isLoading}
-          isFetched={walletsQuery.isFetched}
-          trackingCategory={TRACKING_CATEGORY}
-          defaultTabIndex={defaultTabIndex}
-        />
+      {keysQuery.isLoading ? (
+        <div className="flex h-[500px] items-center justify-center">
+          <Spinner className="size-10" />
+        </div>
+      ) : (
+        <>
+          {!hasApiKeys && <NoApiKeys service="in-app wallets" />}
+
+          {hasApiKeys && selectedKey && (
+            <EmbeddedWallets
+              apiKey={selectedKey}
+              wallets={wallets}
+              isLoading={walletsQuery.isLoading}
+              isFetched={walletsQuery.isFetched}
+              trackingCategory={TRACKING_CATEGORY}
+              defaultTabIndex={defaultTabIndex}
+            />
+          )}
+        </>
       )}
 
       <Spacer height={20} />