From cbb09e1b5d52e11966758e09b5aa239aabe41964 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 24 Feb 2023 01:27:46 +0800
Subject: [PATCH] Bring back intersection observer for 'show more'

Sometimes the scroll thing doesn't really work
---
 src/components/timeline.jsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index e0c4ccbc..3098e72e 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { InView } from 'react-intersection-observer';
 import { useDebouncedCallback } from 'use-debounce';
 
 import useInterval from '../utils/useInterval';
@@ -376,14 +377,22 @@ function Timeline({
             </ul>
             {uiState === 'default' &&
               (showMore ? (
-                <button
-                  type="button"
-                  class="plain block"
-                  onClick={() => loadItems()}
-                  style={{ marginBlockEnd: '6em' }}
+                <InView
+                  onChange={(inView) => {
+                    if (inView) {
+                      loadItems();
+                    }
+                  }}
                 >
-                  Show more&hellip;
-                </button>
+                  <button
+                    type="button"
+                    class="plain block"
+                    onClick={() => loadItems()}
+                    style={{ marginBlockEnd: '6em' }}
+                  >
+                    Show more&hellip;
+                  </button>
+                </InView>
               ) : (
                 <p class="ui-state insignificant">The end.</p>
               ))}