diff --git a/src/components/hooks/use-livechat.js b/src/components/hooks/use-livechat.js
index c18aeebdfe2..5a96f0f84e6 100644
--- a/src/components/hooks/use-livechat.js
+++ b/src/components/hooks/use-livechat.js
@@ -1,14 +1,11 @@
 import React from 'react'
 import { getClientInformation, getDomain, getUTMData, isBrowser } from 'common/utility'
 
-export const useLivechat = () => {
+export const useLivechat = (first_load_open) => {
     const [is_livechat_interactive, setLiveChatInteractive] = React.useState(false)
     const LC_API = (isBrowser() && window.LC_API) || {}
     const [is_logged_in, setLoggedIn] = React.useState(false)
 
-    const url_params = new URLSearchParams((isBrowser() && window.location.search) || '')
-    const is_livechat_query = url_params.get('is_livechat_open')
-
     const loadLiveChatScript = (callback) => {
         const livechat_script = document.createElement('script')
         livechat_script.innerHTML = `
@@ -22,8 +19,7 @@ export const useLivechat = () => {
 
     React.useEffect(() => {
         let cookie_interval = null
-        let script_timeout = null
-        if (isBrowser()) {
+        if (isBrowser() && first_load_open) {
             const domain = getDomain()
 
             /* this function runs every second to determine logged in status*/
@@ -35,34 +31,22 @@ export const useLivechat = () => {
             })()
             cookie_interval = setInterval(checkCookie, 1000)
 
-            // The purpose is to load the script after everything is load but not async or defer. Therefore, it will be ignored in the rendering timeline
-            script_timeout = setTimeout(() => {
-                loadLiveChatScript(() => {
-                    window.LiveChatWidget.on('ready', () => {
-                        setLiveChatInteractive(true)
-                        if (is_livechat_query?.toLowerCase() === 'true') {
-                            window.LC_API.open_chat_window()
-                        }
-                    })
+            loadLiveChatScript(() => {
+                window.LiveChatWidget.on('ready', () => {
+                    setLiveChatInteractive(true)
+                    window.LC_API.open_chat_window()
                 })
-            }, 2000)
+            })
         }
 
-        return () => {
-            clearInterval(cookie_interval)
-            clearTimeout(script_timeout)
-        }
-    }, [])
+        return () => clearInterval(cookie_interval)
+    }, [first_load_open])
 
     React.useEffect(() => {
-        if (isBrowser()) {
+        if (isBrowser() && first_load_open) {
             const domain = getDomain()
             if (is_livechat_interactive) {
                 window.LiveChatWidget.on('ready', () => {
-                    // we open and close the window to trigger the widget to listen for new events
-                    window.LC_API.open_chat_window()
-                    window.LC_API.hide_chat_window()
-
                     const utm_data = getUTMData(domain)
                     const client_information = getClientInformation(domain)
                     const url_params = new URLSearchParams(window.location.search)
diff --git a/src/components/layout/livechat.js b/src/components/layout/livechat.js
index a4b0cfa13cf..1214cfaa962 100644
--- a/src/components/layout/livechat.js
+++ b/src/components/layout/livechat.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { useLivechat } from 'components/hooks/use-livechat'
@@ -6,6 +6,8 @@ import LiveChatIC from 'images/svg/layout/livechat.svg'
 import LiveChatHover from 'images/svg/layout/livechat-hover.svg'
 import device from 'themes/device'
 import { DerivStore } from 'store'
+import { isBrowser } from 'common/utility'
+import InitialLoader from 'components/elements/dot-loader'
 
 const StyledLiveChat = styled.div`
     position: fixed;
@@ -46,32 +48,57 @@ const StyledLiveChat = styled.div`
 `
 
 const LiveChat = ({ is_banner_shown }) => {
+    const url_params = new URLSearchParams((isBrowser() && window.location.search) || '')
+    const is_livechat_query = url_params.get('is_livechat_open')
+    const [is_loading, setIsLoading] = useState(false)
     const [is_livechat_hover, setLivechatHover] = useState(false)
-    const [is_livechat_interactive, LC_API] = useLivechat()
-    const { is_eu_country } = React.useContext(DerivStore)
+    const [first_load_open, setFirstLoadOpen] = useState(false)
+    const [is_livechat_interactive, LC_API] = useLivechat(first_load_open)
+    const { is_eu_country } = useContext(DerivStore)
+
+    useEffect(() => {
+        if (is_livechat_interactive) {
+            setIsLoading(false)
+        }
+    }, [is_livechat_interactive])
+
+    useEffect(() => {
+        if (is_livechat_query?.toLowerCase() === 'true') {
+            if (is_livechat_interactive) LC_API.open_chat_window()
+            else setFirstLoadOpen(true)
+        }
+    }, [])
 
     return (
-        <>
-            {is_livechat_interactive && (
-                <StyledLiveChat
-                    className="gtm-deriv-livechat"
-                    is_banner_shown={is_banner_shown}
-                    is_eu_country={is_eu_country}
-                    onClick={() => {
-                        LC_API.open_chat_window()
-                    }}
-                    onMouseEnter={() => setLivechatHover(true)}
-                    onMouseLeave={() => setLivechatHover(false)}
-                >
-                    <img
-                        src={is_livechat_hover ? LiveChatHover : LiveChatIC}
-                        width="32"
-                        height="32"
-                        alt="livechat icon"
+        <StyledLiveChat
+            className="gtm-deriv-livechat"
+            is_banner_shown={is_banner_shown}
+            is_eu_country={is_eu_country}
+            onClick={() => {
+                if (is_livechat_interactive) LC_API.open_chat_window()
+                else {
+                    setFirstLoadOpen(true)
+                    setIsLoading(true)
+                }
+            }}
+            onMouseEnter={() => setLivechatHover(true)}
+            onMouseLeave={() => setLivechatHover(false)}
+        >
+            {!is_loading ? (
+                <img
+                    src={is_livechat_hover ? LiveChatHover : LiveChatIC}
+                    width="32"
+                    height="32"
+                    alt="livechat icon"
+                />
+            ) : (
+                <div style={{ width: '32px', height: '32px' }}>
+                    <InitialLoader
+                        style={{ position: 'absolute', marginTop: '-28px', marginLeft: '-5px' }}
                     />
-                </StyledLiveChat>
+                </div>
             )}
-        </>
+        </StyledLiveChat>
     )
 }
 
diff --git a/src/pages/livechat/index.js b/src/pages/livechat/index.js
index f61bb452968..b56b5b15eab 100644
--- a/src/pages/livechat/index.js
+++ b/src/pages/livechat/index.js
@@ -24,23 +24,15 @@ const CoverMinimizeButton = styled.div`
 `
 
 const LiveChatPage = () => {
-    const [is_livechat_interactive, LC_API] = useLivechat()
+    const [firstLoadOpen, setFirstLoadOpen] = useState(false)
+    const [is_livechat_interactive, LC_API] = useLivechat(firstLoadOpen)
     const [loading, setLoading] = useState(true)
 
     useEffect(() => {
-        // The reason for this timeout is to help delay before calling LC_API.open_chat_window() function,
-        // so that it only call the function if Live Chat is fully loaded.
-        let script_timeout = null
         if (is_livechat_interactive) {
-            script_timeout = setTimeout(() => {
-                LC_API.open_chat_window()
-                setLoading(false)
-            }, 1000)
-        }
-
-        return () => {
-            clearTimeout(script_timeout)
-        }
+            LC_API.open_chat_window()
+            setLoading(false)
+        } else setFirstLoadOpen(true)
     }, [is_livechat_interactive])
 
     return (