likhith/fix: 🐛 resolved flickering issue in platform switcher (#7342)

* fix: 🐛 resolved f;iclering issue in p[latform switcher * refactor: ♻️ refactored code * feat: reordered code block
binary-com · Jan 20, 2023 · c28ab14 · c28ab14
1 parent 6ea7c91
commit c28ab14
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 60 deletions.
diff --git a/packages/core/src/App/Components/Layout/Header/account-info.jsx b/packages/core/src/App/Components/Layout/Header/account-info.jsx
@@ -1,12 +1,13 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
 import { DesktopWrapper, Icon, MobileWrapper, Popover, Text } from '@deriv/components';
+
+import { AccountSwitcher } from 'App/Containers/AccountSwitcher';
+import AccountSwitcherMobile from 'App/Containers/AccountSwitcher/account-switcher-mobile.jsx';
+import { CSSTransition } from 'react-transition-group';
 import { Localize } from '@deriv/translations';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
 import { getCurrencyDisplayCode } from '@deriv/shared';
-import AccountSwitcherMobile from 'App/Containers/AccountSwitcher/account-switcher-mobile.jsx';
-import { AccountSwitcher } from 'App/Containers/AccountSwitcher';
 
 const AccountInfoWrapper = ({ is_disabled, disabled_message, children }) =>
     is_disabled && disabled_message ? (
@@ -57,6 +58,7 @@ const AccountInfo = ({
     is_disabled,
 }) => {
     const currency_lower = currency?.toLowerCase();
+
     return (
         <div className='acc-info__wrapper'>
             <div className='acc-info__separator' />

diff --git a/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx b/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx
@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import 'Sass/app/_common/components/platform-dropdown.scss';
+
 import { Div100vhContainer, Icon, useOnClickOutside } from '@deriv/components';
-import { routes, isDesktop, isMobile, getActivePlatform, PlatformContext, getPlatformSettings } from '@deriv/shared';
+import { PlatformContext, getActivePlatform, getPlatformSettings, isDesktop, isMobile, routes } from '@deriv/shared';
 
 import { BinaryLink } from 'App/Components/Routes';
-import 'Sass/app/_common/components/platform-dropdown.scss';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 const PlatformBox = ({ platform: { icon, title, description } }) => (
-    <>
+    <React.Fragment>
         <div className='platform-dropdown__list-platform-background' />
         <Icon
             data_testid='dt_platform_box_icon'
@@ -21,7 +22,7 @@ const PlatformBox = ({ platform: { icon, title, description } }) => (
             <p className='platform-dropdown__list-platform-title'>{title()}</p>
             <p className='platform-dropdown__list-platform-description'>{description()}</p>
         </div>
-    </>
+    </React.Fragment>
 );
 
 const PlatformDropdownContent = ({ platform, app_routing_history, hide_dropdown_items }) => {

diff --git a/packages/core/src/App/Components/Layout/Header/platform-switcher.jsx b/packages/core/src/App/Components/Layout/Header/platform-switcher.jsx
@@ -1,15 +1,24 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-import { CSSTransition } from 'react-transition-group';
+import 'Sass/app/_common/components/platform-switcher.scss';
+
 import { Icon, Text } from '@deriv/components';
 import { getPlatformInformation, isMobile } from '@deriv/shared';
-import { PlatformSwitcherLoader } from './Components/Preloader/platform-switcher.jsx';
+
+import { CSSTransition } from 'react-transition-group';
 import { PlatformDropdown } from './platform-dropdown.jsx';
-import 'Sass/app/_common/components/platform-switcher.scss';
+import { PlatformSwitcherLoader } from './Components/Preloader/platform-switcher.jsx';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
 
-const PlatformSwitcher = ({ toggleDrawer, app_routing_history, platform_config }) => {
+const PlatformSwitcher = ({
+    toggleDrawer,
+    app_routing_history,
+    platform_config,
+    is_landing_company_loaded,
+    is_logged_in,
+    is_logging_in,
+}) => {
     const [is_open, setIsOpen] = React.useState(false);
 
     const is_close_drawer_fired_ref = React.useRef(false);
@@ -28,7 +37,7 @@ const PlatformSwitcher = ({ toggleDrawer, app_routing_history, platform_config }
         is_close_drawer_fired_ref.current = true;
     };
 
-    return app_routing_history.length === 0 ? (
+    return (is_logged_in || is_logging_in ? !is_landing_company_loaded : app_routing_history.length === 0) ? (
         <div
             data-testid='dt_platform_switcher_preloader'
             className={classNames('platform-switcher__preloader', {

diff --git a/packages/core/src/App/Containers/Layout/header/dashboard-platform-header.jsx b/packages/core/src/App/Containers/Layout/header/dashboard-platform-header.jsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useHistory, withRouter } from 'react-router-dom';
+
 import { Button, DesktopWrapper, Icon, MobileWrapper, Money, Popover, Text } from '@deriv/components';
-import { getPlatformInformation, isMobile, routes } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import { PlatformSwitcher, ToggleNotifications } from 'App/Components/Layout/Header';
-import platform_config from 'App/Constants/platform-config';
+import { getPlatformInformation, isMobile, routes } from '@deriv/shared';
+import { useHistory, withRouter } from 'react-router-dom';
+
+import { BinaryLink } from 'App/Components/Routes';
+import PropTypes from 'prop-types';
 import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
 import { connect } from 'Stores/connect';
-import { BinaryLink } from 'App/Components/Routes';
+import platform_config from 'App/Constants/platform-config';
 
 const Divider = () => {
     return <div className='dashboard-platform-header__divider' />;

diff --git a/packages/core/src/App/Containers/Layout/header/default-header.jsx b/packages/core/src/App/Containers/Layout/header/default-header.jsx
@@ -1,19 +1,20 @@
-import classNames from 'classnames';
+import { AccountActions, MenuLinks, PlatformSwitcher } from 'App/Components/Layout/Header';
+import { DesktopWrapper, Icon, MobileWrapper, Text } from '@deriv/components';
+import { PlatformContext, getDecimalPlaces, getPlatformInformation, isMobile, platforms, routes } from '@deriv/shared';
+
+import { AccountsInfoLoader } from 'App/Components/Layout/Header/Components/Preloader';
+import { BinaryLink } from 'App/Components/Routes';
+import { Localize } from '@deriv/translations';
+import NewVersionNotification from 'App/Containers/new-version-notification.jsx';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withRouter } from 'react-router-dom';
-import { DesktopWrapper, MobileWrapper, Text, Icon } from '@deriv/components';
-import { routes, isMobile, getDecimalPlaces, getPlatformInformation, platforms, PlatformContext } from '@deriv/shared';
-import { AccountActions, MenuLinks, PlatformSwitcher } from 'App/Components/Layout/Header';
-import platform_config from 'App/Constants/platform-config';
 import RealAccountSignup from 'App/Containers/RealAccountSignup';
 import SetAccountCurrencyModal from 'App/Containers/SetAccountCurrencyModal';
-import NewVersionNotification from 'App/Containers/new-version-notification.jsx';
-import { connect } from 'Stores/connect';
 import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
-import { AccountsInfoLoader } from 'App/Components/Layout/Header/Components/Preloader';
-import { BinaryLink } from 'App/Components/Routes';
-import { Localize } from '@deriv/translations';
+import classNames from 'classnames';
+import { connect } from 'Stores/connect';
+import platform_config from 'App/Constants/platform-config';
+import { withRouter } from 'react-router-dom';
 
 const DefaultHeader = ({
     acc_switcher_disabled_message,
@@ -63,6 +64,7 @@ const DefaultHeader = ({
     changeCurrentLanguage,
     is_trading_assessment_for_existing_user_enabled,
     active_account_landing_company,
+    is_landing_company_loaded,
 }) => {
     const toggle_menu_drawer_ref = React.useRef(null);
     const addUpdateNotification = () => addNotificationMessage(client_notifications.new_version_available);
@@ -103,6 +105,7 @@ const DefaultHeader = ({
     }, [removeUpdateNotification]);
 
     const onClickDeposit = () => history.push(routes.cashier_deposit);
+
     const filterPlatformsForClients = payload =>
         payload.filter(config => {
             if (config.link_to === routes.mt5) {
@@ -163,6 +166,9 @@ const DefaultHeader = ({
                     <DesktopWrapper>
                         <PlatformSwitcher
                             app_routing_history={app_routing_history}
+                            is_landing_company_loaded={is_landing_company_loaded}
+                            is_logged_in={is_logged_in}
+                            is_logging_in={is_logging_in}
                             platform_config={filterPlatformsForClients(platform_config)}
                         />
                     </DesktopWrapper>
@@ -192,6 +198,9 @@ const DefaultHeader = ({
                                 <PlatformSwitcher
                                     app_routing_history={app_routing_history}
                                     is_mobile
+                                    is_landing_company_loaded={is_landing_company_loaded}
+                                    is_logged_in={is_logged_in}
+                                    is_logging_in={is_logging_in}
                                     platform_config={filterPlatformsForClients(platform_config)}
                                     toggleDrawer={toggle_menu_drawer_ref.current?.toggleDrawer}
                                 />
@@ -284,7 +293,6 @@ DefaultHeader.propTypes = {
     is_bot_allowed: PropTypes.bool,
     is_dark_mode: PropTypes.bool,
     is_eu: PropTypes.bool,
-    is_loading: PropTypes.bool,
     is_logged_in: PropTypes.bool,
     is_logging_in: PropTypes.bool,
     is_mt5_allowed: PropTypes.bool,
@@ -336,7 +344,6 @@ export default connect(({ client, common, ui, menu, modules, notifications }) =>
     is_bot_allowed: client.is_bot_allowed,
     is_dark_mode: ui.is_dark_mode_on,
     is_eu: client.is_eu,
-    is_loading: ui.is_loading,
     is_logged_in: client.is_logged_in,
     is_logging_in: client.is_logging_in,
     is_mt5_allowed: client.is_mt5_allowed,
@@ -362,4 +369,5 @@ export default connect(({ client, common, ui, menu, modules, notifications }) =>
     toggleNotifications: notifications.toggleNotificationsModal,
     is_trading_assessment_for_existing_user_enabled: ui.is_trading_assessment_for_existing_user_enabled,
     active_account_landing_company: client.landing_company_shortcode,
+    is_landing_company_loaded: client.is_landing_company_loaded,
 }))(withRouter(DefaultHeader));
diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
@@ -1,37 +1,39 @@
+import * as SocketCache from '_common/base/socket_cache';
+
 import {
+    CFD_PLATFORMS,
+    LocalStore,
+    State,
+    deriv_urls,
+    filterUrlQuery,
     getPropertyValue,
     getUrlBinaryBot,
     getUrlSmartTrader,
     isDesktopOs,
     isEmptyObject,
-    LocalStore,
+    isLocal,
+    isProduction,
+    isStaging,
+    isTestLink,
     redirectToLogin,
+    routes,
     setCurrencies,
-    State,
     toMoment,
-    deriv_urls,
     urlForLanguage,
-    filterUrlQuery,
-    CFD_PLATFORMS,
-    routes,
-    isTestLink,
-    isProduction,
-    isLocal,
-    isStaging,
 } from '@deriv/shared';
+import { WS, requestLogout } from 'Services';
+import { action, computed, makeObservable, observable, reaction, runInAction, toJS, when } from 'mobx';
+import { getAccountTitle, getClientAccountType } from './Helpers/client';
 import { getLanguage, localize } from '@deriv/translations';
-import Cookies from 'js-cookie';
-import { action, computed, observable, reaction, runInAction, toJS, when, makeObservable } from 'mobx';
-import moment from 'moment';
-import { requestLogout, WS } from 'Services';
-import BinarySocketGeneral from 'Services/socket-general';
-import BinarySocket from '_common/base/socket_base';
-import * as SocketCache from '_common/base/socket_cache';
 import { isEuCountry, isMultipliersOnly, isOptionsBlocked } from '_common/utility';
+
 import BaseStore from './base-store';
-import { getAccountTitle, getClientAccountType } from './Helpers/client';
-import { setDeviceDataCookie } from './Helpers/device';
+import BinarySocket from '_common/base/socket_base';
+import BinarySocketGeneral from 'Services/socket-general';
+import Cookies from 'js-cookie';
 import { buildCurrenciesList } from './Modules/Trading/Helpers/currency';
+import moment from 'moment';
+import { setDeviceDataCookie } from './Helpers/device';
 
 const LANGUAGE_KEY = 'i18n_language';
 const storage_key = 'client.accounts';
@@ -1607,8 +1609,8 @@ export default class ClientStore extends BaseStore {
     }
 
     responseLandingCompany(response) {
-        this.is_landing_company_loaded = true;
         this.landing_companies = response.landing_company;
+        this.is_landing_company_loaded = true;
         this.setStandpoint(this.landing_companies);
         this.setRealityCheck();
     }