diff --git a/client/src/components/Logs/Table.js b/client/src/components/Logs/Table.js index 8e8e075e8e7..9511c3aac0f 100644 --- a/client/src/components/Logs/Table.js +++ b/client/src/components/Logs/Table.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { useTranslation, Trans } from 'react-i18next'; import ReactTable from 'react-table'; @@ -12,7 +12,7 @@ import { FILTERED_STATUS_TO_META_MAP, TABLE_DEFAULT_PAGE_SIZE, TRANSITION_TIMEOUT, - SCHEME_TO_PROTOCOL_MAP, + SCHEME_TO_PROTOCOL_MAP, TABLE_CHUNK_RENDER_INTERVAL, } from '../../helpers/constants'; import getDateCell from './Cells/getDateCell'; import getDomainCell from './Cells/getDomainCell'; @@ -196,19 +196,32 @@ const Table = (props) => { } }; + const [tableSize, setTableSize] = useState(TABLE_DEFAULT_PAGE_SIZE / 4); + const changePage = (page) => { - setIsLoading(true); setLogsPage(page); setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE, }); + setTableSize(TABLE_DEFAULT_PAGE_SIZE / 4); }; const tableClass = classNames('logs__table', { 'logs__table--detailed': isDetailed, }); + useEffect(() => { + const intervalId = setInterval(() => setTableSize((tableSize) => { + if (tableSize < TABLE_DEFAULT_PAGE_SIZE) { + return tableSize + TABLE_DEFAULT_PAGE_SIZE / 4; + } + return TABLE_DEFAULT_PAGE_SIZE; + }), TABLE_CHUNK_RENDER_INTERVAL); + + return () => clearInterval(intervalId); + }, [TABLE_DEFAULT_PAGE_SIZE]); + return ( { filterable={false} sortable={false} resizable={false} - data={logs || []} + data={logs.slice(0, tableSize) || []} loading={isLoading} showPageJump={false} showPageSizeOptions={false} diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index 342fcd26d0a..fb701ef3b58 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -338,6 +338,8 @@ export const TABLE_FIRST_PAGE = 0; export const LEASES_TABLE_DEFAULT_PAGE_SIZE = 20; +export const TABLE_CHUNK_RENDER_INTERVAL = 250; + export const FILTERED_STATUS = { FILTERED_BLACK_LIST: 'FilteredBlackList', NOT_FILTERED_WHITE_LIST: 'NotFilteredWhiteList',