Merge branch 'pending-groups' into 'develop'

Add support for pending Group Requests

See merge request soapbox-pub/soapbox!2327

app/soapbox/features/ui/components/panels/suggested-groups-panel.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Widget } from 'soapbox/components/ui';
+import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
+import { useSuggestedGroups } from 'soapbox/queries/groups';
+
+const SuggestedGroupsPanel = () => {
+  const { groups, isFetching, isFetched, isError } = useSuggestedGroups();
+  const isEmpty = (isFetched && groups.length === 0) || isError;
+
+  if (isEmpty) {
+    return null;
+  }
+
+  return (
+    <Widget
+      title='Suggested Groups'
+    >
+      {isFetching ? (
+        new Array(3).fill(0).map((_, idx) => (
+          <PlaceholderGroupSearch key={idx} />
+        ))
+      ) : (
+        groups.slice(0, 3).map((group) => (
+          <GroupListItem group={group} withJoinAction={false} key={group.id} />
+        ))
+      )}
+    </Widget>
+  );
+};
+
+export default SuggestedGroupsPanel;