pl-fe: more optimization

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/status.tsx

@@ -33,10 +33,33 @@ import StatusReplyMentions from './status-reply-mentions';
 import StatusInfo from './statuses/status-info';
 import Tombstone from './tombstone';
 
+
+
 const messages = defineMessages({
   reblogged_by: { id: 'status.reblogged_by', defaultMessage: '{name} reposted' },
 });
 
+interface IAccountInfo {
+  status: SelectedStatus;
+}
+
+const AccountInfo: React.FC<IAccountInfo> = React.memo(({ status }) => (
+  <div className='flex flex-row-reverse items-center gap-1 self-baseline'>
+    <Link to='/@{$username}/posts/$statusId' params={{ username: status.account.acct, statusId: status.id }} className='hover:underline' onClick={(event) => event.stopPropagation()}>
+      <RelativeTimestamp timestamp={status.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
+    </Link>
+    <StatusTypeIcon visibility={status.visibility} />
+    <StatusLanguagePicker status={status} />
+    {!!status.edited_at && (
+      <>
+        <span className='⁂-separator' />
+
+        <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
+      </>
+    )}
+  </div>
+));
+
 interface IStatusFollowedTagInfo {
   status: SelectedStatus;
   avatarSize: number;
@@ -453,22 +476,7 @@ const Status: React.FC<IStatus> = (props) => {
             <AccountContainer
               key={actualStatus.account_id}
               id={actualStatus.account_id}
-              action={
+              action={<AccountInfo status={actualStatus} />}
-                <div className='flex flex-row-reverse items-center gap-1 self-baseline'>
-                  <Link to='/@{$username}/posts/$statusId' params={{ username: actualStatus.account.acct, statusId: actualStatus.id }} className='hover:underline' onClick={(event) => event.stopPropagation()}>
-                    <RelativeTimestamp timestamp={actualStatus.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
-                  </Link>
-                  <StatusTypeIcon visibility={actualStatus.visibility} />
-                  <StatusLanguagePicker status={actualStatus} />
-                  {!!actualStatus.edited_at && (
-                    <>
-                      <span className='⁂-separator' />
-
-                      <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
-                    </>
-                  )}
-                </div>
-              }
               showAccountHoverCard={hoverable}
               withLinkToProfile={hoverable}
               approvalStatus={actualStatus.approval_status}

packages/pl-fe/src/features/chats/components/chat-list.tsx

@@ -71,7 +71,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
           </div>
         )}
         components={{
-          ScrollSeekPlaceholder: () => <PlaceholderChat />,
+          ScrollSeekPlaceholder: PlaceholderChat,
           Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
           EmptyPlaceholder: renderEmpty,
         }}

packages/pl-fe/src/features/notifications/components/notification.tsx

@@ -1,5 +1,5 @@
 import { Link, useNavigate } from '@tanstack/react-router';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { defineMessages, useIntl, FormattedList, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl';
 
 import { mentionCompose, replyCompose } from '@/actions/compose';
@@ -359,7 +359,7 @@ const Notification: React.FC<INotification> = (props) => {
 
   const displayedType = notification.type === 'mention' && (notification.subtype === 'reply' || status?.in_reply_to_account_id === me) ? 'reply' : notification.type;
 
-  const renderIcon = (): React.ReactNode => {
+  const icon = useMemo(() => {
     if (type === 'emoji_reaction' && notification.emoji) {
       return (
         <Emoji
@@ -378,7 +378,7 @@ const Notification: React.FC<INotification> = (props) => {
     } else {
       return null;
     }
-  };
+  }, [type, (notification as any).emoji]);
 
   const renderContent = () => {
     if (type === 'bite' && status) {
@@ -478,7 +478,7 @@ const Notification: React.FC<INotification> = (props) => {
     )
   );
 
-  const statusInfo = <StatusInfo avatarSize={compact ? 0 : avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />;
+  const statusInfo = <StatusInfo avatarSize={compact ? 0 : avatarSize} icon={icon} text={message} title={ariaLabel} />;
 
   return (
     <Hotkeys handlers={handlers} data-testid='notification'>