diff --git a/assets/js/src/newsletters/sending_status.jsx b/assets/js/src/newsletters/sending_status.jsx index f711f514a0..edd702c72f 100644 --- a/assets/js/src/newsletters/sending_status.jsx +++ b/assets/js/src/newsletters/sending_status.jsx @@ -28,7 +28,6 @@ const messages = { const SendingStatus = (props) => { const newsletterId = props.match.params.id; - const [isLoading, setIsLoading] = React.useState(true); const [newsletterSubject, setNewsletterSubject] = React.useState(''); React.useEffect(() => { @@ -40,13 +39,8 @@ const SendingStatus = (props) => { id: newsletterId, }, }) - .done((res) => { - setNewsletterSubject(res.data.subject); - setIsLoading(false); - }) - .fail((res) => { - MailPoet.Notice.showApiErrorNotice(res); - }); + .done(res => setNewsletterSubject(res.data.subject)) + .fail(res => MailPoet.Notice.showApiErrorNotice(res)); }, [newsletterId]); return ( @@ -56,25 +50,7 @@ const SendingStatus = (props) => { newsletterId={newsletterId} newsletterSubject={newsletterSubject} /> - {!isLoading && ( -
} - getListingItemKey={item => `${item.taskId}-${item.subscriberId}`} - columns={columns} - messages={messages} - auto_refresh - sort_by="created_at" - afterGetItems={(state) => { - MailerMixin.checkMailerStatus(state); - CronMixin.checkCronStatus(state); - }} - /> - )} + ); }; @@ -89,6 +65,39 @@ SendingStatus.propTypes = { }).isRequired, }; +const compareProps = (prev, next) => ( + prev.location.pathname === next.location.pathname + && prev.params.id === next.params.id +); + +const SendingStatusListing = React.memo(({ location, params }) => ( +
} + getListingItemKey={item => `${item.taskId}-${item.subscriberId}`} + columns={columns} + messages={messages} + auto_refresh + sort_by="created_at" + afterGetItems={(state) => { + MailerMixin.checkMailerStatus(state); + CronMixin.checkCronStatus(state); + }} + /> +), compareProps); +SendingStatusListing.propTypes = { + location: PropTypes.shape({ + pathname: PropTypes.string, + }).isRequired, + params: PropTypes.shape({ + id: PropTypes.string.isRequired, + }).isRequired, +}; + const StatsLink = ({ newsletterId, newsletterSubject }) => { if (!newsletterId || !newsletterSubject) return null; if (window.mailpoet_premium_active) {