improve table loading

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

@@ -130,9 +130,41 @@ const ResourceViewPage = (
   const resourceQuery = api.auditoryResource.byId.useQuery({ id });
   const router = useRouter();
 
-  if (!resourceQuery.data) {
+  const ConditionalView = () => {
-    return <></>;
+    if (!resourceQuery.data) {
-  }
+      return <></>;
+    }
+
+    return (
+      <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">
+            <h1 className="mb-2 border-b border-neutral-400">Links</h1>
+            <DownloadButtons
+              platformLinks={resourceQuery.data.platform_links}
+            />
+          </div>
+        </div>
+        <div className="justify-left flex flex-col pb-5">
+          <ResourceInfo resource={resourceQuery.data} />
+          <div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
+            <ResourceDescription
+              manufacturer={resourceQuery.data.manufacturer}
+              description={resourceQuery.data.description}
+            />
+          </div>
+          <div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
+            <span className="px-2 py-2 text-sm text-neutral-200">
+              Ages {resourceQuery.data.ages.min}
+              {resourceQuery.data.ages.max >= 100
+                ? "+"
+                : `-${resourceQuery.data.ages.max}`}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  };
 
   return (
     <>
@@ -148,33 +180,7 @@ const ResourceViewPage = (
           }
         >
           <main className="mb-12">
-            <div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
+            <ConditionalView />
-              <div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
-                <div className="mx-4">
-                  <h1 className="mb-2 border-b border-neutral-400">Links</h1>
-                  <DownloadButtons
-                    platformLinks={resourceQuery.data.platform_links}
-                  />
-                </div>
-              </div>
-              <div className="justify-left flex flex-col pb-5">
-                <ResourceInfo resource={resourceQuery.data} />
-                <div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
-                  <ResourceDescription
-                    manufacturer={resourceQuery.data.manufacturer}
-                    description={resourceQuery.data.description}
-                  />
-                </div>
-                <div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
-                  <span className="px-2 py-2 text-sm text-neutral-200">
-                    Ages {resourceQuery.data.ages.min}
-                    {resourceQuery.data.ages.max >= 100
-                      ? "+"
-                      : `-${resourceQuery.data.ages.max}`}
-                  </span>
-                </div>
-              </div>
-            </div>
           </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 />
     </>