From a2228283065cfe884576df484179a5c8c761e5d2 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 21 Oct 2023 17:54:10 +0800
Subject: [PATCH] Need InView for show more button in Notifications page

---
 src/pages/notifications.jsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 53a5d47f..a6cda934 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -2,6 +2,7 @@ import './notifications.css';
 
 import { memo } from 'preact/compat';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { InView } from 'react-intersection-observer';
 import { useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -454,15 +455,27 @@ function Notifications({ columnMode }) {
           </>
         )}
         {showMore && (
-          <button
-            type="button"
-            class="plain block"
-            disabled={uiState === 'loading'}
-            onClick={() => loadNotifications()}
-            style={{ marginBlockEnd: '6em' }}
+          <InView
+            onChange={(inView) => {
+              if (inView) {
+                loadNotifications();
+              }
+            }}
           >
-            {uiState === 'loading' ? <Loader abrupt /> : <>Show more&hellip;</>}
-          </button>
+            <button
+              type="button"
+              class="plain block"
+              disabled={uiState === 'loading'}
+              onClick={() => loadNotifications()}
+              style={{ marginBlockEnd: '6em' }}
+            >
+              {uiState === 'loading' ? (
+                <Loader abrupt />
+              ) : (
+                <>Show more&hellip;</>
+              )}
+            </button>
+          </InView>
         )}
       </div>
     </div>