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/cv/_components/CvCategory.tsx

@@ -1,42 +1,42 @@
 '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",
+  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 (
-		return (
+    <AnimatedCard position={position} className={cn(layout == "row" ? "w-full" : "", "h-screen")}>
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
+      <CardHeader>
-				<CardHeader>
+        <AnimateTextIn position={position + 0.2} animation="slide">
-					<CardTitle>
+          <CardTitle>{category.name}</CardTitle>
-						{category.data?.name}
+        </AnimateTextIn>
-					</CardTitle>
+      </CardHeader>
-				</CardHeader>
+      {entries.length > 0 ?
-				{(entries.data?.length ? entries.data?.length : 0 ) > 0 ?
+        <CardContent className={cn(layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col", "gap-4", "overflow-scroll")}>
-					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
+          <ScrollArea>
-						<ScrollArea>
+            {entries.map((entry, i) => (
-						{entries.data?.map((entry,i) => (
+              <AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
-							<AnimatePopUp position={i}key={entry.id}>
+                <CvEntry position={position + 0.4 + i * 0.2} entry={entry} className={layout == "row" ? "w-full lg:w-fit" : undefined} />
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
+              </AnimatePopUp>
-							</AnimatePopUp>
+            ))}
-						))}
+          </ScrollArea>
-					</ScrollArea>
+        </CardContent>
-					</CardContent>
+        :
-					:
+        <></>
-					<></>
+      }
-				} 
+    </AnimatedCard>
-			</Card>
+  )
-		) 
 }

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 ?
+				<CardHeader>
-					<>
+					<AnimateTextIn position={position} animation="slide">
-						<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
+						<CardTitle> {entry.title} </CardTitle>
-							{
+					</AnimateTextIn>
-								data.title ?
+				</CardHeader> :
-									<CardHeader>
+				<></>
-										<CardTitle> {data.title} </CardTitle>
-									</CardHeader> :
-									<></>
-							}
-							{
-								data.description ?
-									<CardContent className="text-sm lg:text-base">
-										<article className="prose prose-zinc dark:prose-invert max-w-none">
-											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
-										</article>
-									</CardContent> :
-									<></>
-							}
-							{
-								!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')}`}
-									</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>
-					</>
 			}
-		</>
+			{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>
 	)
 }

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/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) {