Optimise card width calculation (#5713)

* Add hook for grid card width calculation
* Move card width calculation into grid instead of card

Now calculates once instead of per card

* Debounce resize observer

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useEffect, useMemo, useState } from "react";
+import React, { MouseEvent, useMemo } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
@@ -7,10 +7,7 @@ import { GalleryLink, TagLink } from "src/components/Shared/TagLink";
 import { HoverPopover } from "src/components/Shared/HoverPopover";
 import { SweatDrops } from "src/components/Shared/SweatDrops";
 import { PerformerPopoverButton } from "src/components/Shared/PerformerPopoverButton";
-import {
-  GridCard,
-  calculateCardWidth,
-} from "src/components/Shared/GridCard/GridCard";
+import { GridCard } from "src/components/Shared/GridCard/GridCard";
 import { RatingBanner } from "src/components/Shared/RatingBanner";
 import {
   faBox,
@@ -20,12 +17,11 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { imageTitle } from "src/core/files";
 import { TruncatedText } from "../Shared/TruncatedText";
-import ScreenUtils from "src/utils/screen";
 import { StudioOverlay } from "../Shared/GridCard/StudioOverlay";
 
 interface IImageCardProps {
   image: GQL.SlimImageDataFragment;
-  containerWidth?: number;
+  cardWidth?: number;
   selecting?: boolean;
   selected?: boolean | undefined;
   zoomIndex: number;
@@ -36,38 +32,6 @@ interface IImageCardProps {
 export const ImageCard: React.FC<IImageCardProps> = (
   props: IImageCardProps
 ) => {
-  const [cardWidth, setCardWidth] = useState<number>();
-
-  useEffect(() => {
-    if (
-      !props.containerWidth ||
-      props.zoomIndex === undefined ||
-      ScreenUtils.isMobile()
-    )
-      return;
-
-    let zoomValue = props.zoomIndex;
-    let preferredCardWidth: number;
-    switch (zoomValue) {
-      case 0:
-        preferredCardWidth = 280;
-        break;
-      case 1:
-        preferredCardWidth = 340;
-        break;
-      case 2:
-        preferredCardWidth = 480;
-        break;
-      case 3:
-        preferredCardWidth = 640;
-    }
-    let fittedCardWidth = calculateCardWidth(
-      props.containerWidth,
-      preferredCardWidth!
-    );
-    setCardWidth(fittedCardWidth);
-  }, [props.containerWidth, props.zoomIndex]);
-
   const file = useMemo(
     () =>
       props.image.visual_files.length > 0
@@ -196,7 +160,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
     <GridCard
       className={`image-card zoom-${props.zoomIndex}`}
       url={`/images/${props.image.id}`}
-      width={cardWidth}
+      width={props.cardWidth}
       title={imageTitle(props.image)}
       linkClassName="image-card-link"
       image={