From c28ab14d9f9427a7b4ab8638607e29545347d017 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Date: Fri, 20 Jan 2023 14:10:30 +0400 Subject: [PATCH] likhith/fix: :bug: resolved flickering issue in platform switcher (#7342) * fix: :bug: resolved f;iclering issue in p[latform switcher * refactor: :recycle: refactored code * feat: reordered code block --- .../Components/Layout/Header/account-info.jsx | 14 ++++--- .../Layout/Header/platform-dropdown.jsx | 15 +++---- .../Layout/Header/platform-switcher.jsx | 27 ++++++++---- .../header/dashboard-platform-header.jsx | 12 +++--- .../Layout/header/default-header.jsx | 34 +++++++++------ packages/core/src/Stores/client-store.js | 42 ++++++++++--------- 6 files changed, 84 insertions(+), 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 index ad02d60a8813..5d3a169e24d3 100644 --- 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 (
diff --git a/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx b/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx index 84b34e051bd7..f252a4b03c36 100644 --- 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 } }) => ( - <> +
(

{title()}

{description()}

- + ); 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 index c7cbf2ac27f4..2a9235f3a22f 100644 --- 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) ? (
{ return
; diff --git a/packages/core/src/App/Containers/Layout/header/default-header.jsx b/packages/core/src/App/Containers/Layout/header/default-header.jsx index 41b5a964ad5a..fd5c2c9c52c6 100644 --- 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 = ({ @@ -192,6 +198,9 @@ const DefaultHeader = ({ @@ -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 index e5d612a312d7..8bbf19d8c39f 100644 --- 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(); }