Make remaining image requests abortable (#645)

src/components/reader/DoublePage.tsx

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { forwardRef } from 'react';
-import { Box, SxProps, Theme } from '@mui/material';
+import { CSSProperties, forwardRef } from 'react';
+import { Box } from '@mui/material';
 import { IReaderSettings } from '@/typings';
 import { SpinnerImage } from '@/components/util/SpinnerImage';
 import { imageStyle } from '@/components/reader/Page';
@@ -34,7 +34,7 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => {
         maxWidth: settings.fitPageToWindow ? `calc(${baseImgStyle.maxWidth} * 0.5)` : baseImgStyle.maxWidth,
     };
 
-    const spinnerStyle: SxProps<Theme> = {
+    const spinnerStyle: CSSProperties = {
         ...imgStyle,
         height: '100vh',
         width: '50%',

src/components/reader/Page.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { forwardRef } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { useMediaQuery } from '@mui/material';
@@ -16,20 +16,20 @@ import { SpinnerImage } from '@/components/util/SpinnerImage';
 export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
     ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
 
-export function imageStyle(settings: IReaderSettings): any {
+export function imageStyle(settings: IReaderSettings): CSSProperties {
     const isVertical = settings.readerType === 'ContinuesVertical';
     const isHorizontal = isHorizontalReaderType(settings.readerType);
-    const baseStyling = {
+    const baseStyling: CSSProperties = {
         margin: 0,
         width: `${settings.readerWidth}%`,
         objectFit: 'contain',
     };
 
-    const continuesVerticalStyling = {
+    const continuesVerticalStyling: CSSProperties = {
         marginBottom: '15px',
     };
 
-    const continuesHorizontalStyling = {
+    const continuesHorizontalStyling: CSSProperties = {
         width: undefined,
         minHeight: '100vh',
         maxHeight: '100vh',
@@ -37,7 +37,7 @@ export function imageStyle(settings: IReaderSettings): any {
         marginRight: '7px',
     };
 
-    const fitToPageStyling = {
+    const fitToPageStyling: CSSProperties = {
         width: undefined,
         height: undefined,
         minWidth: settings.scalePage ? 'calc(100vw - (100vw - 100%))' : undefined,