Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-25 01:08:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

Need InView for show more button in Notifications page

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-21 17:54:10 +08:00
parent 5850485207
commit a222828306
1 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/pages/notifications.jsx
View file

@ -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>