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

97
src/app/cv/_components/CvEntry.tsx
View File

@@ -1,78 +1,49 @@
import { trpc } from "~/app/_trpc/Client"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { Skeleton } from "~/components/ui/skeleton"
import { cn, type Defined } from "~/lib/utils"
import { cn } from "~/lib/utils"
import Markdown from 'react-markdown'
import { format } from 'date-fns'
import rehypeHighlight from 'rehype-highlight'
import rehypeRaw from 'rehype-raw'
import type { RouterOutputs } from "~/server/routers/_app"
import type { ArrayElement } from "type-fest"
import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
export default function CvEntry(params: {
initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
import type { CvCategoryData } from "./CvCategory"
export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
export default function CvEntry({ entry, className, position = 0 }: {
entry: CvEntryData,
className?: string,
position?: number
}) {
const query = trpc.entryv2.getById.useQuery(params.initialData.id);
const { data, isError, error } = query
const position = params.position ?? 0
return (
<>
{
data ?
<>
<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
{
data.title ?
<CardHeader>
<AnimateTextIn position={position} animation="slide">
<CardTitle> {data.title} </CardTitle>
</AnimateTextIn>
</CardHeader> :
<></>
}
{
data.description ?
<CardContent className="text-sm lg:text-base">
<AnimatePopUp position={position + 0.2}>
<article className="prose prose-zinc dark:prose-invert max-w-none">
<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
</article>
</AnimatePopUp>
</CardContent> :
<></>
}
{
!data.hideDates ?
<CardFooter className="text-sm">
<AnimateTextIn position={position + 0.4}>
{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
</AnimateTextIn>
</CardFooter> :
<></>
}
</Card>
</> :
<>
<Card>
<CardHeader>
<div className="flex flex-row">
<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
</div>
</CardHeader>
<CardContent>
<div>
<Skeleton className="h-4 w-60" />
<Skeleton className="h-4 w-50" />
<Skeleton className="h-4 w-50" />
</div>
</CardContent>
</Card>
</>
<Card className={className ? cn("w-fit", className) : "w-fit"}>
{entry.title ?
<CardHeader>
<AnimateTextIn position={position} animation="slide">
<CardTitle> {entry.title} </CardTitle>
</AnimateTextIn>
</CardHeader> :
<></>
}
</>
{entry.description ?
<CardContent className="text-sm lg:text-base">
<AnimatePopUp position={position + 0.2}>
<article className="prose prose-zinc dark:prose-invert max-w-none">
<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{entry.description}</Markdown>
</article>
</AnimatePopUp>
</CardContent> :
<></>
}
{!entry.hideDates ?
<CardFooter className="text-sm">
<AnimateTextIn position={position + 0.4}>
{`von ${format(new Date(entry.fromTime), 'M. yyyy')} bis zum ${format(new Date(entry.toTime), 'M. yyyy')}`}
</AnimateTextIn>
</CardFooter> :
<></>
}
</Card>
)
}