fetch on render instead of fetch as you render

src/app/_providers/GsapProvicer.tsx

@@ -103,13 +103,6 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     return () => { console.log("gsap cleanup") }
   })
 
-  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
-    tl.current?.add(animation, position);
-  },[])
-  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
-    tl.current?.add(fn, position)
-  },[])
-
   // Handoff: fire registered callbacks once, when the entrance finishes.
   const readyFired = useRef(false)
   const readyCbs = useRef<Array<() => void>>([])
@@ -124,6 +117,21 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     else readyCbs.current.push(cb)
   },[])
 
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    // Content can mount in waves (e.g. nested queries resolving after the
+    // entrance already played). Parking a tween in a finished, paused timeline
+    // would freeze it at its from-state, so once the entrance is done let the
+    // (live) tween play on its own instead.
+    if (readyFired.current) return
+    tl.current?.add(animation, position);
+  },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    // Same late-arrival case: a callback added past the playhead never fires, so
+    // run the reveal immediately once the entrance has finished.
+    if (readyFired.current) { fn(); return }
+    tl.current?.add(fn, position)
+  },[])
+
   // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
   // can fire freely while content height animates.
   const refreshQueued = useRef(false)

src/app/admin/chat/_components/ModelSelector.tsx

@@ -1,48 +0,0 @@
-'use client'
-import { trpc } from '~/app/_trpc/Client'
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '~/components/ui/select'
-
-export default function ModelSelector({ initialValue }: { initialValue: string }) {
-	const utils = trpc.useUtils()
-	const { data: models, isLoading, error } = trpc.chat.listModels.useQuery()
-	const { data: model = initialValue } = trpc.chat.getModel.useQuery(undefined, {
-		initialData: initialValue,
-	})
-
-	const mutation = trpc.chat.updateModel.useMutation({
-		onSuccess: () => utils.chat.getModel.invalidate(),
-	})
-
-	// Ensure the currently-saved model is always selectable, even if the
-	// OpenAI list doesn't include it (e.g. a deprecated model).
-	const options = Array.from(new Set([model, ...(models ?? [])])).filter(Boolean)
-
-	return (
-		<div className="flex flex-col gap-2">
-			<Select value={model} onValueChange={(v) => mutation.mutate({ model: v })}>
-				<SelectTrigger className="w-72">
-					<SelectValue placeholder={isLoading ? 'Loading models…' : 'Select a model'} />
-				</SelectTrigger>
-				<SelectContent>
-					{options.map((id) => (
-						<SelectItem key={id} value={id}>
-							{id}
-						</SelectItem>
-					))}
-				</SelectContent>
-			</Select>
-			<div className="flex items-center gap-3 text-sm text-muted-foreground">
-				{mutation.isPending && <span>Saving…</span>}
-				{mutation.isSuccess && !mutation.isPending && <span>Saved</span>}
-				{error && <span className="text-destructive">Failed to load models: {error.message}</span>}
-				{mutation.error && <span className="text-destructive">{mutation.error.message}</span>}
-			</div>
-		</div>
-	)
-}

src/app/admin/chat/page.tsx

@@ -1,23 +1,11 @@
 import { servTrpc } from '~/app/_trpc/ServerClient'
 import SystemPromptForm from './_components/SystemPromptForm'
-import ModelSelector from './_components/ModelSelector'
 
 export default async function SystemPromptPage() {
 	const prompt = await servTrpc.chat.getSystemPrompt()
-	const model = await servTrpc.chat.getModel()
 
 	return (
-		<div className="w-full max-w-2xl p-6 flex flex-col gap-8">
+		<div className="w-full max-w-2xl p-6 flex flex-col gap-4">
-			<div className="flex flex-col gap-4">
-				<div>
-					<h1 className="text-lg font-semibold">AI Model</h1>
-					<p className="text-sm text-muted-foreground">
-						The OpenAI model used to respond to chat requests.
-					</p>
-				</div>
-				<ModelSelector initialValue={model} />
-			</div>
-			<div className="flex flex-col gap-4">
 			<div>
 				<h1 className="text-lg font-semibold">AI System Prompt</h1>
 				<p className="text-sm text-muted-foreground">
@@ -26,6 +14,5 @@ export default async function SystemPromptPage() {
 			</div>
 			<SystemPromptForm initialValue={prompt} />
 		</div>
-		</div>
 	)
 }

src/app/api/chat/route.ts

@@ -32,7 +32,6 @@ export async function POST(req: Request) {
 	if (!session) return new Response('Session not found', { status: 404 })
 
 	const systemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
-	const model = await servTrpc.chat.getModel()
 
 	// Save the latest user message
 	const lastMessage = messages[messages.length - 1]
@@ -47,7 +46,7 @@ export async function POST(req: Request) {
 	}
 
 	const result = streamText({
-		model: openai(model),
+		model: openai('gpt-5-mini'),
 		system: systemPrompt,
 		messages: await convertToModelMessages(messages),
 		tools: {

src/app/cv/_components/CvCategory.tsx

@@ -1,35 +1,35 @@
 'use client'
-import { trpc } from "~/app/_trpc/Client"
 import CvEntry from "./CvEntry"
-import type { servTrpc } from "~/app/_trpc/ServerClient"
-import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils"
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
 import { ScrollArea } from "~/components/ui/scroll-area";
+
+export type CvCategoryData = ArrayElement<RouterOutputs['categoryv2']['listAllWithEntries']>
+
 type CvCategoryProps = {
-  initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
+  category: CvCategoryData,
   layout: "row" | "col",
-  children?: React.ReactElement<Parameters<typeof CvEntry>>
+  position?: number,
 }
-export default function CvCategory(props:CvCategoryProps)  {
+export default function CvCategory({ category, layout, position = 0 }: CvCategoryProps) {
-  const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
+  const entries = category.cvEntry
-  const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
   return (
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
+    <AnimatedCard position={position} className={cn(layout == "row" ? "w-full" : "", "h-screen")}>
       <CardHeader>
-					<CardTitle>
+        <AnimateTextIn position={position + 0.2} animation="slide">
-						{category.data?.name}
+          <CardTitle>{category.name}</CardTitle>
-					</CardTitle>
+        </AnimateTextIn>
       </CardHeader>
-				{(entries.data?.length ? entries.data?.length : 0 ) > 0 ?
+      {entries.length > 0 ?
-					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
+        <CardContent className={cn(layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col", "gap-4", "overflow-scroll")}>
           <ScrollArea>
-						{entries.data?.map((entry,i) => (
+            {entries.map((entry, i) => (
-							<AnimatePopUp position={i}key={entry.id}>
+              <AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
+                <CvEntry position={position + 0.4 + i * 0.2} entry={entry} className={layout == "row" ? "w-full lg:w-fit" : undefined} />
               </AnimatePopUp>
             ))}
           </ScrollArea>
@@ -37,6 +37,6 @@ export default function CvCategory(props:CvCategoryProps)  {
         :
         <></>
       }
-			</Card>
+    </AnimatedCard>
   )
 }

src/app/cv/_components/CvEntry.tsx

@@ -1,68 +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 } from "~/lib/utils"
-import { cn, type Defined } 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"
-export default function CvEntry(params: {
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
-	initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
-	className?: string
+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
 	return (
-		<>
+		<Card className={className ? cn("w-fit", className) : "w-fit"}>
-			{
+			{entry.title ?
-				data ?
-					<>
-						<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
-							{
-								data.title ?
 				<CardHeader>
-										<CardTitle> {data.title} </CardTitle>
+					<AnimateTextIn position={position} animation="slide">
+						<CardTitle> {entry.title} </CardTitle>
+					</AnimateTextIn>
 				</CardHeader> :
 				<></>
 			}
-							{
+			{entry.description ?
-								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>
+							<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{entry.description}</Markdown>
 						</article>
+					</AnimatePopUp>
 				</CardContent> :
 				<></>
 			}
-							{
+			{!entry.hideDates ?
-								!data.hideDates ?
 				<CardFooter className="text-sm">
-										{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
+					<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>
-					</> :
-					<>
-						<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>
-					</>
-			}
-		</>
 	)
 }

src/app/cv/page.tsx

@@ -1,65 +1,29 @@
 'use client'
-import { useGSAP } from "@gsap/react";
+import { useTimeLine } from "../_providers/GsapProvicer";
-import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
 import { trpc } from "../_trpc/Client";
-import { useRef } from "react";
 import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
 import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
-import gsap from 'gsap'
 export default function CvPage() {
-  const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
+  const cv = trpc.categoryv2.listAllWithEntries.useQuery();
-  const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
+  useTimeLine(cv.data)
-  const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
+  const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
-  const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
+    cv.data?.filter((c) => c.layoutPosition === pos) ?? []
-  const gsapContext = useGsapContext()
+  const sidebarCategories = byPosition("sidebar")
-  const container = useRef<HTMLDivElement>(null)
+  const headerCategories = byPosition("header")
-  enum Direction {
+  const col1Categories = byPosition("col1")
-    Left = 1,
+  const col2Categories = byPosition("col2")
-    Up,
-    Right,
-    Down
-  }
-  const nextGsapConf = (direction: Direction) => {
-    switch (direction) {
-      case Direction.Left:
-        return { x: -100, opacity: 0, duration: 0.5 }
-      case Direction.Up:
-        return { y: -100, opacity: 0, duration: 0.5 }
-      case Direction.Right:
-        return { x: 100, opacity: 0, duration: 0.5 }
-      case Direction.Down:
-        return { y: 100, opacity: 0, duration: 0.5 }
-    }
-  }
-  useTimeLine(col2Categories)
-  useGSAP(() => {
-    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
-    let dir = Direction.Left;
-    items?.forEach(item => {
-      gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
-      if (dir == Direction.Down) {
-        dir = Direction.Left
-      } else {
-        dir = dir + 1
-      }
-    })
-  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
   return (
     <>
-      <SidebarProvider ref={container}>
+      <SidebarProvider>
-        {sidebarCategories.data &&
+        {sidebarCategories.length > 0 &&
           <>
             <SidebarTriggerDisappearsOnMobile />
-            <Sidebar className="gsapan ">
+            <Sidebar>
               <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat) => {
+                {sidebarCategories.map((cat, i) => (
-                  if (cat !== undefined) {
+                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                    return (
+                ))}
-                      <CvCategory layout="col" initialData={cat} key={cat.id} />
-                    )
-                  }
-                })}
               </SidebarContent>
             </Sidebar>
           </>
@@ -67,26 +31,20 @@ 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) => {
+              {headerCategories.map((cat, i) => (
-                return (
+                <CvCategory layout="row" position={i} category={cat} key={cat.id} />
-                  <CvCategory layout="row" initialData={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`}>
+              <div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.data?.map((cat) => {
+                {col1Categories.map((cat, i) => (
-                  return (
+                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                    <CvCategory layout="col" initialData={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`}>
+              <div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.data?.map((cat) => {
+                {col2Categories.map((cat, i) => (
-                  return (
+                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
+                ))}
-                  )
-                })}
               </div>
             </div>
           </div>

src/server/dbschema/schema.ts

@@ -175,7 +175,6 @@ export const chatMessageRelations = relations(chatMessage, ({ one }) => ({
 export const systemSettings = createTable(
 	"systemSetting",
 	(d) => ({
-		systemPropmt: d.text(),
+		systemPropmt: d.text()
-		model: d.text()
 	})
 )

src/server/routers/chat.ts

@@ -7,26 +7,6 @@ import { isAdmin } from '~/app/actions';
 import { z } from 'zod';
 import { eq } from 'drizzle-orm';
 import { clerkClient, auth } from '@clerk/nextjs/server'
-import { env } from '~/env'
-
-export const DEFAULT_MODEL = 'gpt-5-mini'
-
-// Models returned by the OpenAI API that aren't usable for chat completions.
-const NON_CHAT_MODEL = /embedding|image|audio|realtime|transcribe|tts|whisper|moderation|dall-e|search|codex|instruct/
-
-async function readSettings() {
-	return db.select().from(systemSettings).limit(1).then((r) => r[0])
-}
-
-async function writeSettings(values: { systemPropmt?: string | null; model?: string | null }) {
-	const current = await readSettings()
-	await db.delete(systemSettings)
-	await db.insert(systemSettings).values({
-		systemPropmt: values.systemPropmt ?? current?.systemPropmt ?? null,
-		model: values.model ?? current?.model ?? null,
-	})
-}
-
 export const chatRouter = router({
   getSession: publicProcedure.query(async () => {
     const { userId } = await auth();
@@ -86,34 +66,13 @@ export const chatRouter = router({
 
   }),
   getSystemPrompt: publicProcedure.query(async () => {
-    const row = await readSettings()
+    const row = await db.select().from(systemSettings).limit(1).then((r) => r[0])
     return row?.systemPropmt ?? ''
   }),
   updateSystemPrompt: publicProcedure.input(z.object({ prompt: z.string() })).mutation(async ({ input }) => {
     if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    await writeSettings({ systemPropmt: input.prompt })
+    await db.delete(systemSettings)
-  }),
+    await db.insert(systemSettings).values({ systemPropmt: input.prompt })
-  getModel: publicProcedure.query(async () => {
-    const row = await readSettings()
-    return row?.model ?? DEFAULT_MODEL
-  }),
-  listModels: publicProcedure.query(async () => {
-    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    const res = await fetch('https://api.openai.com/v1/models', {
-      headers: { Authorization: `Bearer ${env.OPENAI_API_KEY}` },
-    })
-    if (!res.ok) {
-      throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: `failed to fetch models (${res.status})` })
-    }
-    const json = (await res.json()) as { data: { id: string }[] }
-    return json.data
-      .map((m) => m.id)
-      .filter((id) => (id.startsWith('gpt') || /^o\d/.test(id) || id.startsWith('chatgpt')) && !NON_CHAT_MODEL.test(id))
-      .sort()
-  }),
-  updateModel: publicProcedure.input(z.object({ model: z.string() })).mutation(async ({ input }) => {
-    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    await writeSettings({ model: input.model })
   }),
 })
 

src/server/routers/cvCategory.ts

@@ -13,6 +13,20 @@ export const cvCategoryRouter = router({
     console.log(res);
     return res;
   }),
+  // Single round-trip for the whole CV page: every category (across all layout
+  // positions) with its entries already populated. Lets the page fetch-then-render
+  // instead of waterfalling per-category/per-entry queries, so all content is
+  // present before the entrance animation runs.
+  listAllWithEntries: publicProcedure.query(async () => {
+    const res = await db.query.cvCategory.findMany({
+      with: {
+        cvEntry: {
+          orderBy: (t, { desc }) => desc(t.toTime),
+        },
+      },
+    })
+    return res;
+  }),
   getById: publicProcedure.input(z.string()).query(async ({input}) => {
     const res = await db.query.cvCategory.findFirst({
       where(fields, operators) {