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) {