prefetch stuff and cache it and fix home leaflet links

Squashed commit of the following:

commit 735200167d44272775bb0943496432b9e4adb11a
Author: Jared Pereira <jared@awarm.space>
Date: Wed Jan 8 15:19:57 2025 -0500

fully prefetch pages on hover/touch

commit 1eae63d6862dc479a0754e4d1c3f3decf0756bb9
Author: Jared Pereira <jared@awarm.space>
Date: Wed Jan 8 15:05:38 2025 -0500

use correct link import

commit def8db56ba6643832aeb9aeb7de0550e0803f64a
Merge: 9abbfd1 60e723d
Author: Jared Pereira <jared@awarm.space>
Date: Wed Jan 8 14:31:00 2025 -0500

Merge branch 'main' into perf/clientside-caching

commit 9abbfd1f12b61ad62f66d2d96ccd0ff1d62cac6e
Merge: bcd87f3 7ad3e9c
Author: Jared Pereira <jared@awarm.space>
Date: Wed Jan 8 11:06:04 2025 -0500

Merge branch 'main' into perf/clientside-caching

commit bcd87f37bfc678c9b1e5c65b314e460652facee1
Author: Jared Pereira <jared@awarm.space>
Date: Tue Jan 7 15:27:22 2025 -0500

add some prefetching and page segment caching

Jared Pereira 1 year ago 4db95b10 60e723de

+23 -7

3 changed files

expand all

app

home

LeafletPreview.tsx

components

HomeButton.tsx

next.config.js

+17 -5

app/home/LeafletPreview.tsx

··· 5 5 ThemeProvider, 6 6 } from "components/ThemeManager/ThemeProvider"; 7 7 import { useEffect, useRef, useState } from "react"; 8 - import { Link } from "react-aria-components"; 9 8 import { useBlocks } from "src/hooks/queries/useBlocks"; 10 9 import { 11 10 PermissionToken, ··· 24 23 import { theme } from "tailwind.config"; 25 24 import { useTemplateState } from "./CreateNewButton"; 26 25 import styles from "./LeafletPreview.module.css"; 26 + import { useRouter } from "next/navigation"; 27 + import Link from "next/link"; 27 28 28 29 export const LeafletPreview = (props: { 29 30 index: number; ··· 40 41 props.leaflet_id; 41 42 let firstPage = useEntity(root, "root/page")[0]; 42 43 let page = firstPage?.data.value || root; 44 + let router = useRouter(); 43 45 44 46 return ( 45 47 <div className="relative max-h-40 h-40"> ··· 60 62 </div> 61 63 </div> 62 64 </ThemeBackgroundProvider> 63 - <Link 64 - href={"/" + props.token.id} 65 - className={`no-underline hover:no-underline text-primary absolute inset-0 w-full h-full`} 66 - ></Link> 65 + <LeafletPreviewLink id={props.token.id} /> 67 66 </div> 68 67 ) : ( 69 68 <LeafletAreYouSure token={props.token} setState={setState} /> ··· 204 203 </div> 205 204 ); 206 205 }; 206 + 207 + const LeafletPreviewLink = (props: { id: string }) => { 208 + let [prefetch, setPrefetch] = useState(false); 209 + return ( 210 + <Link 211 + onMouseEnter={() => setPrefetch(true)} 212 + onPointerDown={() => setPrefetch(true)} 213 + prefetch={prefetch} 214 + href={`/${props.id}`} 215 + className={`no-underline hover:no-underline text-primary absolute inset-0 w-full h-full`} 216 + /> 217 + ); 218 + };

+2 -2

components/HomeButton.tsx

··· 15 15 return ( 16 16 <> 17 17 {isSubpage && ( 18 - <Link href={`/${params.leaflet_id}`}> 18 + <Link href={`/${params.leaflet_id}`} prefetch> 19 19 <HoverButton 20 20 noLabelOnMobile 21 21 icon={<BackToLeafletSmall />} ··· 26 26 </Link> 27 27 )} 28 28 29 - <Link href="/home"> 29 + <Link href="/home" prefetch> 30 30 <HoverButton 31 31 noLabelOnMobile 32 32 icon={<HomeSmall />}

next.config.js

··· 13 13 serverActions: { 14 14 bodySizeLimit: "5mb", 15 15 }, 16 + staleTimes: { 17 + dynamic: 600, 18 + static: 600, 19 + }, 16 20 }, 17 21 }; 18 22

Configure Feed

Configure Feed