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

src/app.tsx

@@ -1,14 +1,35 @@
 import { useEffect } from 'react';
-import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
+import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { isHomeView } from './lib/utils/view-utils';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import styles from './app.module.css';
 import useTheme from './hooks/use-theme';
 import Home from './views/home';
 import Subplebbit from './views/subplebbit';
 import BoardNav from './components/board-nav';
 import BoardBanner from './components/board-banner';
+import BoardStats from './components/board-stats';
 import PostForm from './components/post-form';
 
+const BoardLayout = () => {
+  const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+
+  return (
+    <>
+      {subplebbitAddress && (
+        <>
+          <BoardNav address={subplebbitAddress} />
+          <BoardBanner title={subplebbit.title} address={subplebbitAddress} />
+          <PostForm address={subplebbitAddress} />
+          <BoardStats address={subplebbitAddress} />
+        </>
+      )}
+      <Outlet />
+    </>
+  );
+};
+
 const App = () => {
   const [theme] = useTheme();
   const location = useLocation();
@@ -26,21 +47,11 @@ const App = () => {
   //   </>
   // );
 
-  const boardLayout = (
-    <>
-      <BoardNav />
-      <BoardBanner />
-      <PostForm />
-      {/* <Stats /> */}
-      <Outlet />
-    </>
-  );
-
   return (
     <div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
       <Routes>
         <Route path='/' element={<Home />} />
-        <Route element={boardLayout}>
+        <Route element={<BoardLayout />}>
           <Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
         </Route>
       </Routes>

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

@@ -21,8 +21,8 @@
 
 .boardAddress {
   padding-top: 5px;
-  font-size: var(--board-subtitle-font-size);
+  font-size: var(--board-address-font-size);
-  color: var(--board-subtitle-text-color);
+  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 = () => {
+interface BoardBannerProps {
-  const { subplebbitAddress } = useParams();
+  title: string | undefined;
-  const subplebbit = useSubplebbit({ subplebbitAddress });
+  address: string | undefined;
-  const { address, title } = subplebbit || {};
+}
 
+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 (

src/themes.css

@@ -10,7 +10,7 @@
   --boardnav-mobile-font-size: 10px;
   --board-title-font-size: 28px;
   --board-title-font-family: Tahoma, sans-serif;
-  --board-subtitle-font-size: x-small;
+  --board-address-font-size: x-small;
   --body-font-color: maroon;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -52,8 +52,8 @@
   --board-title-font-size: 28px;
   --board-title-font-family: Tahoma, sans-serif;
   --board-title-text-color: #af0a0f;
-  --board-subtitle-text-color: #af0a0f;
+  --board-address-text-color: #af0a0f;
-  --board-subtitle-font-size: x-small;
+  --board-address-font-size: x-small;
   --body-font-color: #000;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -91,7 +91,7 @@
   --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
   --boardnav-mobile-font-size: 11pt;
   --board-title-font-size: 32px;
-  --board-subtitle-font-size: 10pt;
+  --board-address-font-size: 10pt;
   --body-font-color: maroon;
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
@@ -129,8 +129,8 @@
   --boardnav-mobile-font-size: 11pt;
   --board-title-font-size: 32px;
   --board-title-text-color: #af0a0f;
-  --board-subtitle-text-color: #af0a0f;
+  --board-address-text-color: #af0a0f;
-  --board-subtitle-font-size: 10pt;
+  --board-address-font-size: 10pt;
   --body-font-color: #000;
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
@@ -170,7 +170,7 @@
   --boardnav-mobile-font-size: 10px;
   --board-title-font-size: 28px;
   --board-title-font-family: Tahoma, sans-serif;
-  --board-subtitle-font-size: x-small;
+  --board-address-font-size: x-small;
   --body-font-color: #c5c8c6;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -205,7 +205,7 @@
   --board-title-font-size: 28px;
   --board-title-font-family: Tahoma, sans-serif;
   --board-title-text-color: #004a99;
-  --board-subtitle-font-size: x-small;
+  --board-address-font-size: x-small;
   --body-font-color: #333;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;