ui: batching requests in repository list page (PROJQUAY-6972)

web/cypress/e2e/repositories-list.cy.ts

@@ -278,4 +278,39 @@ describe('Repositories List Page', () => {
     cy.contains('1 - 20 of 50').should('exist');
     cy.get('td[data-label="Name"]').should('have.length', 20);
   });
+
+  it('renders many repositories', () => {
+    const repos: IRepository[] = [];
+    for (let i = 0; i < 1000; i++) {
+      const repo = {
+        namespace: 'manyrepositories',
+        name: '',
+        description: 'description',
+        is_public: false,
+        kind: 'image',
+        state: 'NORMAL',
+        quota_report: {
+          quota_bytes: 132459661,
+          configured_quota: 104857600,
+        },
+        last_modified: 1656432090,
+        popularity: 0.0,
+        is_starred: false,
+      };
+      repo.name = `repo${i}`;
+      repos.push(repo);
+    }
+    cy.intercept(
+      'GET',
+      '/api/v1/repository?last_modified=true&namespace=*&public=true',
+      {repositories: []},
+    ).as('getRepositories');
+    cy.intercept(
+      'GET',
+      '/api/v1/repository?last_modified=true&namespace=user1&public=true',
+      {repositories: repos},
+    ).as('getRepositories');
+    cy.visit('/repository');
+    cy.contains('1 - 20 of 1000').should('exist');
+  });
 });

web/src/resources/RepositoryResource.ts

@@ -8,6 +8,7 @@ import {
 } from './ErrorHandling';
 import {IAvatar} from './OrganizationResource';
 import {EntityKind} from './UserResource';
+import {isNullOrUndefined} from 'src/libs/utils';
 
 export interface IRepository {
   namespace: string;
@@ -46,11 +47,24 @@ export async function fetchAllRepos(
   signal: AbortSignal,
   next_page_token = null,
 ): Promise<IRepository[] | IRepository[][]> {
-  const namespacedRepos = await Promise.all(
-    namespaces.map((ns) => {
-      return fetchRepositoriesForNamespace(ns, signal, next_page_token);
-    }),
-  );
+  const namespacedRepos = [];
+
+  if (isNullOrUndefined(namespaces) || namespaces.length === 0) {
+    return [];
+  }
+
+  // Batch the number of requests by arbitrary number BATCH_SIZE
+  // to not overwhelm the browser with too many simultaneous requests
+  const BATCH_SIZE = 100;
+  for (let i = 0; i < namespaces.length; i += BATCH_SIZE) {
+    const batch = namespaces.slice(i, i + BATCH_SIZE);
+    const batchRepos = await Promise.all(
+      batch.map((ns) => {
+        return fetchRepositoriesForNamespace(ns, signal, next_page_token);
+      }),
+    );
+    namespacedRepos.push(...batchRepos);
+  }
 
   // Flatten responses to a single list of all repositories
   if (flatten) {