add loading bar (#7226)

* add loading bar

* Added overlay and loader to prevent user to visit home page and fixed the flickering issue

* add line

* remove load bar from index file

* fix for double loadbar

* remove unused import

* Added workaround to stop the flickerling

* worked on the loader

* cleanup comments

* Fixed eslint errors

Co-authored-by: Sandeep <sandeep@Sandeep-Singhs-MacBook-Pro-C02DJ89BMD6M-Standard.local>
Co-authored-by: Sandeep <sandeep@deriv.com>
Co-authored-by: Sandeep Rajput <90243468+sandeep-deriv@users.noreply.github.com>

Author: 3 people

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');
 
@@ -127,6 +128,9 @@ const Page = (() => {
         }
         if (Client.isLoggedIn()) {
             BinarySocket.wait('authorize', 'website_status', 'get_account_status').then(() => {
+                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,23 @@ 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 = () => {
+        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);
         });
 
     };
@@ -28,6 +32,7 @@ const RedirectBanner = (() => {
     };
 
     const loginOnLoad = () => {
+        showLoading();
         BinarySocket.wait('authorize', 'website_status', 'landing_company').then(() => {
             const eu_country = isEuCountrySelected(Client.get('residence')) || isEuCountrySelected(State.getResponse('website_status.clients_country'));
             const landing_company_shortcode = Client.get('landing_company_shortcode');
@@ -45,8 +50,12 @@ const RedirectBanner = (() => {
                 handleRedirect();
             } else if (eu_country && virtual_account) {
                 handleRedirect();
+            } else if (!Cookies.get('row-lp-visited')) {
+                handleRowRedirect();
             }
-
+            setTimeout(() => {
+                removeLoadingImage();
+            }, 1000);
         });
 
     };

src/javascript/app/pages/user/view_popup/view_popup.js

@@ -27,8 +27,7 @@ const ViewPopup = (() => {
         sell_text_updated,
         btn_view,
         multiplier,
-        $container,
-        $loading;
+        $container;
 
     const popupbox_id   = 'inpage_popup_content_box';
     const wrapper_id    = 'sell_content_wrapper';
@@ -57,8 +56,6 @@ const ViewPopup = (() => {
         }
 
         getContract();
-
-        setLoadingState(true);
     };
 
     const responseContract = (response) => {
@@ -136,8 +133,6 @@ const ViewPopup = (() => {
     })();
 
     const showContract = () => {
-        setLoadingState(false);
-
         if (!$container) {
             $container = makeTemplate();
         }
@@ -709,24 +704,7 @@ const ViewPopup = (() => {
         }
     };
 
-    const setLoadingState = (show_loading) => {
-        if (show_loading) {
-            $loading = $('#trading_init_progress');
-            if ($loading.length) {
-                $loading.show();
-            }
-        } else {
-            if ($loading.length) {
-                $loading.hide();
-            }
-            if (btn_view) {
-                ViewPopupUI.enableButton($(btn_view));
-            }
-        }
-    };
-
     const showMessagePopup = (localized_text, localized_title, msg_class) => {
-        setLoadingState(false);
         const $con = $('<div/>');
         $con.prepend($('<div/>', { id: 'sell_bet_desc', class: 'popup_bet_desc drag-handle', text: localized_title }));
         $con.append(

src/sass/_common/common.scss

@@ -1234,4 +1234,18 @@ 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;
+    transition: none !important;
+}

src/templates/_common/_layout/layout.jsx

@@ -50,6 +50,7 @@ const Layout = () => {
         <html>
             <Head />
             <body className={it.language}>
+                <div id='redirect-loading' className='redirect-loader' />
                 <div id='msg_notification' className='notice-msg center-text' />
                 <div id='page-wrapper'>
                     <Header />

src/templates/app/logged_in.jsx

@@ -21,12 +21,6 @@ const LoggedIn = () => (
             <meta name='referrer' content='origin' />
         </head>
         <body>
-            <div id='header-binary'>
-                <a href={it.url_for('/')}>
-                    <img id='symbol-logo' src={it.url_for('images/logo/symbol.svg')} alt='' />
-                    <img id='type-logo' src={it.url_for('images/logo/type.svg')} alt='Binary.com' />
-                </a>
-            </div>
             <div id='content-holder'>
                 <div id='content'>
                     <div id='login_loading'>

src/templates/app/trade/trading.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Analysis from './analysis.jsx';
 import Portfolio from '../user/portfolio.jsx';
-import Loading from '../../_common/components/loading.jsx';
 import DerivBanner from '../../_common/components/deriv_banner.jsx';
 
 const Trading = () => (
@@ -304,9 +303,6 @@ const Trading = () => (
             <div id='all_prices' />
             <Analysis />
         </div>
-        <div id='trading_init_progress'>
-            <Loading />
-        </div>
     </React.Fragment>
 );