perf(app): optimize subs loading as much as possible

src/views/home/home.tsx

@@ -2,9 +2,13 @@ import { useRef } from 'react';
 import styles from './home.module.css';
 import { Link, useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
+import { Subplebbit } from '@plebbit/plebbit-react-hooks';
 import packageJson from '../../../package.json';
 
+interface HomeProps {
+  subplebbits: (Subplebbit | undefined)[];
+}
+
 const isValidAddress = (address: string): boolean => {
   if (address.includes('/') || address.includes('\\') || address.includes(' ')) {
     return false;
@@ -65,9 +69,8 @@ const InfoBox = () => {
   );
 };
 
-const Boards = () => {
+const Boards = ({ subplebbits }: HomeProps) => {
   const { t } = useTranslation();
-  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
 
   return (
     <div className={styles.box}>
@@ -79,11 +82,16 @@ const Boards = () => {
         <div className={styles.column}>
           <h3>Default SFW</h3>
           <div className={styles.list}>
-            {defaultSubplebbitAddresses.map((address) => (
-              <div className={styles.subplebbit} key={address}>
-                <Link to={`/p/${address}`}>{address}</Link>
-              </div>
-            ))}
+            {subplebbits
+              .filter((subplebbit): subplebbit is Subplebbit => subplebbit !== undefined)
+              .map((subplebbit) => {
+                const address = subplebbit.address;
+                return (
+                  <div className={styles.subplebbit} key={address}>
+                    <Link to={`/p/${address}`}>{address}</Link>
+                  </div>
+                );
+              })}
           </div>
         </div>
         <div className={styles.column}>
@@ -193,7 +201,7 @@ const Footer = () => {
   );
 };
 
-const Home = () => {
+const Home = ({ subplebbits }: HomeProps) => {
   return (
     <div className={styles.content}>
       <Link to='/'>
@@ -203,7 +211,7 @@ const Home = () => {
       </Link>
       <SearchBar />
       <InfoBox />
-      <Boards />
+      <Boards subplebbits={subplebbits} />
       <PopularThreads />
       <Stats />
       <Footer />

src/views/subplebbit/subplebbit.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Subplebbit as SubplebbitType, useFeed } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
 import styles from './subplebbit.module.css';
@@ -9,12 +9,18 @@ import LoadingEllipsis from '../../components/loading-ellipsis';
 import Post from '../../components/post';
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-const Subplebbit = () => {
+interface SubplebbitProps {
+  subplebbits: (SubplebbitType | undefined)[];
+}
+
+const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
   const { t } = useTranslation();
+
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
   const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { createdAt, description, roles, rules, shortAddress, state, title, updatedAt, settings } = subplebbit || {};
+  const { shortAddress, state, title } = subplebbit || {};
+
   const sortType = 'active';
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');