diff --git a/packages/app-extension/src/app/App.tsx b/packages/app-extension/src/app/App.tsx index 17e6e81..009d445 100644 --- a/packages/app-extension/src/app/App.tsx +++ b/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 (
{ // 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 ; diff --git a/packages/app-extension/src/index.tsx b/packages/app-extension/src/index.tsx index eaa2b45..290558e 100644 --- a/packages/app-extension/src/index.tsx +++ b/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( 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( <> @@ -130,7 +136,11 @@ root.render( onReset={() => { window.close(); }} - onSuccess={() => {}} + onSuccess={() => { + console.log( + `[PERF] User unlocked, ready to show app: ${Date.now() - startTime}ms` + ); + }} >