From cb3aff5bb033792f079ecccb89a9d3fd29f6389d Mon Sep 17 00:00:00 2001
From: Abhimanyu Saharan <desk.abhimanyu@gmail.com>
Date: Fri, 13 Feb 2026 22:29:57 +0000
Subject: [PATCH] docs(frontend): note N+1 gateway skills fetch

---
 frontend/src/app/skills/marketplace/page.tsx | 36 +++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/skills/marketplace/page.tsx b/frontend/src/app/skills/marketplace/page.tsx
index 64cbda0..d1fbe7c 100644
--- a/frontend/src/app/skills/marketplace/page.tsx
+++ b/frontend/src/app/skills/marketplace/page.tsx
@@ -137,22 +137,26 @@ export default function SkillsMarketplacePage() {
     });
   }, [selectedPack, skills]);
 
-  const loadSkillsByGateway = useCallback(
-    async () =>
-      Promise.all(
-        gateways.map(async (gateway) => {
-          const response = await listMarketplaceSkillsApiV1SkillsMarketplaceGet({
-            gateway_id: gateway.id,
-          });
-          return {
-            gatewayId: gateway.id,
-            gatewayName: gateway.name,
-            skills: response.status === 200 ? response.data : [],
-          };
-        }),
-      ),
-    [gateways],
-  );
+  const loadSkillsByGateway = useCallback(async () => {
+    // NOTE: This is technically N+1 (one request per gateway). We intentionally
+    // parallelize requests to keep the UI responsive and avoid slow sequential
+    // fetches. If this becomes a bottleneck for large gateway counts, add a
+    // backend batch endpoint to return installation state across all gateways.
+    const gatewaySkills = await Promise.all(
+      gateways.map(async (gateway) => {
+        const response = await listMarketplaceSkillsApiV1SkillsMarketplaceGet({
+          gateway_id: gateway.id,
+        });
+        return {
+          gatewayId: gateway.id,
+          gatewayName: gateway.name,
+          skills: response.status === 200 ? response.data : [],
+        };
+      }),
+    );
+
+    return gatewaySkills;
+  }, [gateways]);
 
   const updateInstalledGatewayNames = useCallback(
     ({