Groups: Lint, use PlaceholderAccount for GroupMembers

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/birthdays/account.tsx

@@ -1,10 +1,9 @@
 import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
 
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
+import AccountComponent from 'soapbox/components/account';
 import Icon from 'soapbox/components/icon';
+import { HStack } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
@@ -22,12 +21,6 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
 
   const account = useAppSelector((state) => getAccount(state, accountId));
 
-  // useEffect(() => {
-  //   if (accountId && !account) {
-  //     fetchAccount(accountId);
-  //   }
-  // }, [accountId]);
-
   if (!account) return null;
 
   const birthday = account.birthday;
@@ -36,26 +29,20 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' });
 
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <Link className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}>
-          <div className='account__display-name'>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-            <DisplayName account={account} />
-
-          </div>
-        </Link>
-        <div
-          className='flex items-center gap-0.5'
-          title={intl.formatMessage(messages.birthday, {
-            date: formattedBirthday,
-          })}
-        >
-          <Icon src={require('@tabler/icons/ballon.svg')} />
-          {formattedBirthday}
-        </div>
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountComponent account={account} withRelationship={false} />
       </div>
-    </div>
+      <div
+        className='flex items-center gap-0.5'
+        title={intl.formatMessage(messages.birthday, {
+          date: formattedBirthday,
+        })}
+      >
+        <Icon src={require('@tabler/icons/ballon.svg')} />
+        {formattedBirthday}
+      </div>
+    </HStack>
   );
 };
 

app/soapbox/features/group/group-members.tsx

@@ -8,6 +8,8 @@ import { CardHeader, CardTitle } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import PlaceholderAccount from '../placeholder/components/placeholder-account';
+
 import type { List } from 'soapbox/reducers/group-memberships';
 
 type RouteParams = { id: string };
@@ -61,6 +63,10 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
           hasMore={!!memberships?.next}
           onLoadMore={handler}
           isLoading={memberships?.isLoading}
+          showLoading={memberships?.isLoading && !memberships?.items?.count()}
+          placeholderComponent={PlaceholderAccount}
+          placeholderCount={3}
+          itemClassName='pb-4 last:pb-0'
         >
           {memberships?.items?.map(accountId => <AccountContainer key={accountId} id={accountId} withRelationship={false} />)}
         </ScrollableList>

app/soapbox/features/placeholder/components/placeholder-account.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
 
+import { HStack } from 'soapbox/components/ui';
+
 import PlaceholderAvatar from './placeholder-avatar';
 import PlaceholderDisplayName from './placeholder-display-name';
 
 /** Fake account to display while data is loading. */
 const PlaceholderAccount: React.FC = () => {
   return (
-    <div className='account'>
-      <div className='account__wrapper'>
-        <span className='account__display-name'>
-          <div className='account__avatar-wrapper'>
-            <PlaceholderAvatar size={36} />
-          </div>
-          <PlaceholderDisplayName minLength={3} maxLength={25} />
-        </span>
+    <HStack space={3} alignItems='center'>
+      <div className='flex-shrink-0'>
+        <PlaceholderAvatar size={42} />
       </div>
-    </div>
+
+      <div className='min-w-0 flex-1'>
+        <PlaceholderDisplayName minLength={3} maxLength={25} />
+      </div>
+    </HStack>
   );
 };
 

app/soapbox/normalizers/account.ts

@@ -25,7 +25,7 @@ export const AccountRecord = ImmutableRecord({
   acct: '',
   avatar: '',
   avatar_static: '',
-  birthday: '',
+  birthday: '2001-02-12',
   bot: false,
   chats_onboarded: true,
   created_at: '',

app/soapbox/pages/group-page.tsx

@@ -61,7 +61,7 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
       to: `/groups/${group?.id}/members`,
       name: '/groups/:id/members',
     },
-  ]
+  ];
 
   return (
     <>