diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx index c04e94f8862d..161f4f4e656e 100644 --- a/packages/appstore/src/components/cfds-listing/index.tsx +++ b/packages/appstore/src/components/cfds-listing/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { observer, useStore } from '@deriv/stores'; import { Loading, Text, StaticUrl } from '@deriv/components'; import { @@ -9,6 +9,7 @@ import { MT5_ACCOUNT_STATUS, makeLazyLoader, moduleLoader, + setPerformanceValue, } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { Analytics } from '@deriv-com/analytics'; @@ -67,7 +68,6 @@ const CFDsListing = observer(() => { const { setAccountType, toggleCTraderTransferModal } = cfd; const { account_status, - ctrader_accounts_list, is_landing_company_loaded, is_populating_mt5_account_list, real_account_creation_unlock_date, @@ -172,6 +172,16 @@ const CFDsListing = observer(() => { return null; }; + useEffect(() => { + if (is_landing_company_loaded && is_populating_mt5_account_list) { + setPerformanceValue('login_time'); + setPerformanceValue('redirect_from_deriv_com_time'); + setPerformanceValue('switch_currency_accounts_time'); + setPerformanceValue('switch_from_demo_to_real_time'); + setPerformanceValue('switch_from_real_to_demo_time'); + } + }, [is_populating_mt5_account_list]); + return ( { ); } - // measure performance metrics - setPerformanceValue('login_time'); - setPerformanceValue('redirect_from_deriv_com_time'); - setPerformanceValue('switch_currency_accounts_time'); - setPerformanceValue('switch_from_demo_to_real_time'); - setPerformanceValue('switch_from_real_to_demo_time'); - return (
{has_active_related_deriv_account || selected_account_type === 'demo' ? ( diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index a235889681a8..f663c3292aa0 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { observer } from 'mobx-react-lite'; import { Text, StaticUrl } from '@deriv/components'; -import { ContentFlag } from '@deriv/shared'; +import { ContentFlag, setPerformanceValue } from '@deriv/shared'; import { useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; import ListingContainer from 'Components/containers/listing-container'; @@ -53,6 +53,12 @@ const OptionsAndMultipliersListing = observer(() => { return null; }; + useEffect(() => { + if (is_landing_company_loaded) { + setPerformanceValue('option_multiplier_section_loading_time'); + } + }, [is_landing_company_loaded]); + return ( } diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx index b057b64dbe8f..dc7ed80b13c3 100644 --- a/packages/appstore/src/modules/traders-hub/index.tsx +++ b/packages/appstore/src/modules/traders-hub/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { DesktopWrapper, MobileWrapper, ButtonToggle, Div100vhContainer, Text } from '@deriv/components'; -import { isDesktop, routes, ContentFlag, checkServerMaintenance } from '@deriv/shared'; +import { isDesktop, routes, ContentFlag, checkServerMaintenance, startPerformanceEventTimer } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; import CFDsListing from 'Components/cfds-listing'; @@ -80,6 +80,10 @@ const TradersHub = observer(() => { return () => clearTimeout(timer); }, [handleScroll, is_eu_user, is_tour_open, setTogglePlatformType]); + React.useLayoutEffect(() => { + startPerformanceEventTimer('option_multiplier_section_loading_time'); + }, []); + const eu_title = content_flag === ContentFlag.EU_DEMO || content_flag === ContentFlag.EU_REAL || is_eu_user; const getPlatformToggleOptions = () => [ diff --git a/packages/shared/src/services/performance-metrics-methods.ts b/packages/shared/src/services/performance-metrics-methods.ts index 75195291be62..b550db858ef8 100644 --- a/packages/shared/src/services/performance-metrics-methods.ts +++ b/packages/shared/src/services/performance-metrics-methods.ts @@ -16,6 +16,7 @@ declare global { switch_currency_accounts_time: number; switch_from_demo_to_real_time: number; switch_from_real_to_demo_time: number; + options_multipliers_section_loading_time: number; }; } } @@ -36,6 +37,7 @@ export const startPerformanceEventTimer = (action: keyof typeof global.Window.pr switch_currency_accounts_time: 0, switch_from_demo_to_real_time: 0, switch_from_real_to_demo_time: 0, + options_multipliers_section_loading_time: 0, }; }