Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-20 12:19:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve booktable performance by 15-30%

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-03-28 10:37:14 -07:00
parent 399f8102f2
commit 5b1f64ced8
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
1 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/components/BookTable/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Box,
@ -68,16 +68,19 @@ const BookTable = ({
const [paymentMethods, setPaymentMethods] = useState<string[]>([]);
// all sizes in 'em'
const fontSize = theme.typography.fontSize;
const verticalHeightFrame = 3.25 + (showControls ? 3.7 : 0) + (showFooter ? 2.35 : 0);
const verticalHeightRow = 3.25;
const defaultPageSize = Math.max(
Math.floor(
((fullscreen ? fullHeight * 0.9 : maxHeight) - verticalHeightFrame) / verticalHeightRow,
),
1,
);
const height = defaultPageSize * verticalHeightRow + verticalHeightFrame;
const [fontSize, defaultPageSize, height] = useMemo(() => {
const fontSize = theme.typography.fontSize;
const verticalHeightFrame = 3.25 + (showControls ? 3.7 : 0) + (showFooter ? 2.35 : 0);
const verticalHeightRow = 3.25;
const defaultPageSize = Math.max(
Math.floor(
((fullscreen ? fullHeight * 0.9 : maxHeight) - verticalHeightFrame) / verticalHeightRow,
),
1,
);
const height = defaultPageSize * verticalHeightRow + verticalHeightFrame;
return [fontSize, defaultPageSize, height];
}, [theme.typography.fontSize, maxHeight, fullscreen, fullHeight, showControls, showFooter]);
const [useDefaultPageSize, setUseDefaultPageSize] = useState(true);
useEffect(() => {
@ -624,7 +627,9 @@ const BookTable = ({
return [columns, width * 0.875 + 0.15];
};
const [columns, width] = filteredColumns(fullscreen ? fullWidth : maxWidth);
const [columns, width] = useMemo(() => {
return filteredColumns(fullscreen ? fullWidth : maxWidth);
}, [maxWidth, fullscreen, fullWidth]);
const Footer = function () {
return (
@ -690,7 +695,7 @@ const BookTable = ({
);
};
const gridComponents = function () {
const gridComponents = useMemo(() => {
const components: GridComponentProps = {
LoadingOverlay: LinearProgress,
};
@ -706,7 +711,17 @@ const BookTable = ({
components.Toolbar = BookControl;
}
return components;
};
}, [showNoResults, showFooter, showControls, fullscreen]);
const filteredOrders = useMemo(() => {
return showControls
? filterOrders({
orders,
baseFilter: fav,
paymentMethods,
})
: orders;
}, [showControls, orders, fav, paymentMethods]);
if (!fullscreen) {
return (
@ -722,19 +737,11 @@ const BookTable = ({
localeText={localeText}
rowHeight={3.714 * theme.typography.fontSize}
headerHeight={3.25 * theme.typography.fontSize}
rows={
showControls
? filterOrders({
orders,
baseFilter: fav,
paymentMethods,
})
: orders
}
rows={filteredOrders}
loading={book.loading}
columns={columns}
hideFooter={!showFooter}
components={gridComponents()}
components={gridComponents}
componentsProps={{
toolbar: {
width,
@ -762,19 +769,11 @@ const BookTable = ({
localeText={localeText}
rowHeight={3.714 * theme.typography.fontSize}
headerHeight={3.25 * theme.typography.fontSize}
rows={
showControls
? filterOrders({
orders,
baseFilter: fav,
paymentMethods,
})
: orders
}
rows={filteredOrders}
loading={book.loading}
columns={columns}
hideFooter={!showFooter}
components={gridComponents()}
components={gridComponents}
componentsProps={{
toolbar: {
width,