perf(app): limit load of subplebbit with preload of layout

src/components/board-banner/board-banner.module.css

@@ -21,8 +21,8 @@
 
 .boardAddress {
   padding-top: 5px;
-  font-size: var(--board-subtitle-font-size);
-  color: var(--board-subtitle-text-color);
+  font-size: var(--board-address-font-size);
+  color: var(--board-address-text-color);
 }
 
 .content hr {

src/components/board-banner/board-banner.tsx

@@ -1,6 +1,4 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import styles from './board-banner.module.css';
 
 const totalBanners = 25;
@@ -14,15 +12,16 @@ const ImageBanner = () => {
   return <img src={imagePath} alt='banner' />;
 };
 
-const BoardBanner = () => {
-  const { subplebbitAddress } = useParams();
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { address, title } = subplebbit || {};
+interface BoardBannerProps {
+  title: string | undefined;
+  address: string | undefined;
+}
 
+const BoardBanner = ({ title, address }: BoardBannerProps) => {
   return (
     <div className={styles.content}>
       <div className={styles.bannerCnt}>
-        <ImageBanner key={subplebbitAddress} />
+        <ImageBanner key={address} />
       </div>
       <div className={styles.boardTitle}>{title || `p/${address}`}</div>
       {title && <div className={styles.boardAddress}>p/{address}</div>}

src/components/board-nav/board-nav.tsx

@@ -1,9 +1,10 @@
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';
 import styles from './board-nav.module.css';
 
 interface BoardNavProps {
-  subplebbits: any;
+  address?: string | undefined;
+  subplebbits?: any;
   currentSubplebbit?: string | undefined;
 }
 
@@ -55,14 +56,13 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
   );
 };
 
-const BoardNav = () => {
+const BoardNav = ({ address }: BoardNavProps) => {
   const defaultSubplebbits = useDefaultSubplebbits();
-  const { subplebbitAddress } = useParams();
 
   return (
     <>
       <BoardNavDesktop subplebbits={defaultSubplebbits} />
-      <BoardNavMobile subplebbits={defaultSubplebbits} currentSubplebbit={subplebbitAddress} />
+      <BoardNavMobile subplebbits={defaultSubplebbits} currentSubplebbit={address} />
     </>
   );
 };

src/components/post-form/post-form.tsx

@@ -1,7 +1,11 @@
 import styles from './post-form.module.css';
 import { useTranslation } from 'react-i18next';
 
-const PostForm = () => {
+export interface PostFormProps {
+  address: string | undefined;
+}
+
+const PostForm = ({ address }: PostFormProps) => {
   const { t } = useTranslation();
 
   return (