fix: fr this time?

apps/forge/src/routes/_authenticated/sign-in/agreements/index.tsx

@@ -1,13 +1,21 @@
 import Title from "@/components/title";
 import { useUserRoles } from "@/hooks/useUserRoles.ts";
 import { getAgreements } from "@/services/root/getAgreements";
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { Loader } from "@ui/components/ui/loader";
 import { AgreementCard } from "./-components/AgreementCard";
 
 export default function Component() {
   const roles = useUserRoles();
-  const agreements = Route.useLoaderData();
+  const { data: agreements, error, isPending } = useQuery({ queryKey: ["agreements"], queryFn: getAgreements }); // cannot use loader here
   const isRep = roles.includes("rep");
+  if (error) {
+    throw error;
+  }
+  if (isPending) {
+    return <Loader />;
+  }
 
   // Filter agreements based on user roles
   const filteredAgreements = agreements.filter((agreement) => {
@@ -43,6 +51,4 @@ export default function Component() {
 
 export const Route = createFileRoute("/_authenticated/sign-in/agreements/")({
   component: Component,
-  loader: getAgreements,
-  preload: false,
 });