Prince/ Landing page scammy workaround

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,
 };

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 = $('<div id="content-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');

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();
             }
 
         });

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;
+}

src/templates/app/trade/trading.jsx

@@ -7,6 +7,7 @@ import DerivBanner from '../../_common/components/deriv_banner.jsx';
 const Trading = () => (
     <React.Fragment>
         <div id='trading_socket_container'>
+            <div id='redirect-loading' className='redirect-loader' />
             <DerivBanner />
             <div id='notifications_wrapper' />
             <div id='loading_container' className='overlay_container' />

src/templates/static/home.jsx

@@ -177,6 +177,7 @@ const Home = () => {
 
     return (
         <React.Fragment>
+            <div id='redirect-loading' className='redirect-loader' />
             <div className='container'>
                 <DerivBanner has_margin />
             </div>