fix: #2391 Add default threshold for apps infinite scroll (#2413)

reapit · Aug 20, 2020 · f84a2ff · f84a2ff
1 parent 0cd3f3d
commit f84a2ff
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap b/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`Client should match a snapshot when LOADING false 1`] = `
                 hasMore={false}
                 loader={<Unknown />}
                 next={[Function]}
-                scrollThreshold="0px"
+                scrollThreshold={0.5}
                 scrollableTarget="app-root-container"
               >
                 <div
@@ -442,7 +442,7 @@ exports[`Client should match a snapshot when LOADING false 2`] = `
                 hasMore={false}
                 loader={<Unknown />}
                 next={[Function]}
-                scrollThreshold="0px"
+                scrollThreshold={0.5}
                 scrollableTarget="app-root-container"
               >
                 <div

diff --git a/packages/marketplace/src/components/pages/apps/apps.tsx b/packages/marketplace/src/components/pages/apps/apps.tsx
@@ -21,6 +21,8 @@ import { getNumberOfItems } from '@/utils/browse-app'
 import ComingSoonApps from './coming-soon'
 import styles from '@/styles/pages/apps.scss?mod'
 
+const DEFAULT_SCROLL_THRESHOLD = 0.5
+
 export const handleAfterClose = ({ setVisible }) => () => setVisible(false)
 export const handleOnChange = history => (page: number) => {
   history.push(addQuery({ page }))
@@ -100,7 +102,9 @@ export const Apps: React.FunctionComponent = () => {
           next={handleLoadMore({ dispatch, preview, loading, numOfItemsPerPage, pageNumber })}
           hasMore={hasMore}
           loader={<Loader key="infiniteScrollLoader" />}
-          scrollThreshold={`${comingSoonAppSectionHeight}px`}
+          scrollThreshold={
+            comingSoonAppSectionHeight > 0 ? `${comingSoonAppSectionHeight}px` : DEFAULT_SCROLL_THRESHOLD
+          }
           // We disable the scrolling in the app list  container and allow the app root container to scroll
           // so the scrollableTarget must be set as app-root-container
           scrollableTarget="app-root-container"

diff --git a/packages/marketplace/src/components/pages/apps/coming-soon.tsx b/packages/marketplace/src/components/pages/apps/coming-soon.tsx
@@ -31,19 +31,19 @@ const comingSoonImagesList = [
 ]
 
 export const handleSetComingSoonAppSectionHeight = (
-  containerHeight: number,
-  setComingSoonAppSectionHeight: React.Dispatch<React.SetStateAction<number>> | undefined,
+  containerHeight?: number,
+  setComingSoonAppSectionHeight?: React.Dispatch<React.SetStateAction<number>> | undefined,
 ) => {
   return () => {
-    if (setComingSoonAppSectionHeight) {
+    if (containerHeight && setComingSoonAppSectionHeight) {
       setComingSoonAppSectionHeight(containerHeight)
     }
   }
 }
 
 const ComingSoonApps: React.FC<ComingSoonAppsProps> = ({ setComingSoonAppSectionHeight }) => {
   const containerRef = React.useRef<HTMLDivElement>(null)
-  const containerHeight = containerRef.current?.clientHeight || 0
+  const containerHeight = containerRef.current?.clientHeight
 
   React.useEffect(handleSetComingSoonAppSectionHeight(containerHeight, setComingSoonAppSectionHeight), [
     containerHeight,