diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx index 966835ee4..b0214a427 100644 --- a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { FormattedMessage } from 'react-intl'; import Spinner from 'pl-fe/components/ui/spinner'; @@ -22,19 +22,22 @@ const ProfileMediaPanel: React.FC = ({ account }) => { openModal('MEDIA', { index: attachment.index, statusId: attachment.status_id }); }; - const renderAttachments = () => { - const publicAttachments = attachments.filter(attachment => attachment.visibility === 'public'); - const nineAttachments = publicAttachments.slice(0, 9); + const children = useMemo(() => { + if (isLoading || !account) return ; - if (nineAttachments.length) { + const publicVisibilities = ['public', 'unlisted']; + + const publicAttachments = attachments.filter(attachment => publicVisibilities.includes(attachment.visibility)).slice(0, 9); + + if (publicAttachments.length) { return (
- {nineAttachments.map((attachment, index) => ( + {publicAttachments.map((attachment, index) => ( ))}
@@ -46,15 +49,11 @@ const ProfileMediaPanel: React.FC = ({ account }) => {

); } - }; + }, [isLoading, account?.id, attachments]); return ( }> - {isLoading || !account ? ( - - ) : ( - renderAttachments() - )} + {children} ); };