Improve responsive layouts and streamline page loading

lib/catalog.ts

@@ -49,45 +49,50 @@ export async function mediaUrls(paths: (string | null)[], expires = 3600) {
 }
 export async function catalog() {
   const client = admin();
-  const maps = required(
-    await client
+  const [mapResult, serverResult] = await Promise.all([
+    client
       .from("datasets")
       .select("*")
       .eq("state", "published")
       .order("created_at", { ascending: false }),
-  ) as unknown as MapListing[];
-  const servers = required(
-    await client.from("catalog_servers").select("*"),
-  ) as { id: string; name: string; address: string | null }[];
-  const owners = maps.length
-    ? required(
-        await client
+    client.from("catalog_servers").select("*"),
+  ]);
+  const maps = required(mapResult) as unknown as MapListing[];
+  const servers = required(serverResult) as {
+    id: string;
+    name: string;
+    address: string | null;
+  }[];
+  const ownerIds = [
+    ...new Set(maps.flatMap((map) => (map.owner_id ? [map.owner_id] : []))),
+  ];
+  const [ownersResult, signed] = await Promise.all([
+    ownerIds.length
+      ? client
           .from("profiles")
           .select(
             "id,display_name,avatar_path,name_glow,glow_color,role,bug_finder,custom_prefix,custom_prefix_icon",
           )
-          .in("id", [
-            ...new Set(
-              maps
-                .map((m) => m.owner_id)
-                .filter((id): id is string => id !== null),
-            ),
-          ]),
-      )
-    : [];
-  const signed = await mediaUrls(
-    maps.flatMap((map) => [map.map_path || map.cover_path, map.map_path]),
+          .in("id", ownerIds)
+      : Promise.resolve({ data: [], error: null }),
+    mediaUrls(
+      maps.flatMap((map) => [map.map_path || map.cover_path, map.map_path]),
+    ),
+  ]);
+  const owners = new Map(
+    required(ownersResult).map((owner) => [owner.id, owner]),
   );
+  const serverById = new Map(servers.map((server) => [server.id, server]));
   return maps.map((m, index) => ({
     ...m,
     credit:
-      owners.find((p) => p.id === m.owner_id)?.display_name ??
+      owners.get(m.owner_id ?? "")?.display_name ??
       (m.owner_id ? "Explorer" : "Deleted player"),
-    creditGlow: owners.find((p) => p.id === m.owner_id)?.name_glow ?? false,
-    creditAppearance: owners.find((p) => p.id === m.owner_id),
+    creditGlow: owners.get(m.owner_id ?? "")?.name_glow ?? false,
+    creditAppearance: owners.get(m.owner_id ?? ""),
     image: signed[index * 2] ?? undefined,
     mapImage: signed[index * 2 + 1] ?? undefined,
-    server: servers.find((s) => s.id === m.server_id),
+    server: serverById.get(m.server_id),
   }));
 }
 export async function getMap(id: string) {