Improve Trends Panel in the sidebar

app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Stack } from 'soapbox/components/ui';
+
+import { randomIntFromInterval, generateText } from '../utils';
+
+export default ({ limit }: { limit: number }) => {
+  const trend = randomIntFromInterval(6, 3);
+  const stat = randomIntFromInterval(10, 3);
+
+  return (
+    <>
+      {new Array(limit).fill(undefined).map((_, idx) => (
+        <Stack key={idx} className='animate-pulse text-primary-200 dark:text-primary-700'>
+          <p>{generateText(trend)}</p>
+          <p>{generateText(stat)}</p>
+        </Stack>
+      ))}
+    </>
+  );
+};

app/soapbox/features/ui/components/trends-panel.tsx

@@ -1,26 +1,57 @@
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
+import { setFilter } from 'soapbox/actions/search';
 import Hashtag from 'soapbox/components/hashtag';
-import { Widget } from 'soapbox/components/ui';
+import { Text, Widget } from 'soapbox/components/ui';
+import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends';
+import { useAppDispatch } from 'soapbox/hooks';
 import useTrends from 'soapbox/queries/trends';
 
 interface ITrendsPanel {
   limit: number
 }
 
+const messages = defineMessages({
+  viewAll: {
+    id: 'trendsPanel.viewAll',
+    defaultMessage: 'View all',
+  },
+});
+
 const TrendsPanel = ({ limit }: ITrendsPanel) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
   const { data: trends, isFetching } = useTrends();
 
-  if (trends?.length === 0 || isFetching) {
+  const setHashtagsFilter = () => {
+    dispatch(setFilter('hashtags'));
+  };
+
+  if (!isFetching && !trends?.length) {
     return null;
   }
 
   return (
-    <Widget title={<FormattedMessage id='trends.title' defaultMessage='Trends' />}>
-      {trends?.slice(0, limit).map((hashtag) => (
-        <Hashtag key={hashtag.name} hashtag={hashtag} />
-      ))}
+    <Widget
+      title={<FormattedMessage id='trends.title' defaultMessage='Trends' />}
+      action={
+        <Link to='/search' onClick={setHashtagsFilter}>
+          <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+            {intl.formatMessage(messages.viewAll)}
+          </Text>
+        </Link>
+      }
+    >
+      {isFetching ? (
+        <PlaceholderSidebarTrends limit={limit} />
+      ) : (
+        trends?.slice(0, limit).map((hashtag) => (
+          <Hashtag key={hashtag.name} hashtag={hashtag} />
+        ))
+      )}
     </Widget>
   );
 };

app/soapbox/pages/default_page.tsx

@@ -36,7 +36,7 @@ const DefaultPage: React.FC = ({ children }) => {
         )}
         {features.trends && (
           <BundleContainer fetchComponent={TrendsPanel}>
-            {Component => <Component limit={3} key='trends-panel' />}
+            {Component => <Component limit={5} key='trends-panel' />}
           </BundleContainer>
         )}
         {me && features.suggestions && (

app/soapbox/pages/home_page.tsx

@@ -82,7 +82,7 @@ const HomePage: React.FC = ({ children }) => {
         )}
         {features.trends && (
           <BundleContainer fetchComponent={TrendsPanel}>
-            {Component => <Component limit={3} />}
+            {Component => <Component limit={5} />}
           </BundleContainer>
         )}
         {hasPatron && (

app/soapbox/pages/status_page.tsx

@@ -40,7 +40,7 @@ const StatusPage: React.FC<IStatusPage> = ({ children }) => {
         )}
         {features.trends && (
           <BundleContainer fetchComponent={TrendsPanel}>
-            {Component => <Component limit={3} key='trends-panel' />}
+            {Component => <Component limit={5} key='trends-panel' />}
           </BundleContainer>
         )}
         {me && features.suggestions && (