Placeholder group cards

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

app/soapbox/actions/groups.ts

@@ -310,7 +310,7 @@ const fetchGroupRelationshipsFail = (error: AxiosError) => ({
 
 const joinGroup = (id: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    const locked = (getState().groups.get(id) as any).locked || false;
+    const locked = (getState().groups.items.get(id) as any).locked || false;
 
     dispatch(joinGroupRequest(id, locked));
 

app/soapbox/components/group-card.tsx

@@ -21,7 +21,7 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
       <Stack className='bg-white dark:bg-primary-900 border border-solid border-gray-300 dark:border-primary-800 rounded-lg sm:rounded-xl'>
         <div className='bg-primary-100 dark:bg-gray-800 h-[120px] relative -m-[1px] mb-0 rounded-t-lg sm:rounded-t-xl'>
           {group.header && <img className='h-full w-full object-cover rounded-t-lg sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />}
-          <div className='absolute left-1/2 -translate-x-1/2 -translate-y-1/2'>
+          <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
             <Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
           </div>
         </div>

app/soapbox/features/groups/index.tsx

@@ -10,30 +10,28 @@ import ScrollableList from 'soapbox/components/scrollable-list';
 import { Column, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
+import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
+
 import type { List as ImmutableList } from 'immutable';
 import type { RootState } from 'soapbox/store';
 import type { Group as GroupEntity } from 'soapbox/types/entities';
 
 const getOrderedGroups = createSelector([
-  (state: RootState) => state.groups,
+  (state: RootState) => state.groups.items,
+  (state: RootState) => state.groups.isLoading,
   (state: RootState) => state.group_relationships,
-], (groups, group_relationships) => {
-  if (!groups) {
-    return groups;
-  }
-
-  return (groups
-    .toList()
-    .filter((item: GroupEntity | false) => !!item) as ImmutableList<GroupEntity>)
+], (groups, isLoading, group_relationships) => ({
+  groups: (groups.toList().filter((item: GroupEntity | false) => !!item) as ImmutableList<GroupEntity>)
     .map((item) => item.set('relationship', group_relationships.get(item.id) || null))
     .filter((item) => item.relationship?.member)
-    .sort((a, b) => a.display_name.localeCompare(b.display_name));
-});
+    .sort((a, b) => a.display_name.localeCompare(b.display_name)),
+  isLoading,
+}));
 
 const Groups: React.FC = () => {
   const dispatch = useDispatch();
 
-  const groups = useAppSelector((state) => getOrderedGroups(state));
+  const { groups, isLoading } = useAppSelector((state) => getOrderedGroups(state));
 
   useEffect(() => {
     dispatch(fetchGroups());
@@ -72,6 +70,10 @@ const Groups: React.FC = () => {
       scrollKey='groups'
       emptyMessage={emptyMessage}
       itemClassName='py-3 last:pb-0'
+      isLoading
+      showLoading
+      placeholderComponent={PlaceholderGroupCard}
+      placeholderCount={3}
     >
       {groups.map((group) => (
         <Link to={`/groups/${group.id}`}>

app/soapbox/features/placeholder/components/placeholder-group-card.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { HStack, Stack, Text } from 'soapbox/components/ui';
+
+import { generateText, randomIntFromInterval } from '../utils';
+
+const PlaceholderGroupCard = () => {
+  const groupNameLength = randomIntFromInterval(5, 25);
+  const roleLength = randomIntFromInterval(5, 15);
+  const privacyLength = randomIntFromInterval(5, 15);
+
+  return (
+    <div className='overflow-hidden animate-pulse'>
+      <Stack className='bg-white dark:bg-primary-900 border border-solid border-gray-300 dark:border-primary-800 rounded-lg sm:rounded-xl'>
+        <div className='bg-primary-100 dark:bg-gray-800 h-[120px] relative -m-[1px] mb-0 rounded-t-lg sm:rounded-t-xl'>
+          <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
+            <div className='h-16 w-16 rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900' />
+          </div>
+        </div>
+        <Stack className='p-3 pt-9' alignItems='center' space={3}>
+          <Text size='lg' weight='bold'>{generateText(groupNameLength)}</Text>
+          <HStack className='text-gray-700 dark:text-gray-600' space={3} wrap>
+            <span>{generateText(roleLength)}</span>
+            <span>{generateText(privacyLength)}</span>
+          </HStack>
+        </Stack>
+      </Stack>
+    </div>
+  );
+};
+
+export default PlaceholderGroupCard;

app/soapbox/reducers/groups.ts

@@ -1,6 +1,6 @@
-import { Map as ImmutableMap } from 'immutable';
+import { Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
 
-import { GROUP_FETCH_FAIL, GROUP_DELETE_SUCCESS } from 'soapbox/actions/groups';
+import { GROUP_FETCH_FAIL, GROUP_DELETE_SUCCESS, GROUP_FETCH_REQUEST } from 'soapbox/actions/groups';
 import { GROUPS_IMPORT } from 'soapbox/actions/importer';
 import { normalizeGroup } from 'soapbox/normalizers';
 
@@ -10,23 +10,30 @@ import type { APIEntity } from 'soapbox/types/entities';
 type GroupRecord = ReturnType<typeof normalizeGroup>;
 type APIEntities = Array<APIEntity>;
 
-type State = ImmutableMap<string, GroupRecord | false>;
+const ReducerRecord = ImmutableRecord({
+  isLoading: true,
+  items: ImmutableMap<string, GroupRecord | false>({}),
+});
 
-const normalizeGroups = (state: State, relationships: APIEntities) => {
-  relationships.forEach(relationship => {
-    state = state.set(relationship.id, normalizeGroup(relationship));
-  });
+type State = ReturnType<typeof ReducerRecord>;
 
-  return state;
-};
+const normalizeGroups = (state: State, groups: APIEntities) =>
+  state.update('items', items =>
+    groups.reduce((items: ImmutableMap<string, GroupRecord | false>, group) =>
+      items.set(group.id, normalizeGroup(group)), items),
+  ).set('isLoading', false);
 
-export default function groups(state: State = ImmutableMap(), action: AnyAction) {
+export default function groups(state: State = ReducerRecord(), action: AnyAction) {
   switch (action.type) {
     case GROUPS_IMPORT:
       return normalizeGroups(state, action.groups);
+    case GROUP_FETCH_REQUEST:
+      return state.set('isLoading', true);
     case GROUP_DELETE_SUCCESS:
     case GROUP_FETCH_FAIL:
-      return state.set(action.id, false);
+      return state
+        .setIn(['items', action.id], false)
+        .set('isLoading', false);
     default:
       return state;
   }

app/soapbox/selectors/index.ts

@@ -144,7 +144,7 @@ export const makeGetStatus = () => {
       (state: RootState, { id }: APIStatus) => state.statuses.get(state.statuses.get(id)?.reblog || ''),
       (state: RootState, { id }: APIStatus) => state.accounts.get(state.statuses.get(id)?.account || ''),
       (state: RootState, { id }: APIStatus) => state.accounts.get(state.statuses.get(state.statuses.get(id)?.reblog || '')?.account || ''),
-      (state: RootState, { id }: APIStatus) => state.groups.get(state.statuses.get(id)?.group || ''),
+      (state: RootState, { id }: APIStatus) => state.groups.items.get(state.statuses.get(id)?.group || ''),
       (_state: RootState, { username }: APIStatus) => username,
       getFilters,
       (state: RootState) => state.me,
@@ -356,7 +356,7 @@ export const makeGetStatusIds = () => createSelector([
 
 export const makeGetGroup = () => {
   return createSelector([
-    (state: RootState, id: string) => state.groups.get(id),
+    (state: RootState, id: string) => state.groups.items.get(id),
     (state: RootState, id: string) => state.group_relationships.get(id),
   ], (base, relationship) => {
     if (!base) return null;