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

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

@ -4,35 +4,47 @@ 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 {
padding: 4px 24px 4px 0px; padding: 4px 24px 4px 0px;
} }
.gh-portal-recommendation-item-header { .gh-portal-recommendation-item-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
cursor: pointer; cursor: pointer;
} }
.gh-portal-recommendation-item-favicon { .gh-portal-recommendations-loading-container {
width: 20px; display: block;
height: 20px; position: relative;
border-radius: 3px; width: 38px;
} height: 38px;
}
.gh-portal-recommendations-header { .gh-portal-recommendations-loading-container .gh-portal-loadingicon {
display: flex; top: 3.5px;
flex-direction: column; }
align-items: center;
margin-bottom: 20px;
}
.gh-portal-recommendations-description { .gh-portal-recommendation-item-favicon {
text-align: center; width: 20px;
} height: 20px;
border-radius: 3px;
}
.gh-portal-recommendations-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.gh-portal-recommendations-description {
text-align: center;
}
`; `;
// Fisher-Yates shuffle // Fisher-Yates shuffle
@ -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>
); );