wip change limit based on size of gallery

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx

@@ -7,7 +7,6 @@ import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelecto
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImageBold, PiWarningCircleBold } from 'react-icons/pi';
-import type { ImageDTO } from 'services/api/types';
 
 import GalleryImage from './GalleryImage';
 import { useListImagesQuery } from '../../../../services/api/endpoints/images';
@@ -19,7 +18,8 @@ export const imageItemContainerTestId = 'image-item-container';
 const GalleryImageGrid = () => {
   useGalleryHotkeys();
   const { t } = useTranslation();
-  const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth);
+
+  const { galleryImageMinimumWidth, limit } = useAppSelector((s) => s.gallery);
   const queryArgs = useAppSelector(selectListImagesQueryArgs);
   const { imageDTOs, isLoading, isSuccess, isError } = useListImagesQuery(queryArgs, {
     selectFromResult: ({ data, isLoading, isSuccess, isError }) => ({
@@ -38,7 +38,7 @@ const GalleryImageGrid = () => {
     );
   }
 
-  if (isLoading) {
+  if (isLoading || !limit) {
     return (
       <Flex w="full" h="full" alignItems="center" justifyContent="center">
         <IAINoContentFallback label={t('gallery.loading')} icon={PiImageBold} />
@@ -67,19 +67,9 @@ const GalleryImageGrid = () => {
           ))}
         </Grid>
       </Box>
-      <GalleryPagination />
+      {/* <GalleryPagination /> */}
     </>
   );
 };
 
 export default memo(GalleryImageGrid);
-
-const GalleryImageContainer = memo(({ imageDTO, index }: { imageDTO: ImageDTO; index: number }) => {
-  return (
-    <Box className="item-container" p={1.5} data-testid={imageItemContainerTestId}>
-      <GalleryImage imageDTO={imageDTO} index={index} />
-    </Box>
-  );
-});
-
-GalleryImageContainer.displayName = 'GalleryImageContainer';

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGridContainer.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, Flex } from '@invoke-ai/ui-library';
+import GalleryImageGrid from './GalleryImageGrid';
+import { useAppSelector, useAppDispatch } from '../../../../app/store/storeHooks';
+import { limitChanged } from '../../store/gallerySlice';
+
+export const GalleryImageGridContainer = () => {
+  const { galleryImageMinimumWidth, limit } = useAppSelector((s) => s.gallery);
+  const dispatch = useAppDispatch();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const calculateItemsPerPage = useCallback(() => {
+    const containerWidth = containerRef.current?.clientWidth;
+    const containerHeight = containerRef.current?.clientHeight;
+    console.log({ containerWidth, containerHeight, galleryImageMinimumWidth });
+    if (containerHeight && containerWidth) {
+      const numberHorizontal = Math.floor(containerWidth / galleryImageMinimumWidth);
+      const imageWidth = containerWidth / numberHorizontal;
+      const numberAllowedVertical = Math.floor(containerHeight / imageWidth);
+      console.log({ numberAllowedVertical, numberHorizontal });
+      dispatch(limitChanged(numberAllowedVertical * numberHorizontal));
+    }
+  }, [containerRef, galleryImageMinimumWidth]);
+
+  useEffect(() => {
+    dispatch(limitChanged(undefined));
+    calculateItemsPerPage();
+  }, [galleryImageMinimumWidth]);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      console.log('resize');
+      if (!containerRef.current) {
+        return;
+      }
+      dispatch(limitChanged(undefined));
+      calculateItemsPerPage();
+    });
+
+    resizeObserver.observe(containerRef.current);
+    dispatch(limitChanged(undefined));
+    calculateItemsPerPage();
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <Flex flexDir="column" w="full" h="full" overflow="hidden" ref={containerRef}>
+      {limit && <GalleryImageGrid />}
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx

@@ -3,12 +3,15 @@ import { useGalleryPagination } from '../../hooks/useGalleryPagination';
 import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
 
 export const GalleryPagination = () => {
-  const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, rangeDisplay } =
+  const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, rangeDisplay, total } =
     useGalleryPagination();
-  console.log({ currentPage, pageButtons });
+
+  if (!total) {
+    return <Flex flexDir="column" alignItems="center" gap="2" height="48px"></Flex>;
+  }
 
   return (
-    <Flex flexDir="column" alignItems="center" gap="2">
+    <Flex flexDir="column" alignItems="center" gap="2" height="48px">
       <Flex gap={2} alignItems="flex-end">
         <IconButton
           size="sm"