Skip to content

Commit 2c322da

Browse files
shafin-derivshafin-deriv
authored
Merge pull request #213 from shafin-deriv/shafin/TRAH-6103/fix-ss0-loader
fix: sso loader
2 parents 8afa62a + 53af334 commit 2c322da

File tree

7 files changed

+293
-22
lines changed

7 files changed

+293
-22
lines changed

‎src/components/HomePageSkeleton/HomePageSkeleton.module.scss

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
.skeleton-container {
2+
background-color: #fff;
3+
font-family: Arial, sans-serif;
4+
}
5+
6+
/* Skeleton Animation */
7+
@keyframes shimmer {
8+
0% {
9+
background-position: -200px 0;
10+
}
11+
100% {
12+
background-position: 200px 0;
13+
}
14+
}
15+
16+
.skeleton-box {
17+
background: #e0e0e0;
18+
background-image: linear-gradient(
19+
to right,
20+
#e0e0e0 0%,
21+
#f0f0f0 20%,
22+
#e0e0e0 40%,
23+
#e0e0e0 100%
24+
);
25+
background-size: 200px 100%;
26+
animation: shimmer 1.5s infinite linear;
27+
border-radius: 4px;
28+
}
29+
30+
/* Navigation Bar Skeleton */
31+
.skeleton-navbar {
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
35+
padding: 15px 150px;
36+
background-color: #fff;
37+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
38+
39+
&.skeleton-navbar-mobile {
40+
padding: 15px 20px; /* Reduced padding for mobile */
41+
}
42+
43+
.skeleton-logo {
44+
width: 100px;
45+
height: 24px;
46+
}
47+
48+
.skeleton-nav-links {
49+
display: flex;
50+
list-style: none;
51+
52+
.skeleton-nav-link {
53+
width: 80px;
54+
height: 16px;
55+
margin: 0 15px;
56+
}
57+
}
58+
59+
.skeleton-nav-buttons {
60+
display: flex;
61+
align-items: center;
62+
63+
.skeleton-btn {
64+
width: 60px;
65+
height: 32px;
66+
margin-left: 10px;
67+
}
68+
69+
.skeleton-language {
70+
width: 40px;
71+
height: 32px;
72+
margin-left: 10px;
73+
}
74+
}
75+
}
76+
77+
/* Hero Section Skeleton */
78+
.skeleton-hero {
79+
height: 70vh;
80+
background-color: #e0e0e0;
81+
display: flex;
82+
justify-content: center;
83+
align-items: center;
84+
text-align: center;
85+
position: relative;
86+
87+
.skeleton-hero-content {
88+
.skeleton-hero-title {
89+
width: 300px;
90+
height: 48px;
91+
margin: 0 auto 20px;
92+
}
93+
94+
.skeleton-hero-text {
95+
width: 500px;
96+
height: 20px;
97+
margin: 0 auto 10px;
98+
}
99+
100+
.skeleton-quick-start-btn {
101+
width: 150px;
102+
height: 40px;
103+
margin: 20px auto 0;
104+
}
105+
}
106+
}
107+
108+
/* Features Section Skeleton */
109+
.skeleton-features {
110+
padding: 50px 20px;
111+
text-align: center;
112+
display: flex;
113+
justify-content: center;
114+
align-items: center;
115+
height: 90vh;
116+
117+
.skeleton-features-content {
118+
.skeleton-feature-icon {
119+
width: 50px;
120+
height: 50px;
121+
margin: 0 auto 20px;
122+
}
123+
124+
.skeleton-features-title {
125+
width: 400px;
126+
height: 32px;
127+
margin: 0 auto 15px;
128+
}
129+
130+
.skeleton-features-text {
131+
width: 300px;
132+
height: 18px;
133+
margin: 0 auto;
134+
}
135+
}
136+
}

‎src/components/HomePageSkeleton/index.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import styles from './HomePageSkeleton.module.scss';
3+
import useDeviceType from '@site/src/hooks/useDeviceType';
4+
5+
const HomePageSkeleton: React.FC = () => {
6+
const { deviceType } = useDeviceType();
7+
const isMobile = deviceType === 'mobile';
8+
return (
9+
<div className={styles['skeleton-container']}>
10+
{/* Navigation Bar Skeleton */}
11+
<nav className={`${styles['skeleton-navbar']} ${isMobile ? styles['skeleton-navbar-mobile'] : ''}`}>
12+
{isMobile ? (
13+
// Mobile navigation layout - 1 on left, 2 on right
14+
<>
15+
<div className={`${styles['skeleton-logo']} ${styles['skeleton-box']}`}></div>
16+
<div className={styles['skeleton-nav-buttons']}>
17+
<div className={`${styles['skeleton-btn']} ${styles['skeleton-box']}`}></div>
18+
<div className={`${styles['skeleton-btn']} ${styles['skeleton-box']}`}></div>
19+
</div>
20+
</>
21+
) : (
22+
// Desktop navigation layout
23+
<>
24+
<div className={`${styles['skeleton-logo']} ${styles['skeleton-box']}`}></div>
25+
<ul className={styles['skeleton-nav-links']}>
26+
<li className={`${styles['skeleton-nav-link']} ${styles['skeleton-box']}`}></li>
27+
<li className={`${styles['skeleton-nav-link']} ${styles['skeleton-box']}`}></li>
28+
<li className={`${styles['skeleton-nav-link']} ${styles['skeleton-box']}`}></li>
29+
<li className={`${styles['skeleton-nav-link']} ${styles['skeleton-box']}`}></li>
30+
</ul>
31+
<div className={styles['skeleton-nav-buttons']}>
32+
<div className={`${styles['skeleton-btn']} ${styles['skeleton-box']}`}></div>
33+
<div className={`${styles['skeleton-btn']} ${styles['skeleton-box']}`}></div>
34+
<div className={`${styles['skeleton-language']} ${styles['skeleton-box']}`}></div>
35+
</div>
36+
</>
37+
)}
38+
</nav>
39+
40+
{/* Features Section Skeleton */}
41+
<section className={styles['skeleton-features']}>
42+
<div className={styles['skeleton-features-content']}>
43+
<div className={`${styles['skeleton-features-title']} ${styles['skeleton-box']}`}></div>
44+
</div>
45+
</section>
46+
</div>
47+
);
48+
};
49+
50+
export default HomePageSkeleton;

‎src/components/Layout/CustomLayout.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import HomepageFeatures from '@site/src/features/Home';
2+
import Cookies from 'js-cookie';
3+
import React, { useEffect } from 'react';
4+
import Head from '@docusaurus/Head';
5+
import HomePageSkeleton from '../HomePageSkeleton';
6+
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
7+
8+
const CustomLayout: React.FC = () => {
9+
const [loader, setLoader] = React.useState(true);
10+
const [isSilentLoginExcluded, setIsSilentLoginExcluded] = React.useState(false);
11+
12+
useEffect(() => {
13+
// Only execute in browser environment
14+
if (!ExecutionEnvironment.canUseDOM) {
15+
return;
16+
}
17+
18+
// Now we can safely use browser-specific APIs
19+
const pathname = window.location.pathname;
20+
setIsSilentLoginExcluded(pathname.includes('callback') || pathname.includes('endpoint'));
21+
22+
const mainElement = document.querySelector('[aria-label="Main"]') as HTMLElement;
23+
if (!mainElement) {
24+
setLoader(false);
25+
return;
26+
}
27+
28+
const loggedState = Cookies.get('logged_state');
29+
let isLocalLoggedIn = false;
30+
31+
try {
32+
isLocalLoggedIn =
33+
!!sessionStorage.getItem('login-accounts') &&
34+
JSON.parse(sessionStorage.getItem('login-accounts') || '[]').length > 0;
35+
} catch (error) {
36+
console.log(error);
37+
}
38+
39+
const willEventuallySSO = loggedState === 'true' && !isLocalLoggedIn;
40+
const willEventuallySLO = loggedState === 'false' && isLocalLoggedIn;
41+
42+
if ((willEventuallySSO || willEventuallySLO) && !isSilentLoginExcluded) {
43+
mainElement.style.display = 'none';
44+
setLoader(true);
45+
} else {
46+
mainElement.style.display = '';
47+
setLoader(false);
48+
}
49+
}, [isSilentLoginExcluded]);
50+
51+
return (
52+
<>
53+
{loader ? (
54+
<HomePageSkeleton />
55+
) : (
56+
<>
57+
<Head>
58+
<title>Deriv API | Customise your trading app</title>
59+
<meta
60+
name='description'
61+
content='Use our trading API to build a trading app that offers comprehensive trading functionalities similar to the Deriv Trader platform.'
62+
/>
63+
</Head>
64+
<HomepageFeatures />
65+
</>
66+
)}
67+
</>
68+
);
69+
};
70+
71+
export default CustomLayout;

‎src/hooks/useHandleLogin/index.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,16 @@ export const useHandleLogin = ({ onClickLogin }: { onClickLogin?: () => void })
2020
useGrowthbookGetFeatureValue<TOAuth2EnabledAppList>({
2121
featureFlag: 'hydra_be',
2222
});
23-
const isOAuth2Enabled = useIsOAuth2Enabled(OAuth2EnabledApps, OAuth2EnabledAppsInitialised);
24-
const handleLogin = async () => {
23+
const isOAuth2Enabled = useIsOAuth2Enabled(OAuth2EnabledApps, OAuth2EnabledAppsInitialised);
24+
const handleLogin = async () => {
2525
if (isOAuth2Enabled) {
26-
await requestOidcAuthentication({
27-
redirectCallbackUri: `${window.location.origin}/callback`,
28-
});
26+
try {
27+
await requestOidcAuthentication({
28+
redirectCallbackUri: `${window.location.origin}/callback`,
29+
});
30+
} catch (err) {
31+
console.error('Error during login:', err);
32+
}
2933
}
3034
if (onClickLogin) {
3135
onClickLogin();

‎src/hooks/useLogout/index.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,21 @@ const useLogout = () => {
1616
token: '',
1717
currency: '',
1818
});
19+
window.location.reload();
1920
}, [updateCurrentLoginAccount, updateLoginAccounts]);
2021

2122
const handleLogout = () => {
22-
OAuth2Logout({ WSLogoutAndRedirect: logout, postLogoutRedirectUri: window.location.origin, redirectCallbackUri: `${window.location.origin}/callback` });
23+
try {
24+
OAuth2Logout({
25+
WSLogoutAndRedirect: logout,
26+
postLogoutRedirectUri: window.location.origin,
27+
redirectCallbackUri: `${window.location.origin}/callback`,
28+
}).catch((err) => {
29+
console.error('Error during logout:', err);
30+
});
31+
} catch (err) {
32+
console.error('Error during logout:', err);
33+
}
2334
};
2435

2536
return { logout: handleLogout };

‎src/pages/index.tsx

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React from 'react';
22
import Layout from '@theme/Layout';
3-
import Head from '@docusaurus/Head';
4-
import HomepageFeatures from '@site/src/features/Home';
3+
import CustomLayout from '../components/Layout/CustomLayout';
54

65
export default function Home(): JSX.Element {
76
return (
8-
<Layout
9-
title={'Home'}
10-
description='Deriv API documentation'
11-
wrapperClassName='home_page_wrapper'
12-
>
13-
<Head>
14-
<title>Deriv API | Customise your trading app</title>
15-
<meta
16-
name='description'
17-
content='Use our trading API to build a trading app that offers comprehensive trading functionalities similar to the Deriv Trader platform.'
18-
/>
19-
</Head>
20-
<HomepageFeatures />
21-
</Layout>
7+
<>
8+
<Layout
9+
title={'Home'}
10+
description='Deriv API documentation'
11+
wrapperClassName={`home_page_wrapper`}
12+
>
13+
<CustomLayout />
14+
</Layout>
15+
</>
2216
);
2317
}

‎src/styles/index.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,3 +482,8 @@ main[class*='docMainContainer'] .container {
482482
width: rem(2.2);
483483
}
484484
}
485+
486+
487+
.hide_element {
488+
display: none !important;
489+
}

0 commit comments

Comments
 (0)