fix(ui): fix infinite scroll flickering

ncarlier · May 16, 2019 · ae083f9 · ae083f9
1 parent cc5c322
commit ae083f9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/ui/src/articles/components/ArticleList.tsx b/ui/src/articles/components/ArticleList.tsx
@@ -52,7 +52,7 @@ export default (props: Props) => {
   const [articles, setArticles] = useState(props.articles.filter(filter))
   const [activeIndex, setActiveIndex] = useState(0)
 
-  const isFetching = useInfiniteScroll(ref, fetchMoreArticles)
+  const isFetching = useInfiniteScroll(ref, hasMore, fetchMoreArticles)
   const isMobileDisplay = useMedia('(max-width: 767px)')
 
   useKeyNavigation(ref, styles.item, !isMobileDisplay)

diff --git a/ui/src/hooks/useInfiniteScroll.ts b/ui/src/hooks/useInfiniteScroll.ts
@@ -1,6 +1,6 @@
 import { RefObject, useCallback, useEffect, useState } from 'react'
 
-export default (ref: RefObject<HTMLElement>, fetchMoreItems: () => Promise<void>): boolean => {
+export default (ref: RefObject<HTMLElement>, hasMore: boolean, fetchMoreItems: () => Promise<void>): boolean => {
   const [isFetching, setIsFetching] = useState(false)
 
   useEffect(() => {
@@ -20,7 +20,7 @@ export default (ref: RefObject<HTMLElement>, fetchMoreItems: () => Promise<void>
   }, [isFetching, ref])
 
   useEffect(() => {
-    if (!ref.current) {
+    if (!ref.current || !hasMore) {
       return
     }
     const $container = ref.current.parentElement
@@ -32,7 +32,7 @@ export default (ref: RefObject<HTMLElement>, fetchMoreItems: () => Promise<void>
         $container.removeEventListener('resize', handleScroll)
       }
     }
-  }, [ref])
+  }, [ref, hasMore])
 
   return isFetching
 }