Merge branch 'fix-cv-animations'

src/app/cv/_components/CvCategory.tsx

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

src/app/cv/page.tsx

@@ -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>

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