Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Commit 8c851b6

Browse files
niloofar-derivSuthesan
niloofar-deriv
and
Suthesan
authored
Niloofar Sadeghi / Improve live chat performance (#2479)
* improve livechat performance * address comments Co-authored-by: Suthesan <[email protected]>
1 parent 6a1f59f commit 8c851b6

File tree

3 files changed

+64
-61
lines changed

3 files changed

+64
-61
lines changed

‎src/components/hooks/use-livechat.js‎

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React from 'react'
22
import { getClientInformation, getDomain, getUTMData, isBrowser } from 'common/utility'
33

4-
export const useLivechat = () => {
4+
export const useLivechat = (first_load_open) => {
55
const [is_livechat_interactive, setLiveChatInteractive] = React.useState(false)
66
const LC_API = (isBrowser() && window.LC_API) || {}
77
const [is_logged_in, setLoggedIn] = React.useState(false)
88

9-
const url_params = new URLSearchParams((isBrowser() && window.location.search) || '')
10-
const is_livechat_query = url_params.get('is_livechat_open')
11-
129
const loadLiveChatScript = (callback) => {
1310
const livechat_script = document.createElement('script')
1411
livechat_script.innerHTML = `
@@ -22,8 +19,7 @@ export const useLivechat = () => {
2219

2320
React.useEffect(() => {
2421
let cookie_interval = null
25-
let script_timeout = null
26-
if (isBrowser()) {
22+
if (isBrowser() && first_load_open) {
2723
const domain = getDomain()
2824

2925
/* this function runs every second to determine logged in status*/
@@ -35,34 +31,22 @@ export const useLivechat = () => {
3531
})()
3632
cookie_interval = setInterval(checkCookie, 1000)
3733

38-
// 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
39-
script_timeout = setTimeout(() => {
40-
loadLiveChatScript(() => {
41-
window.LiveChatWidget.on('ready', () => {
42-
setLiveChatInteractive(true)
43-
if (is_livechat_query?.toLowerCase() === 'true') {
44-
window.LC_API.open_chat_window()
45-
}
46-
})
34+
loadLiveChatScript(() => {
35+
window.LiveChatWidget.on('ready', () => {
36+
setLiveChatInteractive(true)
37+
window.LC_API.open_chat_window()
4738
})
48-
}, 2000)
39+
})
4940
}
5041

51-
return () => {
52-
clearInterval(cookie_interval)
53-
clearTimeout(script_timeout)
54-
}
55-
}, [])
42+
return () => clearInterval(cookie_interval)
43+
}, [first_load_open])
5644

5745
React.useEffect(() => {
58-
if (isBrowser()) {
46+
if (isBrowser() && first_load_open) {
5947
const domain = getDomain()
6048
if (is_livechat_interactive) {
6149
window.LiveChatWidget.on('ready', () => {
62-
// we open and close the window to trigger the widget to listen for new events
63-
window.LC_API.open_chat_window()
64-
window.LC_API.hide_chat_window()
65-
6650
const utm_data = getUTMData(domain)
6751
const client_information = getClientInformation(domain)
6852
const url_params = new URLSearchParams(window.location.search)

‎src/components/layout/livechat.js‎

Lines changed: 49 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, useEffect, useContext } from 'react'
22
import PropTypes from 'prop-types'
33
import styled, { css } from 'styled-components'
44
import { useLivechat } from 'components/hooks/use-livechat'
55
import LiveChatIC from 'images/svg/layout/livechat.svg'
66
import LiveChatHover from 'images/svg/layout/livechat-hover.svg'
77
import device from 'themes/device'
88
import { DerivStore } from 'store'
9+
import { isBrowser } from 'common/utility'
10+
import InitialLoader from 'components/elements/dot-loader'
911

1012
const StyledLiveChat = styled.div`
1113
position: fixed;
@@ -46,32 +48,57 @@ const StyledLiveChat = styled.div`
4648
`
4749

4850
const LiveChat = ({ is_banner_shown }) => {
51+
const url_params = new URLSearchParams((isBrowser() && window.location.search) || '')
52+
const is_livechat_query = url_params.get('is_livechat_open')
53+
const [is_loading, setIsLoading] = useState(false)
4954
const [is_livechat_hover, setLivechatHover] = useState(false)
50-
const [is_livechat_interactive, LC_API] = useLivechat()
51-
const { is_eu_country } = React.useContext(DerivStore)
55+
const [first_load_open, setFirstLoadOpen] = useState(false)
56+
const [is_livechat_interactive, LC_API] = useLivechat(first_load_open)
57+
const { is_eu_country } = useContext(DerivStore)
58+
59+
useEffect(() => {
60+
if (is_livechat_interactive) {
61+
setIsLoading(false)
62+
}
63+
}, [is_livechat_interactive])
64+
65+
useEffect(() => {
66+
if (is_livechat_query?.toLowerCase() === 'true') {
67+
if (is_livechat_interactive) LC_API.open_chat_window()
68+
else setFirstLoadOpen(true)
69+
}
70+
}, [])
5271

5372
return (
54-
<>
55-
{is_livechat_interactive && (
56-
<StyledLiveChat
57-
className="gtm-deriv-livechat"
58-
is_banner_shown={is_banner_shown}
59-
is_eu_country={is_eu_country}
60-
onClick={() => {
61-
LC_API.open_chat_window()
62-
}}
63-
onMouseEnter={() => setLivechatHover(true)}
64-
onMouseLeave={() => setLivechatHover(false)}
65-
>
66-
<img
67-
src={is_livechat_hover ? LiveChatHover : LiveChatIC}
68-
width="32"
69-
height="32"
70-
alt="livechat icon"
73+
<StyledLiveChat
74+
className="gtm-deriv-livechat"
75+
is_banner_shown={is_banner_shown}
76+
is_eu_country={is_eu_country}
77+
onClick={() => {
78+
if (is_livechat_interactive) LC_API.open_chat_window()
79+
else {
80+
setFirstLoadOpen(true)
81+
setIsLoading(true)
82+
}
83+
}}
84+
onMouseEnter={() => setLivechatHover(true)}
85+
onMouseLeave={() => setLivechatHover(false)}
86+
>
87+
{!is_loading ? (
88+
<img
89+
src={is_livechat_hover ? LiveChatHover : LiveChatIC}
90+
width="32"
91+
height="32"
92+
alt="livechat icon"
93+
/>
94+
) : (
95+
<div style={{ width: '32px', height: '32px' }}>
96+
<InitialLoader
97+
style={{ position: 'absolute', marginTop: '-28px', marginLeft: '-5px' }}
7198
/>
72-
</StyledLiveChat>
99+
</div>
73100
)}
74-
</>
101+
</StyledLiveChat>
75102
)
76103
}
77104

‎src/pages/livechat/index.js‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,15 @@ const CoverMinimizeButton = styled.div`
2424
`
2525

2626
const LiveChatPage = () => {
27-
const [is_livechat_interactive, LC_API] = useLivechat()
27+
const [firstLoadOpen, setFirstLoadOpen] = useState(false)
28+
const [is_livechat_interactive, LC_API] = useLivechat(firstLoadOpen)
2829
const [loading, setLoading] = useState(true)
2930

3031
useEffect(() => {
31-
// The reason for this timeout is to help delay before calling LC_API.open_chat_window() function,
32-
// so that it only call the function if Live Chat is fully loaded.
33-
let script_timeout = null
3432
if (is_livechat_interactive) {
35-
script_timeout = setTimeout(() => {
36-
LC_API.open_chat_window()
37-
setLoading(false)
38-
}, 1000)
39-
}
40-
41-
return () => {
42-
clearTimeout(script_timeout)
43-
}
33+
LC_API.open_chat_window()
34+
setLoading(false)
35+
} else setFirstLoadOpen(true)
4436
}, [is_livechat_interactive])
4537

4638
return (

0 commit comments

Comments
 (0)