added some defaults to make modal load smoother

markdavella · Mar 20, 2024 · a6197e0 · a6197e0
1 parent 2d07bcf
commit a6197e0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/web/src/components/InlineModal.tsx b/web/src/components/InlineModal.tsx
@@ -43,7 +43,7 @@ function InlineModal(props: InlineModalProps) {
   return (
     <Collapse
       in={open}
-      timeout={{ appear: 1750, enter: 1750, exit: 750 }}
+      timeout={{ appear: 1250, enter: 1250, exit: 350 }}
       easing={{
         enter: 'easeInSine',
         exit: 'linear',
@@ -65,7 +65,7 @@ function InlineModal(props: InlineModalProps) {
             darkMode ? theme.palette.grey[800] : theme.palette.grey[400],
           padding: '0',
           paddingTop: 2,
-          minHeight: modalHeight || 'auto',
+          minHeight: modalHeight,
         }}
         ref={ref}
       >

diff --git a/web/src/helpers/inlineModalUtil.ts b/web/src/helpers/inlineModalUtil.ts
@@ -13,6 +13,11 @@ export function getEstimatedModalHeight(
   imageWidth: number,
   listSize: number,
 ): number {
+  // Exit with defaults if container & image width are not provided
+  if (containerWidth === 0 || imageWidth === 0) {
+    return 294; //default modal height for 1 row
+  }
+
   const columns = getImagesPerRow(containerWidth, imageWidth);
   const widthPerItem = containerWidth / columns;
   const heightPerItem = widthPerItem * 1.72 + 8; //8  magic number for margin-top of each item
@@ -21,7 +26,7 @@ export function getEstimatedModalHeight(
   //use interesectionObserver to load them in
   const maxRows = rows >= 3 ? 3 : rows;
 
-  return maxRows * heightPerItem;
+  return Math.ceil(maxRows * heightPerItem);
 }
 
 export function firstItemInNextRow(
@@ -44,8 +49,6 @@ export function firstItemInNextRow(
     modalIndex >= numberOfItems - numberOfItemsLastRow &&
     numberOfItemsLastRow < itemsPerRow
   ) {
-    console.log('TEST');
-
     return numberOfItems - numberOfItemsLastRow;
   }