Add performance logging and reduce re-renders

packages/app-extension/src/app/App.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect } from "react";
 import { HashRouter } from "react-router-dom";
 import { EXTENSION_HEIGHT, EXTENSION_WIDTH } from "@coral-xyz/common";
 import {
@@ -15,6 +15,14 @@ const Router = lazy(() => import("./Router"));
 
 import { useTheme } from "@coral-xyz/tamagui";
 
+// Get start time from window
+declare global {
+  interface Window {
+    __APP_START_TIME__: number;
+  }
+}
+const startTime = (window as any).__APP_START_TIME__ || Date.now();
+
 import "@fontsource/inter";
 
 import "@fontsource/inter/500.css";
@@ -34,6 +42,16 @@ export default function App() {
   //
   // const pStr = window.localStorage.getItem("secureUser");
   // const preferences = pStr ? JSON.parse(pStr).preferences : {};
+
+  useEffect(() => {
+    console.log(`[PERF] App component mounted: ${Date.now() - startTime}ms`);
+
+    // Log when browser has painted
+    requestAnimationFrame(() => {
+      console.log(`[PERF] First paint complete: ${Date.now() - startTime}ms`);
+    });
+  }, []);
+
   return (
     <div
       style={{

packages/app-extension/src/app/Router.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import {
   BACKEND_API_URL,
   Blockchain,
@@ -130,6 +130,8 @@ function FullApp() {
   const background = useBackgroundClient();
   const allUsers = useAllUsersNullable();
   const [hasRedirected, setHasRedirected] = useState(false);
+  const startTime = (window as any).__APP_START_TIME__ || Date.now();
+  const hasLoggedUnlocked = useRef(false);
 
   useEffect(() => {
     // Refresh feature gates in background without blocking UI render
@@ -139,6 +141,13 @@ function FullApp() {
     });
   }, [background]);
 
+  useEffect(() => {
+    // Log when FullApp component mounts (only once)
+    console.log(
+      `[PERF] FullApp component mounted: ${Date.now() - startTime}ms`
+    );
+  }, []);
+
   // Check if there are no users and redirect to onboarding
   // This handles the case where user started onboarding but didn't finish
   // When they click the extension icon, they should be sent back to onboarding
@@ -157,6 +166,20 @@ function FullApp() {
     }
   }, [allUsers, hasRedirected]);
 
+  // Log when we're ready to show Unlocked (only once)
+  useEffect(() => {
+    if (
+      allUsers !== null &&
+      allUsers.length > 0 &&
+      !hasLoggedUnlocked.current
+    ) {
+      console.log(
+        `[PERF] Showing Unlocked component: ${Date.now() - startTime}ms`
+      );
+      hasLoggedUnlocked.current = true;
+    }
+  }, [allUsers]);
+
   // Show loading skeleton while we're checking for users or redirecting
   if (allUsers === null || allUsers.length === 0) {
     return <PopupLoadingSkeleton />;

packages/app-extension/src/index.tsx

@@ -1,4 +1,8 @@
 const startTime = Date.now();
+console.log(`[PERF] Popup script start: ${startTime}ms`);
+
+// Store start time globally for other components to access
+(window as any).__APP_START_TIME__ = startTime;
 
 // Suppress React Native BackHandler warning in web environment
 const originalConsoleWarn = console.warn;
@@ -25,10 +29,7 @@ import {
   ToSecureUITransportReceiver,
 } from "@coral-xyz/secure-clients";
 import type { SECURE_EVENTS } from "@coral-xyz/secure-clients/types";
-import SecureUI, {
-  QuickTheme,
-  RequireUserUnlocked,
-} from "@coral-xyz/secure-ui";
+import SecureUI, { RequireUserUnlocked } from "@coral-xyz/secure-ui";
 import { config as tamaguiConfig, TamaguiProvider } from "@coral-xyz/tamagui";
 import { RecoilRoot } from "recoil";
 import { v4 } from "uuid";
@@ -75,6 +76,10 @@ const secureUITransportSender = new FromExtensionTransportSender<SECURE_EVENTS>(
 const notificationBroadcastListener =
   new NotificationExtensionBroadcastListener();
 
+console.log(
+  `[PERF] Imports and initialization complete: ${Date.now() - startTime}ms`
+);
+
 //
 // Configure event listeners.
 //
@@ -108,6 +113,7 @@ document.addEventListener("keydown", async function onKeyDown(event) {
 // TOOD(react) createRoot is required: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
 const container = document.getElementById("root");
 const root = createRoot(container!);
+console.log(`[PERF] Starting React render: ${Date.now() - startTime}ms`);
 root.render(
   <>
     <OptClickToComponent />
@@ -130,7 +136,11 @@ root.render(
               onReset={() => {
                 window.close();
               }}
-              onSuccess={() => {}}
+              onSuccess={() => {
+                console.log(
+                  `[PERF] User unlocked, ready to show app: ${Date.now() - startTime}ms`
+                );
+              }}
             >
               <App />
             </RequireUserUnlocked>