Feature/limit concurrent image requests (#639)

Prevent exhausting the available concurrent requests to the same domain by the browser with just image requests.

This prevents e.g. when browsing a slow source from having 6 concurrent image requests and having to wait for the next page request until one of those requests has finished

package.json

@@ -45,6 +45,7 @@
     "i18next": "^23.8.1",
     "i18next-browser-languagedetector": "^7.2.0",
     "material-ui-popup-state": "^5.0.10",
+    "p-limit": "^5.0.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-device-detect": "^2.2.3",

src/lib/requests/RequestManager.ts

@@ -27,6 +27,7 @@ import {
 } from '@apollo/client';
 import { OperationVariables } from '@apollo/client/core';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import pLimit from 'p-limit';
 import { IRestClient, RestClient } from '@/lib/requests/client/RestClient.ts';
 import { GraphQLClient } from '@/lib/requests/client/GraphQLClient.ts';
 import {
@@ -365,6 +366,8 @@ export class RequestManager {
 
     private readonly cache = new CustomCache();
 
+    private readonly imageQueue = pLimit(5);
+
     public getClient(): IRestClient {
         return this.restClient;
     }
@@ -760,17 +763,19 @@ export class RequestManager {
      */
     public requestImage(url: string): { response: Promise<string> } & AbortableRequest {
         const { abortRequest, signal } = this.createAbortController();
-        const response = this.restClient
-            .fetcher(url, {
-                checkResponseIsJson: false,
-                config: {
-                    signal,
-                    // @ts-ignore - typing has not been updated yet
-                    priority: 'low',
-                },
-            })
-            .then((data) => data.blob())
-            .then((data) => URL.createObjectURL(data));
+        const response = this.imageQueue(() =>
+            this.restClient
+                .fetcher(url, {
+                    checkResponseIsJson: false,
+                    config: {
+                        signal,
+                        // @ts-ignore - typing has not been updated yet
+                        priority: 'low',
+                    },
+                })
+                .then((data) => data.blob())
+                .then((data) => URL.createObjectURL(data)),
+        );
 
         return { response, abortRequest };
     }

yarn.lock

@@ -4507,6 +4507,13 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-5.0.0.tgz#6946d5b7140b649b7a33a027d89b4c625b3a5985"
+  integrity sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==
+  dependencies:
+    yocto-queue "^1.0.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
@@ -5807,6 +5814,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+yocto-queue@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
+  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
+
 zen-observable-ts@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"