feat: add all possible performance timers for now

src/components/TotalAssets/TotalAssets.tsx

@@ -1,11 +1,26 @@
 import { twMerge } from 'tailwind-merge';
 
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 
 import { useActiveDerivTradingAccount } from '@/hooks';
+import { setPerformanceValue } from '@/utils';
+
+import { TotalAssetsLoader } from '../Loaders';
 
 const TotalAssets = () => {
-    const { data: activeDerivTradingAccount } = useActiveDerivTradingAccount();
+    const { data: activeDerivTradingAccount, isFetching } = useActiveDerivTradingAccount();
+    const { isMobile } = useDevice();
+
+    // need to add more conditions to show the loader
+    if (isFetching) {
+        return <TotalAssetsLoader />;
+    }
+
+    setPerformanceValue('login_time', isMobile);
+    setPerformanceValue('redirect_from_deriv_com_time', isMobile);
+    setPerformanceValue('switch_currency_accounts_time', isMobile);
+    setPerformanceValue('switch_from_demo_to_real_time', isMobile);
+    setPerformanceValue('switch_from_real_to_demo_time', isMobile);
 
     return (
         <div className='relative lg:inline-block text-center lg:text-right w-full lg:w-auto flex justify-center mt-24 lg:mt-0'>

src/components/TradingAccountsList/TradingAccountsList.tsx

@@ -6,6 +6,7 @@ import { Text } from '@deriv-com/ui';
 import { IconComponent } from '@/components';
 import { IconToCurrencyMapper } from '@/constants';
 import { useActiveDerivTradingAccount, useDerivTradingAccountsList, useQueryParams, useRegulationFlags } from '@/hooks';
+import { startPerformanceEventTimer } from '@/utils';
 
 export const TradingAccountsList = () => {
     const { data: tradingAccountsList } = useDerivTradingAccountsList();
@@ -15,6 +16,7 @@ export const TradingAccountsList = () => {
     const { closeModal } = useQueryParams();
 
     const handleSwitchAccount = (loginid: string) => {
+        startPerformanceEventTimer('switch_currency_accounts_time');
         switchAccount(loginid);
         closeModal();
     };

src/hooks/useAccountSwitcher.ts

@@ -4,6 +4,7 @@ import { useAuthData } from '@deriv-com/api-hooks';
 
 import { Regulation } from '@/constants';
 import { useUIContext } from '@/providers';
+import { startPerformanceEventTimer } from '@/utils';
 
 import {
     useActiveDerivTradingAccount,
@@ -66,6 +67,9 @@ export const useAccountSwitcher = () => {
 
             const loginId = account.value === accountTypes[0].value ? demoLoginId : firstRealLoginId;
             if (loginId) {
+                if (account.value === accountTypes[0].value)
+                    startPerformanceEventTimer('switch_from_real_to_demo_time');
+                else startPerformanceEventTimer('switch_from_demo_to_real_time');
                 switchAccount(loginId);
             }
 

src/pages/signup/signup.tsx

@@ -1,6 +1,15 @@
 import { Link } from 'react-router-dom';
 
+import { useDevice } from '@deriv-com/ui';
+
+import { setPerformanceValue } from '@/utils';
+
 export const Signup = () => {
+    const { isMobile } = useDevice();
+
+    // leave it here for now
+    setPerformanceValue('signup_time', isMobile);
+
     return (
         <>
             <h1>Signup</h1>

src/utils/performance-metrics-methods.ts

@@ -41,7 +41,7 @@ export const startPerformanceEventTimer = (action: keyof typeof Window.prototype
     window.performance_metrics[action] = Date.now();
 };
 
-export const setPerformanceValue = (action: keyof typeof Window.prototype.performance_metrics) => {
+export const setPerformanceValue = (action: keyof typeof Window.prototype.performance_metrics, isMobile = false) => {
     if (window.performance_metrics?.[action]) {
         const value = (Date.now() - window.performance_metrics[action]) / 1000;
         window.performance_metrics[action] = 0;
@@ -51,7 +51,7 @@ export const setPerformanceValue = (action: keyof typeof Window.prototype.perfor
         Analytics.trackEvent(event_name, {
             action,
             value,
-            device: true ? 'mobile' : 'desktop',
+            device: isMobile ? 'mobile' : 'desktop',
         });
     }
 };