u
This commit is contained in:
@@ -45,7 +45,7 @@ import authAutomat from './authAutomat';
|
||||
*/
|
||||
|
||||
export const CHUNK_SIZE = 50;
|
||||
const PREFETCH_CHUNKS = 2;
|
||||
const PREFETCH_CHUNKS = 1;
|
||||
const CHUNK_DEBOUNCE_MS = 130;
|
||||
|
||||
const initialState = {
|
||||
@@ -87,7 +87,7 @@ function clearChunkDebounce() {
|
||||
}
|
||||
|
||||
// Executes chunk loading for the standstill target and prefetches lookahead chunks
|
||||
function _executeRequiredChunks(chunks, targetEpoch) {
|
||||
function _executeRequiredChunks(chunks, targetEpoch, prefetch = true) {
|
||||
if (targetEpoch !== queryEpoch) {
|
||||
return Promise.resolve(automat.state.items);
|
||||
}
|
||||
@@ -102,17 +102,21 @@ function _executeRequiredChunks(chunks, targetEpoch) {
|
||||
promises.push(actions.loadChunk(c, targetEpoch));
|
||||
}
|
||||
|
||||
// Prefetch lookahead chunks after the highest requested chunk
|
||||
const maxChunk = chunkList[chunkList.length - 1];
|
||||
const total = automat.state.total || 0;
|
||||
for (let c = maxChunk + 1; c <= maxChunk + PREFETCH_CHUNKS; c++) {
|
||||
if (total > 0 && c * CHUNK_SIZE >= total) {
|
||||
break;
|
||||
// Once active chunks finish loading, prefetch the next lookahead chunk in the background
|
||||
return Promise.all(promises).then(() => {
|
||||
if (targetEpoch !== queryEpoch) return automat.state.items;
|
||||
if (prefetch) {
|
||||
const maxChunk = chunkList[chunkList.length - 1];
|
||||
const total = automat.state.total || 0;
|
||||
for (let c = maxChunk + 1; c <= maxChunk + PREFETCH_CHUNKS; c++) {
|
||||
if (total > 0 && c * CHUNK_SIZE >= total) {
|
||||
break;
|
||||
}
|
||||
void actions.loadChunk(c, targetEpoch);
|
||||
}
|
||||
}
|
||||
void actions.loadChunk(c, targetEpoch);
|
||||
}
|
||||
|
||||
return Promise.all(promises).then(() => automat.state.items);
|
||||
return automat.state.items;
|
||||
});
|
||||
}
|
||||
|
||||
// MARK: pure order helpers
|
||||
@@ -214,10 +218,10 @@ function applyFilterReload() {
|
||||
}
|
||||
|
||||
const actions = {
|
||||
// MARK: returns current items and triggers chunk 0 if not loaded
|
||||
// MARK: returns current items and triggers chunk 0 if not loaded (no prefetch on entry)
|
||||
getItems() {
|
||||
if (automat.state.items === null) {
|
||||
void actions.requireChunk(0, 0, { immediate: true });
|
||||
void actions.requireChunk(0, 0, { prefetch: false, immediate: true });
|
||||
return null;
|
||||
}
|
||||
return automat.state.items;
|
||||
@@ -250,13 +254,14 @@ const actions = {
|
||||
|
||||
start = Math.max(0, Math.floor(start));
|
||||
end = Math.max(start, Math.floor(end));
|
||||
const prefetch = options.prefetch !== false;
|
||||
|
||||
// If initial items are null or immediate requested, bypass debounce and load immediately
|
||||
if (options.immediate || automat.state.items === null) {
|
||||
clearChunkDebounce();
|
||||
const chunks = new Set();
|
||||
for (let c = start; c <= end; c++) chunks.add(c);
|
||||
return _executeRequiredChunks(chunks, queryEpoch);
|
||||
return _executeRequiredChunks(chunks, queryEpoch, prefetch);
|
||||
}
|
||||
|
||||
// New event tick (drag mousemove / pagination click) replaces previous target position
|
||||
@@ -302,7 +307,7 @@ const actions = {
|
||||
pendingChunkResolve = null;
|
||||
pendingChunkReject = null;
|
||||
|
||||
_executeRequiredChunks(chunksToLoad, captureEpoch)
|
||||
_executeRequiredChunks(chunksToLoad, captureEpoch, true)
|
||||
.then((res) => resolve?.(res))
|
||||
.catch((err) => reject?.(err));
|
||||
}, CHUNK_DEBOUNCE_MS);
|
||||
@@ -363,15 +368,6 @@ const actions = {
|
||||
error: null,
|
||||
});
|
||||
|
||||
// Trigger lookahead prefetching if first chunk just arrived
|
||||
if (index === 0) {
|
||||
for (let c = 1; c <= PREFETCH_CHUNKS; c++) {
|
||||
if (c * CHUNK_SIZE < currentTotal) {
|
||||
void actions.loadChunk(c, targetEpoch);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
||||
@@ -548,17 +548,6 @@ export class OrderList extends PureComponent {
|
||||
render() {
|
||||
const { items, partiesById, busyId } = this.state;
|
||||
|
||||
if (items === null) {
|
||||
if (orderAutomat.state.status === 'failed') {
|
||||
return <BackendError error={backendErrorFrom(orderAutomat.state.error)} onRetry={this.handleRetry} />;
|
||||
}
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
rowContext.partiesById = partiesById;
|
||||
rowContext.busyId = busyId;
|
||||
rowContext.onOpen = this.handleOpen;
|
||||
@@ -566,18 +555,31 @@ export class OrderList extends PureComponent {
|
||||
rowContext.onTogglePaid = this.handleTogglePaid;
|
||||
rowContext.onToggleDelivered = this.handleToggleDelivered;
|
||||
|
||||
if (items === null && orderAutomat.state.status === 'failed') {
|
||||
return (
|
||||
<>
|
||||
<OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ p: 2 }}>
|
||||
<BackendError error={backendErrorFrom(orderAutomat.state.error)} onRetry={this.handleRetry} />
|
||||
</PanelTile>
|
||||
</PanelTileGrid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
|
||||
<PanelTileGrid>
|
||||
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0 }}>
|
||||
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0, position: 'relative' }}>
|
||||
<FillSpace
|
||||
aboveRef={[this.searchRef]}
|
||||
reserveBottom={32}
|
||||
minPageSize={8}
|
||||
minHeight={0}
|
||||
items={items}
|
||||
totalCount={items.length}
|
||||
items={items || []}
|
||||
totalCount={items ? items.length : 0}
|
||||
renderItem={OrderRow}
|
||||
virtualScrollbar
|
||||
header={
|
||||
@@ -611,6 +613,24 @@ export class OrderList extends PureComponent {
|
||||
}
|
||||
onPageChange={this.handlePageChange}
|
||||
/>
|
||||
{items === null && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 52,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 32,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={32} />
|
||||
</Box>
|
||||
)}
|
||||
</PanelTile>
|
||||
</PanelTileGrid>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user