diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js index 785f0fc241096..04fd1fcc8b784 100644 --- a/src/javascript/_common/utility.js +++ b/src/javascript/_common/utility.js @@ -13,6 +13,25 @@ const showLoadingImage = (container, theme = 'dark') => { container.html(loading_div); }; +function removeLoadingImage () { + const loading_wrapper = document.getElementById('redirect-loading'); + if (!loading_wrapper) return; + const parent = loading_wrapper.parentNode; + parent.removeChild(loading_wrapper); +} + +function showLoading() { + if (!document.getElementById('redirect-loading')) { + const loading_wrapper = document.createElement('div'); + loading_wrapper.id = 'redirect-loading'; + loading_wrapper.classList.add('redirect-loader'); + document.body.appendChild(loading_wrapper); + showLoadingImage(document.getElementById('redirect-loading')); + } else { + showLoadingImage(document.getElementById('redirect-loading')); + } +} + /** * Returns the highest z-index in the page. * Accepts a selector to only check those elements, @@ -438,4 +457,6 @@ module.exports = { removeObjProperties, lc_licenseID, lc_clientID, + showLoading, + removeLoadingImage, }; diff --git a/src/javascript/app/base/page.js b/src/javascript/app/base/page.js index d7211c4895b12..1a5560e159624 100644 --- a/src/javascript/app/base/page.js +++ b/src/javascript/app/base/page.js @@ -33,6 +33,7 @@ const EuCloseBanner = require('../common/eu_close_baner'); const CloseBanner = require('../common/game_close_banner'); const RedirectBanner = require('../common/redirect_banner'); const DerivBanner = require('../common/deriv_banner'); +const { removeLoadingImage } = require('../../_common/utility'); require('../../_common/lib/polyfills/array.includes'); require('../../_common/lib/polyfills/string.includes'); @@ -48,6 +49,7 @@ const Page = (() => { }; const onDocumentReady = () => { + // LocalStorage can be used as a means of communication among // different windows. The problem that is solved here is what // happens if the user logs out or switches loginid in one @@ -83,7 +85,33 @@ const Page = (() => { }); }; + const contentCheckPlaceholder = { + show: () => { + contentCheckPlaceholder.hide(); + + const placeholder_container = $('
'); + + placeholder_container.css({ + 'position' : 'fixed', + 'top' : '0px', + 'left' : '0px', + 'z-index' : '99999', + 'width' : '100vw', + 'height' : '100vh', + 'background': '#ffffff', + }); + + $('body').append(placeholder_container); + }, + hide: ()=> { + $('#content-placeholder-container').remove(); + }, + }; + const onLoad = () => { + // Added a container layer to avoid showing any page before the redirection check is done. + contentCheckPlaceholder.show(); + if (State.get('is_loaded_by_pjax')) { Url.reset(); updateLinksURL('#content'); @@ -127,6 +155,10 @@ const Page = (() => { } if (Client.isLoggedIn()) { BinarySocket.wait('authorize', 'website_status', 'get_account_status').then(() => { + contentCheckPlaceholder.hide(); + setTimeout(() => { + removeLoadingImage(); + }, 1000); RealityCheck.onLoad(); Menu.init(); const is_uk_residence = (Client.get('residence') === 'gb' || State.getResponse('website_status.clients_country') === 'gb'); diff --git a/src/javascript/app/common/redirect_banner.js b/src/javascript/app/common/redirect_banner.js index 4a7a4dfc12771..7069f6c1ae9bb 100644 --- a/src/javascript/app/common/redirect_banner.js +++ b/src/javascript/app/common/redirect_banner.js @@ -3,19 +3,25 @@ const DerivBanner = require('./deriv_banner'); const BinarySocket = require('../base/socket'); const State = require('../../_common/storage').State; const Client = require('../base/client'); +const { showLoading, removeLoadingImage } = require('../../_common/utility'); const isEuCountrySelected = require('../../_common/utility').isEuCountrySelected; const RedirectBanner = (() => { - const onLoad = () => { + if (location.pathname && location.pathname.includes('home.html')) { + showLoading(); + } BinarySocket.wait('authorize', 'website_status', 'landing_company').then(() => { - const eu_country = isEuCountrySelected(Client.get('residence')) || isEuCountrySelected(State.getResponse('website_status.clients_country')); + if (eu_country) { handleRedirect(); } else if (!Cookies.get('row-lp-visited')) { handleRowRedirect(); } + setTimeout(() => { + removeLoadingImage(); + }, 1000); }); }; @@ -45,6 +51,8 @@ const RedirectBanner = (() => { handleRedirect(); } else if (eu_country && virtual_account) { handleRedirect(); + } else if (!Cookies.get('row-lp-visited')) { + handleRowRedirect(); } }); diff --git a/src/sass/_common/common.scss b/src/sass/_common/common.scss index 7021b95fccb31..d612631c0335b 100755 --- a/src/sass/_common/common.scss +++ b/src/sass/_common/common.scss @@ -1234,4 +1234,17 @@ label + input { .font-style-normal { font-style: normal; -} \ No newline at end of file +} + +.redirect-loader { + position: fixed; + height: 100vh; + width: 100%; + background: $COLOR_WHITE; + z-index: 1000; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/templates/app/trade/trading.jsx b/src/templates/app/trade/trading.jsx index fe20bd59d501c..ae9138365b12f 100644 --- a/src/templates/app/trade/trading.jsx +++ b/src/templates/app/trade/trading.jsx @@ -7,6 +7,7 @@ import DerivBanner from '../../_common/components/deriv_banner.jsx'; const Trading = () => (
+
diff --git a/src/templates/static/home.jsx b/src/templates/static/home.jsx index 43af1ee3d5329..06a61c86cf016 100644 --- a/src/templates/static/home.jsx +++ b/src/templates/static/home.jsx @@ -177,6 +177,7 @@ const Home = () => { return ( +