Clean up a little, quick things are quick, slow things show a loader

src/app/page.tsx

@@ -1,61 +1,14 @@
-import { HydrateClient, api } from "@/trpc/server";
+import { DockerTable } from "@/app/_components/docker-table";
+import { api } from "@/trpc/server";
 
 export default async function Home() {
-	const list = await api.docker.list();
-
 	void api.docker.list.prefetch();
 
 	return (
-		<HydrateClient>
-			<main className="flex min-h-screen flex-col items-center justify-center">
-				<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-					{list ? (
-						<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
-							<table className="table-s table">
-								<thead>
-									<tr>
-										<th>Name</th>
-										<th>Image</th>
-										<th>Tag</th>
-										<th>Short Hash</th>
-										<th>Tag</th>
-										<th>Short Hash</th>
-									</tr>
-								</thead>
-								<tbody>
-									{list
-										.sort((ca, cb) => {
-											if (ca.containerName && cb.containerName) {
-												if (ca.containerName < cb.containerName) {
-													return -1;
-												}
-												if (ca.containerName > cb.containerName) {
-													return 1;
-												}
-											}
-											return 0;
-										})
-										.map((containerInfo) => {
-											const outdated = containerInfo.current.hash !== containerInfo.latest.hash;
-											return (
-												<tr key={containerInfo.containerName} className={`${outdated ? "bg-base-200" : null}`}>
-													<td className={`border-l-8 ${outdated ? "border-l-error/80" : "border-l-info/80"}`}>{containerInfo.containerName}</td>
-													<td>{containerInfo.imageName}</td>
-													<td>{containerInfo.current.tag}</td>
-													<td>{containerInfo.current.hash}</td>
-													<td>{containerInfo.latest.tag}</td>
-													<td>{containerInfo.latest.hash}</td>
-												</tr>
-											);
-										})}
-								</tbody>
-							</table>
-						</div>
-					) : (
-						"Loading tRPC query..."
-					)}
-				</div>
-			</main>
-		</HydrateClient>
+		<main className="flex min-h-screen flex-col items-center justify-center">
+			<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+				<DockerTable />
+			</div>
+		</main>
 	);
 }