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/Galleries/GalleryGridCard.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { GalleryCard } from "./GalleryCard";
-import { useContainerDimensions } from "../Shared/GridCard/GridCard";
+import {
+  useCardWidth,
+  useContainerDimensions,
+} from "../Shared/GridCard/GridCard";
 
 interface IGalleryCardGrid {
   galleries: GQL.SlimGalleryDataFragment[];
@@ -10,19 +13,23 @@ interface IGalleryCardGrid {
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
 }
 
+const zoomWidths = [280, 340, 480, 640];
+
 export const GalleryCardGrid: React.FC<IGalleryCardGrid> = ({
   galleries,
   selectedIds,
   zoomIndex,
   onSelectChange,
 }) => {
-  const [componentRef, { width }] = useContainerDimensions();
+  const [componentRef, { width: containerWidth }] = useContainerDimensions();
+  const cardWidth = useCardWidth(containerWidth, zoomIndex, zoomWidths);
+
   return (
     <div className="row justify-content-center" ref={componentRef}>
       {galleries.map((gallery) => (
         <GalleryCard
           key={gallery.id}
-          containerWidth={width}
+          cardWidth={cardWidth}
           gallery={gallery}
           zoomIndex={zoomIndex}
           selecting={selectedIds.size > 0}