Sets up global cache and uses it to fetch sessions

src/routes/__root.tsx

@@ -1,4 +1,5 @@
 import { AuthProvider } from "@/context/auth/AuthContext";
+import { CacheProvider } from "@/context/cache/CacheContext";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
@@ -7,7 +8,9 @@ export const Route = createRootRoute({
   component: () => (
     <>
       <AuthProvider>
-        <Outlet />
+        <CacheProvider>
+          <Outlet />
+        </CacheProvider>
       </AuthProvider>
       <TanStackRouterDevtools />
       <ReactQueryDevtools buttonPosition="bottom-right" />

src/routes/_app.tsx

@@ -1,5 +1,7 @@
+import { Loader } from "@/components/Loader";
 import { useAuth } from "@/context/auth/AuthContext";
 import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
 
 export const Route = createFileRoute("/_app")({
   component: RouteComponent,
@@ -71,7 +73,9 @@ function RouteComponent() {
   return (
     <>
       <AppHeader />
-      <Outlet />
+      <Suspense fallback={<Loader />}>
+        <Outlet />
+      </Suspense>
     </>
   );
 }

src/routes/_app/_authenticated/document.$documentId.tsx

@@ -1,40 +1,34 @@
 import { RelationshipList } from "@/components/RelationshipList";
 import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
-import { pb } from "@/lib/pocketbase";
 import { displayName, relationshipsForDocument } from "@/lib/relationships";
-import { RelationshipType, type AnyDocument } from "@/lib/types";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { useDocument } from "@/context/cache/CacheContext";
+import type { DocumentId } from "@/lib/types";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
 )({
-  loader: async ({ params }) => {
-    const doc = await pb.collection("documents").getOne(params.documentId);
-    return {
-      document: doc,
-    };
-  },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const { document } = Route.useLoaderData() as {
-    document: AnyDocument;
-  };
+  const { documentId } = Route.useParams();
 
-  const relationshipList = relationshipsForDocument(document);
+  const doc = useDocument(documentId as DocumentId);
+
+  const relationshipList = relationshipsForDocument(doc);
 
   return (
-    <div key={document.id} className="max-w-xl mx-auto py-2 px-4">
+    <div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
       <Link
         to="/document/$documentId/print"
-        params={{ documentId: document.id }}
+        params={{ documentId: doc.id }}
         className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
       >
         Print
       </Link>
-      <DocumentEditForm document={document} />
+      <DocumentEditForm document={doc} />
       <TabGroup>
         <TabList className="flex flex-row flex-wrap gap-1 mt-2">
           {relationshipList.map((relationshipType) => (
@@ -51,7 +45,7 @@ function RouteComponent() {
             <TabPanel key={relationshipType}>
               <RelationshipList
                 key={relationshipType}
-                root={document}
+                root={doc}
                 relationshipType={relationshipType}
               />
             </TabPanel>