From a223336069c401328a2faee3ac108b5ecf2c6751 Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Fri, 9 Sep 2022 17:57:05 +0800 Subject: [PATCH 1/8] add loading bar --- src/javascript/_common/utility.js | 16 ++++++++++++++++ src/javascript/app/base/binary_loader.js | 1 + src/javascript/app/base/page.js | 2 ++ src/javascript/app/common/redirect_banner.js | 12 ++++++++---- src/javascript/index.js | 2 ++ src/sass/_common/common.scss | 13 +++++++++++++ 6 files changed, 42 insertions(+), 4 deletions(-) diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js index 785f0fc241096..b4b85e74c83f3 100644 --- a/src/javascript/_common/utility.js +++ b/src/javascript/_common/utility.js @@ -13,6 +13,20 @@ const showLoadingImage = (container, theme = 'dark') => { container.html(loading_div); }; +const removeLoadingImage = (loading_wrapper) => { + document.body.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')); + } +} + /** * Returns the highest z-index in the page. * Accepts a selector to only check those elements, @@ -438,4 +452,6 @@ module.exports = { removeObjProperties, lc_licenseID, lc_clientID, + showLoading, + removeLoadingImage, }; diff --git a/src/javascript/app/base/binary_loader.js b/src/javascript/app/base/binary_loader.js index 9fcdc0fb11802..f5d1aca79b171 100644 --- a/src/javascript/app/base/binary_loader.js +++ b/src/javascript/app/base/binary_loader.js @@ -19,6 +19,7 @@ const ClientBase = require('../../_common/base/client_base'); const GTM = require('../../_common/base/gtm'); const LiveChat = require('../../_common/base/livechat'); const Login = require('../../_common/base/login'); +const { showLoading } = require('../../_common/utility'); const toTitleCase = require('../../_common/string_util').toTitleCase; const BinaryLoader = (() => { diff --git a/src/javascript/app/base/page.js b/src/javascript/app/base/page.js index d7211c4895b12..ea565efa1da17 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'); @@ -127,6 +128,7 @@ const Page = (() => { } if (Client.isLoggedIn()) { BinarySocket.wait('authorize', 'website_status', 'get_account_status').then(() => { + removeLoadingImage(); 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 5d21e096f568e..68d6904be3d0e 100644 --- a/src/javascript/app/common/redirect_banner.js +++ b/src/javascript/app/common/redirect_banner.js @@ -3,21 +3,23 @@ const DerivBanner = require('./deriv_banner'); const BinarySocket = require('../base/socket'); const State = require('../../_common/storage').State; const Client = require('../base/client'); +const { showLoading, hideLoadingImage } = require('../../_common/utility'); const isEuCountrySelected = require('../../_common/utility').isEuCountrySelected; const RedirectBanner = (() => { - const onLoad = () => { + showLoading(); BinarySocket.wait('authorize', 'website_status', 'landing_company').then(() => { - const eu_country = isEuCountrySelected(Client.get('residence')) || isEuCountrySelected(State.getResponse('website_status.clients_country')); - // eslint-disable-next-line no-console - console.log(Cookies.get('row-lp-visited'), 'row-lp-visited'); + if (eu_country) { handleRedirect(); } else if (!Cookies.get('row-lp-visited')) { handleRowRedirect(); } + setTimeout(() => { + hideLoadingImage(); + }, 2000); }); }; @@ -47,6 +49,8 @@ const RedirectBanner = (() => { handleRedirect(); } else if (eu_country && virtual_account) { handleRedirect(); + } else if (!Cookies.get('row-lp-visited')) { + handleRowRedirect(); } }); diff --git a/src/javascript/index.js b/src/javascript/index.js index dfa36f8e0fde1..9280ec0fdea00 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -17,10 +17,12 @@ require('./_common/lib/plugins'); require('jquery.scrollto'); const BinaryLoader = require('./app/base/binary_loader'); +const { showLoading } = require('./_common/utility'); document.addEventListener('DOMContentLoaded', BinaryLoader.init); $(window).on('pageshow', (e) => { // Safari doesn't fire load event when using back button if (e.originalEvent.persisted) { + showLoading(); BinaryLoader.init(); } }); diff --git a/src/sass/_common/common.scss b/src/sass/_common/common.scss index 7021b95fccb31..3697b8d250ca2 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; +} + +.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; } \ No newline at end of file From 87da63c05c2d2233ddb177b1737cc0ae1e1dafef Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Sun, 11 Sep 2022 12:21:37 +0800 Subject: [PATCH 2/8] Added overlay and loader to prevent user to visit home page and fixed the flickering issue --- src/javascript/_common/utility.js | 8 ++++++-- src/javascript/app/common/redirect_banner.js | 4 ++-- src/templates/_common/_layout/layout.jsx | 1 + 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js index b4b85e74c83f3..bbc2f208ce15c 100644 --- a/src/javascript/_common/utility.js +++ b/src/javascript/_common/utility.js @@ -13,9 +13,11 @@ const showLoadingImage = (container, theme = 'dark') => { container.html(loading_div); }; -const removeLoadingImage = (loading_wrapper) => { +function removeLoadingImage () { + const loading_wrapper = document.getElementById('redirect-loading'); + if (!loading_wrapper) return; document.body.removeChild(loading_wrapper); -}; +} function showLoading() { if (!document.getElementById('redirect-loading')) { @@ -24,6 +26,8 @@ function showLoading() { loading_wrapper.classList.add('redirect-loader'); document.body.appendChild(loading_wrapper); showLoadingImage(document.getElementById('redirect-loading')); + } else { + showLoadingImage(document.getElementById('redirect-loading')); } } diff --git a/src/javascript/app/common/redirect_banner.js b/src/javascript/app/common/redirect_banner.js index 68d6904be3d0e..171e09eab9c3d 100644 --- a/src/javascript/app/common/redirect_banner.js +++ b/src/javascript/app/common/redirect_banner.js @@ -3,7 +3,7 @@ const DerivBanner = require('./deriv_banner'); const BinarySocket = require('../base/socket'); const State = require('../../_common/storage').State; const Client = require('../base/client'); -const { showLoading, hideLoadingImage } = require('../../_common/utility'); +const { showLoading, removeLoadingImage } = require('../../_common/utility'); const isEuCountrySelected = require('../../_common/utility').isEuCountrySelected; const RedirectBanner = (() => { @@ -18,7 +18,7 @@ const RedirectBanner = (() => { handleRowRedirect(); } setTimeout(() => { - hideLoadingImage(); + removeLoadingImage(); }, 2000); }); diff --git a/src/templates/_common/_layout/layout.jsx b/src/templates/_common/_layout/layout.jsx index 8dae88046d7a5..13f43099c910d 100644 --- a/src/templates/_common/_layout/layout.jsx +++ b/src/templates/_common/_layout/layout.jsx @@ -51,6 +51,7 @@ const Layout = () => {
+
From 1ed5981bdc7d08276a197e919678596fea37d99c Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Sun, 11 Sep 2022 12:26:58 +0800 Subject: [PATCH 3/8] add line --- src/sass/_common/common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sass/_common/common.scss b/src/sass/_common/common.scss index 3697b8d250ca2..d612631c0335b 100755 --- a/src/sass/_common/common.scss +++ b/src/sass/_common/common.scss @@ -1247,4 +1247,4 @@ label + input { display: flex; align-items: center; justify-content: center; -} \ No newline at end of file +} From 6cc88f3c95122afbc8caf46a65fd48da42ded641 Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Sun, 11 Sep 2022 12:34:47 +0800 Subject: [PATCH 4/8] remove load bar from index file --- src/javascript/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/javascript/index.js b/src/javascript/index.js index 9280ec0fdea00..dfa36f8e0fde1 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -17,12 +17,10 @@ require('./_common/lib/plugins'); require('jquery.scrollto'); const BinaryLoader = require('./app/base/binary_loader'); -const { showLoading } = require('./_common/utility'); document.addEventListener('DOMContentLoaded', BinaryLoader.init); $(window).on('pageshow', (e) => { // Safari doesn't fire load event when using back button if (e.originalEvent.persisted) { - showLoading(); BinaryLoader.init(); } }); From 275d271eac881280fe2eff98e68cf0534cc01723 Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Sun, 11 Sep 2022 13:07:31 +0800 Subject: [PATCH 5/8] fix for double loadbar --- src/javascript/app/common/redirect_banner.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/javascript/app/common/redirect_banner.js b/src/javascript/app/common/redirect_banner.js index 171e09eab9c3d..1a3ea72c98e59 100644 --- a/src/javascript/app/common/redirect_banner.js +++ b/src/javascript/app/common/redirect_banner.js @@ -8,7 +8,9 @@ const isEuCountrySelected = require('../../_common/utility').isEuCountrySel const RedirectBanner = (() => { const onLoad = () => { - showLoading(); + 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')); From 7e0e02e277c0839acbd5330954942fca8da56567 Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Sun, 11 Sep 2022 13:24:37 +0800 Subject: [PATCH 6/8] remove unused import --- src/javascript/app/base/binary_loader.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/javascript/app/base/binary_loader.js b/src/javascript/app/base/binary_loader.js index f5d1aca79b171..9fcdc0fb11802 100644 --- a/src/javascript/app/base/binary_loader.js +++ b/src/javascript/app/base/binary_loader.js @@ -19,7 +19,6 @@ const ClientBase = require('../../_common/base/client_base'); const GTM = require('../../_common/base/gtm'); const LiveChat = require('../../_common/base/livechat'); const Login = require('../../_common/base/login'); -const { showLoading } = require('../../_common/utility'); const toTitleCase = require('../../_common/string_util').toTitleCase; const BinaryLoader = (() => { From f1da29bcd3405542c042374dbacd663237151cc0 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Tue, 13 Sep 2022 11:37:38 +0800 Subject: [PATCH 7/8] Added workaround to stop the flickerling --- src/javascript/_common/utility.js | 3 ++- src/javascript/app/base/page.js | 4 +++- src/javascript/app/common/redirect_banner.js | 2 +- src/templates/_common/_layout/layout.jsx | 1 - src/templates/app/trade/trading.jsx | 1 + src/templates/static/home.jsx | 1 + 6 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/javascript/_common/utility.js b/src/javascript/_common/utility.js index bbc2f208ce15c..04fd1fcc8b784 100644 --- a/src/javascript/_common/utility.js +++ b/src/javascript/_common/utility.js @@ -16,7 +16,8 @@ const showLoadingImage = (container, theme = 'dark') => { function removeLoadingImage () { const loading_wrapper = document.getElementById('redirect-loading'); if (!loading_wrapper) return; - document.body.removeChild(loading_wrapper); + const parent = loading_wrapper.parentNode; + parent.removeChild(loading_wrapper); } function showLoading() { diff --git a/src/javascript/app/base/page.js b/src/javascript/app/base/page.js index ea565efa1da17..cb2ed49c66573 100644 --- a/src/javascript/app/base/page.js +++ b/src/javascript/app/base/page.js @@ -128,7 +128,9 @@ const Page = (() => { } if (Client.isLoggedIn()) { BinarySocket.wait('authorize', 'website_status', 'get_account_status').then(() => { - removeLoadingImage(); + 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 1a3ea72c98e59..7069f6c1ae9bb 100644 --- a/src/javascript/app/common/redirect_banner.js +++ b/src/javascript/app/common/redirect_banner.js @@ -21,7 +21,7 @@ const RedirectBanner = (() => { } setTimeout(() => { removeLoadingImage(); - }, 2000); + }, 1000); }); }; diff --git a/src/templates/_common/_layout/layout.jsx b/src/templates/_common/_layout/layout.jsx index 13f43099c910d..8dae88046d7a5 100644 --- a/src/templates/_common/_layout/layout.jsx +++ b/src/templates/_common/_layout/layout.jsx @@ -51,7 +51,6 @@ const Layout = () => {
-
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 ( +
From 7126dc369a72db8d4fecb9146244fda1ab7adff7 Mon Sep 17 00:00:00 2001 From: Prince Date: Tue, 13 Sep 2022 12:28:30 +0400 Subject: [PATCH 8/8] chore: added redirection workaround glitch --- src/javascript/app/base/page.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/javascript/app/base/page.js b/src/javascript/app/base/page.js index cb2ed49c66573..1a5560e159624 100644 --- a/src/javascript/app/base/page.js +++ b/src/javascript/app/base/page.js @@ -49,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 @@ -84,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'); @@ -128,6 +155,7 @@ const Page = (() => { } if (Client.isLoggedIn()) { BinarySocket.wait('authorize', 'website_status', 'get_account_status').then(() => { + contentCheckPlaceholder.hide(); setTimeout(() => { removeLoadingImage(); }, 1000);