Posts page improvement

src/pages/blog.js

@@ -35,7 +35,6 @@ const Blog = ({ data, location }) => {
   useEffect(() => setEnd(!(limit < posts.length)), [isLoading, isEnd])
 
   function loadMore () {
-    console.log('Load more...')
     if (limit >= posts.length) {
       setEnd(true)
       return
@@ -46,11 +45,14 @@ const Blog = ({ data, location }) => {
     }, 500) // Delay stop loading in 0.5 second
   }
 
+  const postCount = ` (${posts.length})`
+  const subtitle = queryWithType ? queryWithType + postCount : postCount
+
   return (
     <>
       <SEO title={title} />
       <header>
-        <Navbar title={title} subtitle={queryWithType}>
+        <Navbar title={title} subtitle={subtitle}>
           <Category categories={categories} type='blog' />
         </Navbar>
       </header>

src/pages/gallery.js

@@ -35,22 +35,24 @@ const Gallery = ({ data, location }) => {
   useEffect(() => setEnd(!(limit < posts.length)), [isLoading, isEnd])
 
   function loadMore () {
-    console.log('Load more...')
     if (limit >= posts.length) {
       setEnd(true)
       return
     }
     setTimeout(() => {
       setLimit(prev => prev + postLimit)
       setLoading(false)
-    }, 500) // Delay stop loading in 0.5 second
+    }, 300) // Delay stop loading in 0.5 second
   }
 
+  const postCount = ` (${posts.length})`
+  const subtitle = queryWithType ? queryWithType + postCount : postCount
+
   return (
     <>
       <SEO title={title} />
       <header>
-        <Navbar title={title} subtitle={queryWithType}>
+        <Navbar title={title} subtitle={subtitle}>
           <Category categories={categories} type='gallery' />
         </Navbar>
       </header>

src/shared/infinite-scroll.js

@@ -5,8 +5,9 @@ export default function infiniteScroll (callback) {
   const [isEnd, setEnd] = useState(false)
 
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll)
-    return () => window.removeEventListener('scroll', handleScroll)
+    const delay = 250
+    window.addEventListener('scroll', throttle(handleScroll, delay))
+    return () => window.removeEventListener('scroll', throttle(handleScroll, delay))
   }, [])
 
   useEffect(() => {
@@ -15,14 +16,22 @@ export default function infiniteScroll (callback) {
   }, [isLoading, isEnd])
 
   function handleScroll () {
+    const threshold = window.innerHeight / 2
     const heightTop = window.innerHeight + document.documentElement.scrollTop
-    const offsetHeight = document.documentElement.offsetHeight
-    if (heightTop !== offsetHeight || (isLoading || isEnd)) {
-      return
-    }
+    const offsetHeight = document.documentElement.offsetHeight - threshold
+    if (heightTop <= offsetHeight || (isLoading || isEnd)) return
     setEnd(false)
     setLoading(true)
   }
-
   return [isLoading, setLoading, isEnd, setEnd]
 }
+
+function throttle (func, wait) {
+  let time = Date.now()
+  return function () {
+    if ((time + wait - Date.now()) < 0) {
+      func()
+      time = Date.now()
+    }
+  }
+}