improve table loading

src/pages/resources/[id]/index.tsx

@@ -130,24 +130,12 @@ const ResourceViewPage = (
   const resourceQuery = api.auditoryResource.byId.useQuery({ id });
   const router = useRouter();
 
+  const ConditionalView = () => {
     if (!resourceQuery.data) {
       return <></>;
     }
 
     return (
-    <>
-      <div className="min-h-screen">
-        <Header />
-        <AdminBarLayout
-          actions={
-            <AdminActionLink
-              symbol={<PencilSquareIcon className="w-4" />}
-              label="Edit Page"
-              href={`${router.asPath}/edit`}
-            />
-          }
-        >
-          <main className="mb-12">
       <div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
         <div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
           <div className="mx-4">
@@ -175,6 +163,24 @@ const ResourceViewPage = (
           </div>
         </div>
       </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="min-h-screen">
+        <Header />
+        <AdminBarLayout
+          actions={
+            <AdminActionLink
+              symbol={<PencilSquareIcon className="w-4" />}
+              label="Edit Page"
+              href={`${router.asPath}/edit`}
+            />
+          }
+        >
+          <main className="mb-12">
+            <ConditionalView />
           </main>
         </AdminBarLayout>
         <Footer />

src/pages/resources/index.tsx

@@ -23,17 +23,30 @@ const Resources = () => {
     skills: queryData.skills,
   });
 
-  if (!resourceQuery.data) {
-    return <></>;
-  }
-
-  const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
   const printQueryStr =
     router.asPath.split("?").length === 2
       ? router.asPath.split("?").at(-1) ?? ""
       : "";
   const printLink = `${router.route}/print?${printQueryStr}`;
 
+  const ConditionalTable = () => {
+    if (!resourceQuery.data) {
+      return <></>;
+    }
+
+    const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
+
+    return (
+      <ResourceTable
+        resourcesPerPage={queryData.perPage}
+        resources={resourceQuery.data.resources}
+        totalPages={totalPages}
+        query={router.query}
+        currentPage={currentPage}
+      />
+    );
+  };
+
   return (
     <>
       <Header />
@@ -67,13 +80,7 @@ const Resources = () => {
             </Link>
           </section>
         </div>
-        <ResourceTable
+        <ConditionalTable />
-          resourcesPerPage={queryData.perPage}
-          resources={resourceQuery.data.resources}
-          totalPages={totalPages}
-          query={router.query}
-          currentPage={currentPage}
-        />
       </main>
       <Footer />
     </>