fix: avoid janky re-renders when navigating from / (#44)

The /spaces layout added a `<section>` parent element which caused react to have to trash the entire tree and rebuild, which was janky removing it means the dom is stable and navigating is buttery. ✨ License: MIT --------- Signed-off-by: Oli Evans <oli@protocol.ai>
storacha · Nov 15, 2023 · 1b428c4 · 1b428c4
1 parent 2865d06
commit 1b428c4
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 85 deletions.
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,6 @@
 import SidebarLayout from '@/components/SidebarLayout'
 import './globals.css'
 import type { Metadata } from 'next'
-import { H2 } from '@/components/Text'
-import Link from 'next/link'
 
 export const metadata: Metadata = {
   title: 'w3up console',
@@ -18,9 +16,6 @@ export default function RootLayout ({
     <html lang="en">
       <body className='bg-grad min-h-screen'>
         <SidebarLayout>
-          {/* <H2 explain='a decentralised bucket identified by a DID'>
-            <Link href='/'>Space</Link>
-          </H2> */}
           {children}
         </SidebarLayout>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -16,11 +16,9 @@ export default function SpacePage (): JSX.Element {
   return (
     <>
       <SpacesNav />
-      <div>
-        <H2>Pick a Space</H2>
-        <div className='max-w-lg border rounded-md border-zinc-700'>
-          { spaces.map(s => <Item space={s} key={s.did()} /> ) }
-        </div>
+      <H2>Pick a Space</H2>
+      <div className='max-w-lg border rounded-md border-zinc-700'>
+        { spaces.map(s => <Item space={s} key={s.did()} /> ) }
       </div>
     </>
   )

diff --git a/src/app/space/create/page.tsx b/src/app/space/create/page.tsx
@@ -8,8 +8,8 @@ export default function CreateSpacePage (): JSX.Element {
   return (
     <>
       <SpacesNav />
+      <H2>Create a new Space</H2>
       <div className='max-w-xl'>
-        <H2>Create a new Space</H2>
         <SpaceCreatorForm />
       </div>
       <div className='mt-12 max-w-xl text-sm leading-6'>

diff --git a/src/app/space/layout.tsx b/src/app/space/layout.tsx
@@ -12,9 +12,9 @@ interface LayoutProps extends PropsWithChildren {
 
 export default function Layout ({children}: LayoutProps): JSX.Element {
   return (
-    <section>
+    <>
       {children}
-    </section>
+    </>
   )
 }
 
@@ -23,11 +23,6 @@ export default function Layout ({children}: LayoutProps): JSX.Element {
 export function SpacesNav () {
   return (
     <>
-      {/* <div style={{minHeight: 68}}>
-        <p className='font-normal pt-4'>
-          Pick a space to see what's in it, or create a new one.
-        </p>
-      </div> */}
       <div className='lg:flex items-center place-items-center justify-between mt-2 mb-8'>
         <div className='lg:w-2/6 order-last'>
           <UsageBar />

diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx