gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fetch on render instead of fetch as you render

Browse Source
This commit is contained in:
Gregor Lohaus
2026-06-16 19:16:31 +02:00
parent fd5063d1c4
commit b59fb2b3af
4 changed files with 99 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/app/cv/page.tsx
View File

@@ -5,26 +5,25 @@ import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sideba
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
export default function CvPage() {
const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
useTimeLine(col2Categories.data)
const cv = trpc.categoryv2.listAllWithEntries.useQuery();
useTimeLine(cv.data)
const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
cv.data?.filter((c) => c.layoutPosition === pos) ?? []
const sidebarCategories = byPosition("sidebar")
const headerCategories = byPosition("header")
const col1Categories = byPosition("col1")
const col2Categories = byPosition("col2")
return (
<>
<SidebarProvider>
{sidebarCategories.data &&
{sidebarCategories.length > 0 &&
<>
<SidebarTriggerDisappearsOnMobile />
<Sidebar>
<SidebarContent className="p-2 lg:pt-[3.2rem]">
{sidebarCategories.data?.map((cat, i) => {
if (cat !== undefined) {
return (
<CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
)
}
})}
{sidebarCategories.map((cat, i) => (
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
))}
</SidebarContent>
</Sidebar>
</>
@@ -32,19 +31,19 @@ export default function CvPage() {
<div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
<div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
<div id="header" className="flex w-full h-fit flex-row gap-4 flex-wrap">
{headerCategories.data?.map((cat, i) => (
<CvCategory layout="row" position={i} initialData={cat} key={cat.id} />
{headerCategories.map((cat, i) => (
<CvCategory layout="row" position={i} category={cat} key={cat.id} />
))}
</div>
<div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
<div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col1Categories.data?.map((cat, i) => (
<CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
<div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col1Categories.map((cat, i) => (
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
))}
</div>
<div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col2Categories.data?.map((cat, i) => (
<CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
<div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
{col2Categories.map((cat, i) => (
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
))}
</div>
</div>