Fix/double page mode not aborting preload image requests (#628)

* Use request manager to preload images in DoublePagedPager

Was forgotten to update along with f852ce70e7

The requests for the preload also never got aborted

* Revoke object urls after load

src/components/util/SpinnerImage.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState, CSSProperties, useEffect } from 'react';
+import { useState, CSSProperties, useEffect, forwardRef, ForwardedRef } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 import { Theme, SxProps, Stack, Button } from '@mui/material';
@@ -22,16 +22,14 @@ interface IProps {
     src: string;
     alt: string;
 
-    imgRef?: React.RefObject<HTMLImageElement>;
-
     spinnerStyle?: SxProps<Theme>;
     imgStyle?: CSSProperties;
 
     onImageLoad?: () => void;
 }
 
-export function SpinnerImage(props: IProps) {
-    const { src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle } = props;
+export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTMLImageElement | null>) => {
+    const { src, alt, onImageLoad, spinnerStyle, imgStyle } = props;
 
     const { t } = useTranslation();
 
@@ -118,16 +116,10 @@ export function SpinnerImage(props: IProps) {
                 }}
                 ref={imgRef}
                 src={imageSourceUrl}
+                onLoad={() => URL.revokeObjectURL(imageSourceUrl)}
                 alt={alt}
                 draggable={false}
             />
         </>
     );
-}
-
-SpinnerImage.defaultProps = {
-    spinnerStyle: {},
-    imgStyle: {},
-    onImageLoad: () => {},
-    imgRef: undefined,
-};
+});