Pull request: client: fix constant loading for blocked requests

Updates #4420

Squashed commit of the following:

commit 461a59e1541626020bf0bcfaf34ba7d2f4509dc7
Merge: 5c5e7b5d 2a1ad532
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Mon Apr 25 18:46:02 2022 +0300

    Merge branch 'master' into 4420-loading-log

commit 5c5e7b5d1a69d30e40e71f49f46dea89fa8c40a2
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Apr 24 22:18:22 2022 +0300

    client: fix constant loading for blocked requests
This commit is contained in:
Ildar Kamalov 2022-04-25 19:10:52 +03:00
parent 2a1ad532f4
commit 0a1ff65b4a
2 changed files with 21 additions and 12 deletions

View File

@ -43,7 +43,7 @@ const InfiniteTable = ({
useEffect(() => { useEffect(() => {
listener(); listener();
}, [items.length < QUERY_LOGS_PAGE_LIMIT]); }, [items.length < QUERY_LOGS_PAGE_LIMIT, isEntireLog]);
useEffect(() => { useEffect(() => {
const THROTTLE_TIME = 100; const THROTTLE_TIME = 100;
@ -66,15 +66,24 @@ const InfiniteTable = ({
const isNothingFound = items.length === 0 && !processingGetLogs; const isNothingFound = items.length === 0 && !processingGetLogs;
return <div className='logs__table' role='grid'> return (
<div className="logs__table" role="grid">
{loading && <Loading />} {loading && <Loading />}
<Header /> <Header />
{isNothingFound {isNothingFound ? (
? <label className="logs__no-data">{t('nothing_found')}</label> <label className="logs__no-data">{t('nothing_found')}</label>
: <>{items.map(renderRow)} ) : (
{!isEntireLog && <div ref={loader} className="logs__loading text-center">{t('loading_table_status')}</div>} <>
</>} {items.map(renderRow)}
</div>; {!isEntireLog && (
<div ref={loader} className="logs__loading text-center">
{t('loading_table_status')}
</div>
)}
</>
)}
</div>
);
}; };
InfiniteTable.propTypes = { InfiniteTable.propTypes = {

View File

@ -693,8 +693,8 @@ export const replaceZeroWithEmptyString = (value) => (parseInt(value, 10) === 0
* @returns {string} * @returns {string}
*/ */
export const getLogsUrlParams = (search, response_status) => `?${queryString.stringify({ export const getLogsUrlParams = (search, response_status) => `?${queryString.stringify({
search, search: search || undefined,
response_status, response_status: response_status || undefined,
})}`; })}`;
export const processContent = ( export const processContent = (