Ignore source/extension, tracker icon and thumbnails requests from image queue

The server is not requesting these images through an extension; thus, it is not a problem to send them directly to the server since there is no problem of getting the server "stuck" due to extension rate limits.

src/base/components/SpinnerImage.tsx

@@ -38,6 +38,7 @@ export interface SpinnerImageProps {
     shouldDecode?: boolean;
     useFetchApi?: boolean;
     disableCors?: boolean;
+    ignoreQueue?: boolean;
 
     priority?: Priority;
 
@@ -52,6 +53,7 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
         shouldDecode,
         useFetchApi,
         disableCors,
+        ignoreQueue,
         src,
         alt,
         onLoad,
@@ -111,6 +113,7 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
                     shouldDecode,
                     useFetchApi,
                     disableCors,
+                    ignoreQueue,
                 });
 
                 if (!imageRequest.fromCache) {

src/features/browse/extensions/components/ExtensionCard.tsx

@@ -102,7 +102,15 @@ export function ExtensionCard(props: IProps) {
         <Card>
             <OptionalCardActionAreaLink disabled={!isInstalled} to={AppRoutes.extension.childRoutes.info.path(pkgName)}>
                 <ListCardContent>
-                    <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
+                    <ListCardAvatar
+                        iconUrl={requestManager.getValidImgUrlFor(iconUrl)}
+                        alt={name}
+                        slots={{
+                            spinnerImageProps: {
+                                ignoreQueue: true,
+                            },
+                        }}
+                    />
                     <Stack
                         sx={{
                             justifyContent: 'center',

src/features/browse/sources/components/SourceCard.tsx

@@ -67,7 +67,15 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                 state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
             >
                 <ListCardContent>
-                    <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
+                    <ListCardAvatar
+                        iconUrl={requestManager.getValidImgUrlFor(iconUrl)}
+                        alt={sourceName}
+                        slots={{
+                            spinnerImageProps: {
+                                ignoreQueue: true,
+                            },
+                        }}
+                    />
                     <Stack
                         sx={{
                             justifyContent: 'center',

src/features/extension/info/components/Header.tsx

@@ -14,7 +14,7 @@ import { TExtension } from '@/features/extension/Extensions.types.ts';
 
 export const Header = ({ name, pkgName, iconUrl, repo }: TExtension) => (
     <Stack sx={{ alignItems: 'center' }}>
-        <SpinnerImage alt={name} src={requestManager.getValidImgUrlFor(iconUrl)} />
+        <SpinnerImage alt={name} src={requestManager.getValidImgUrlFor(iconUrl)} ignoreQueue />
         <Typography variant="h5" component="h2">
             {name}
         </Typography>

src/features/migration/components/MigrationCard.tsx

@@ -36,7 +36,15 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
             <CardActionArea component={Link} to={AppRoutes.migrate.path(id)}>
                 <ListCardContent sx={{ justifyContent: 'space-between' }}>
                     <Box sx={{ display: 'flex', gap: 1 }}>
-                        <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
+                        <ListCardAvatar
+                            iconUrl={requestManager.getValidImgUrlFor(iconUrl)}
+                            alt={sourceName}
+                            slots={{
+                                spinnerImageProps: {
+                                    ignoreQueue: true,
+                                },
+                            }}
+                        />
                         <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                             <Typography variant="h6" component="h3">
                                 {sourceName}

src/features/source/components/SourceLanguageSelect.tsx

@@ -147,6 +147,9 @@ export const SourceLanguageSelect = ({
                                                                         height: 32,
                                                                     },
                                                                 },
+                                                                spinnerImageProps: {
+                                                                    ignoreQueue: true,
+                                                                },
                                                             }}
                                                         />
                                                     </ListItemAvatar>

src/features/tracker/components/cards/SettingsTrackerCard.tsx

@@ -91,6 +91,9 @@ export const SettingsTrackerCard = ({ tracker }: { tracker: TTrackerSearch }) =>
                                         variant: 'rounded',
                                         sx: { width: 64, height: 64 },
                                     },
+                                    spinnerImageProps: {
+                                        ignoreQueue: true,
+                                    },
                                 }}
                             />
                         </ListItemAvatar>

src/features/tracker/components/cards/TrackerActiveCard.tsx

@@ -211,6 +211,9 @@ const TrackerActiveHeader = ({
                                 variant: 'rounded',
                                 sx: { width: 64, height: 64 },
                             },
+                            spinnerImageProps: {
+                                ignoreQueue: true,
+                            },
                         }}
                     />
                 </TrackerActiveLink>

src/features/tracker/components/cards/TrackerMangaCard.tsx

@@ -156,6 +156,7 @@ export const TrackerMangaCard = ({
                                     <SpinnerImage
                                         useFetchApi={false}
                                         disableCors
+                                        ignoreQueue
                                         alt={manga.title}
                                         src={manga.coverUrl}
                                         spinnerStyle={{ width: '100%', height: '100%' }}

src/features/tracker/components/cards/TrackerUntrackedCard.tsx

@@ -43,6 +43,9 @@ export const TrackerUntrackedCard = ({
                                 variant: 'rounded',
                                 sx: { width: 64, height: 64 },
                             },
+                            spinnerImageProps: {
+                                ignoreQueue: true,
+                            },
                         }}
                     />
                     <Button sx={{ flexGrow: '1' }} onClick={onClick}>

src/lib/requests/RequestManager.ts

@@ -392,6 +392,12 @@ type SubscriptionHookOptions<Data = any, Variables extends OperationVariables =
 type AbortableRequest = { abortRequest: AbortController['abort'] };
 
 export type ImageRequest = { response: Promise<string>; cleanup: () => void; fromCache: boolean } & AbortableRequest;
+type ImageRequestOptions = {
+    priority?: QueuePriority;
+    shouldDecode?: boolean;
+    disableCors?: boolean;
+    ignoreQueue?: boolean;
+};
 
 export type AbortabaleApolloQueryResponse<Data = any> = {
     response: Promise<ApolloQueryResult<MaybeMasked<Data>>>;
@@ -934,13 +940,15 @@ export class RequestManager {
         url: string,
         request: () => Promise<T>,
         priority?: QueuePriority,
+        ignoreQueue?: boolean,
     ): Promise<ReturnType<typeof this.imageQueue.enqueue<T>> & { fromCache?: boolean }> {
         try {
-            if (await ImageCache.has(url)) {
+            const isCached = await ImageCache.has(url);
+            if (!!ignoreQueue || isCached) {
                 return {
                     key: `image-cache-${url}`,
                     promise: request(),
-                    fromCache: true,
+                    fromCache: isCached,
                 };
             }
 
@@ -952,11 +960,7 @@ export class RequestManager {
 
     private async fetchImageViaTag(
         url: string,
-        {
-            priority,
-            shouldDecode,
-            disableCors,
-        }: { priority?: QueuePriority; shouldDecode?: boolean; disableCors?: boolean } = {},
+        { priority, shouldDecode, disableCors, ignoreQueue }: ImageRequestOptions = {},
     ): Promise<ImageRequest> {
         const imgRequest = new ControlledPromise<string>();
         imgRequest.promise.catch(() => {});
@@ -1000,6 +1004,7 @@ export class RequestManager {
                 return imgRequest.promise;
             },
             priority,
+            ignoreQueue,
         );
 
         return {
@@ -1025,11 +1030,7 @@ export class RequestManager {
      */
     private async fetchImageViaFetchApi(
         url: string,
-        {
-            priority,
-            shouldDecode,
-            disableCors,
-        }: { priority?: QueuePriority; shouldDecode?: boolean; disableCors?: boolean } = {},
+        { priority, shouldDecode, disableCors, ignoreQueue }: ImageRequestOptions = {},
     ): Promise<ImageRequest> {
         let objectUrl: string = '';
         const { abortRequest, signal } = this.createAbortController();
@@ -1059,6 +1060,7 @@ export class RequestManager {
                         return imageUrl;
                     }),
             priority,
+            ignoreQueue,
         );
 
         return {
@@ -1077,17 +1079,13 @@ export class RequestManager {
      */
     public async requestImage(
         url: string,
-        options: {
-            priority?: QueuePriority;
-            useFetchApi?: boolean;
-            shouldDecode?: boolean;
-            disableCors?: boolean;
-        } = {},
+        options: ImageRequestOptions & { useFetchApi?: boolean } = {},
     ): Promise<ImageRequest> {
         const finalOptions = {
             useFetchApi: AuthManager.isAuthRequired(),
             shouldDecode: false,
             disableCors: false,
+            ignoreQueue: false,
             ...Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined)),
         };