TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-27 10:42:45 +03:00
Code Issues Projects Releases Wiki Activity

Added loading indicator to one click signup (#18075)

Browse Source 
no issue
This commit is contained in:
Simon Backx 2023-09-12 11:04:43 +02:00 committed by GitHub
parent c863ed2188
commit 6475895f9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/portal/src/components/pages/RecommendationsPage.js
View File

@ -4,6 +4,7 @@ import CloseButton from '../common/CloseButton';
import {clearURLParams} from '../../utils/notifications'; import {clearURLParams} from '../../utils/notifications';
import LoadingPage from './LoadingPage'; import LoadingPage from './LoadingPage';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark-fill.svg'; import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark-fill.svg';
import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
export const RecommendationsPageStyles = ` export const RecommendationsPageStyles = `
.gh-portal-recommendation-item .gh-portal-list-detail { .gh-portal-recommendation-item .gh-portal-list-detail {
@ -17,6 +18,17 @@ export const RecommendationsPageStyles = `
cursor: pointer; cursor: pointer;
} }
.gh-portal-recommendations-loading-container {
display: block;
position: relative;
width: 38px;
height: 38px;
}
.gh-portal-recommendations-loading-container .gh-portal-loadingicon {
top: 3.5px;
}
.gh-portal-recommendation-item-favicon { .gh-portal-recommendation-item-favicon {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -81,6 +93,7 @@ const RecommendationItem = (recommendation) => {
const {title, url, reason, favicon, one_click_subscribe: oneClickSubscribe, featured_image: featuredImage} = recommendation; const {title, url, reason, favicon, one_click_subscribe: oneClickSubscribe, featured_image: featuredImage} = recommendation;
const allowOneClickSubscribe = member && oneClickSubscribe; const allowOneClickSubscribe = member && oneClickSubscribe;
const [subscribed, setSubscribed] = useState(false); const [subscribed, setSubscribed] = useState(false);
const [loading, setLoading] = useState(false);
const visitHandler = useCallback(() => { const visitHandler = useCallback(() => {
// Open url in a new tab // Open url in a new tab
@ -89,6 +102,7 @@ const RecommendationItem = (recommendation) => {
const oneClickSubscribeHandler = useCallback(async () => { const oneClickSubscribeHandler = useCallback(async () => {
try { try {
setLoading(true);
await onAction('oneClickSubscribe', { await onAction('oneClickSubscribe', {
siteUrl: url, siteUrl: url,
throwErrors: true throwErrors: true
@ -101,15 +115,19 @@ const RecommendationItem = (recommendation) => {
// Trigger a visit // Trigger a visit
openTab(signupUrl); openTab(signupUrl);
} }
setLoading(false);
}, [setSubscribed, url]); }, [setSubscribed, url]);
const clickHandler = useCallback((e) => { const clickHandler = useCallback((e) => {
if (loading) {
return;
}
if (allowOneClickSubscribe) { if (allowOneClickSubscribe) {
oneClickSubscribeHandler(e); oneClickSubscribeHandler(e);
} else { } else {
visitHandler(e); visitHandler(e);
} }
}, [allowOneClickSubscribe, oneClickSubscribeHandler, visitHandler]); }, [loading, allowOneClickSubscribe, oneClickSubscribeHandler, visitHandler]);
return ( return (
<section className="gh-portal-recommendation-item"> <section className="gh-portal-recommendation-item">
@ -122,7 +140,8 @@ const RecommendationItem = (recommendation) => {
</div> </div>
<div> <div>
{subscribed && <CheckmarkIcon className='gh-portal-checkmark-icon' alt='' />} {subscribed && <CheckmarkIcon className='gh-portal-checkmark-icon' alt='' />}
{!subscribed && <button type="button" className="gh-portal-btn gh-portal-btn-list" onClick={clickHandler}>{allowOneClickSubscribe ? t('Subscribe') : t('Visit')}</button>} {!subscribed && loading && <span className='gh-portal-recommendations-loading-container'><LoaderIcon className={'gh-portal-loadingicon dark'} /></span>}
{!subscribed && !loading && <button type="button" className="gh-portal-btn gh-portal-btn-list" onClick={clickHandler}>{allowOneClickSubscribe ? t('Subscribe') : t('Visit')}</button>}
</div> </div>
</section> </section>
); );