doFetchModBlockedList: don't block ui thread

doFetchModBlockedList is blocking the ui thread.

Duplicate data in `doFetchModBlockedList::blockListsPerChannel` to about 1000. The tab is dead when function hits, about 4s after reload.

- Yield occasionally using the `setTimeout` method.
- Doing a chunk size of 1 for now so we don't have to yield the inner loop as well (seems good enough). This is just based on a relatively large blocklist size.

- Can't do `await` in a callback, so must change the `forEach` to a `for`.
This commit is contained in:
infinite-persistence 2022-08-11 13:33:24 +08:00 committed by zeppi
parent b9be8d9f3a
commit c1840bafb9

View file

@ -1143,6 +1143,9 @@ export function doCommentModUnBlockAsModerator(commenterUri: string, creatorUri:
export function doFetchModBlockedList() { export function doFetchModBlockedList() {
return async (dispatch: Dispatch, getState: GetState) => { return async (dispatch: Dispatch, getState: GetState) => {
const LOOP_CHUNK_SIZE = 1;
const yieldThread = () => new Promise((resolve) => setTimeout(resolve));
const state = getState(); const state = getState();
const myChannels = selectMyChannelClaims(state); const myChannels = selectMyChannelClaims(state);
if (!myChannels) { if (!myChannels) {
@ -1172,7 +1175,7 @@ export function doFetchModBlockedList() {
}) })
) )
) )
.then((res) => { .then(async (res) => {
let personalBlockList = []; let personalBlockList = [];
let adminBlockList = []; let adminBlockList = [];
let moderatorBlockList = []; let moderatorBlockList = [];
@ -1186,11 +1189,9 @@ export function doFetchModBlockedList() {
const moderatorTimeoutMap = {}; const moderatorTimeoutMap = {};
const blockListsPerChannel = res.map((r) => r.value); const blockListsPerChannel = res.map((r) => r.value);
blockListsPerChannel blockListsPerChannel.sort((a, b) => 1);
.sort((a, b) => {
return 1; for (let i = 0; i < blockListsPerChannel.length; ++i) {
})
.forEach((channelBlockLists) => {
const storeList = (fetchedList, blockedList, timeoutMap, blockedByMap) => { const storeList = (fetchedList, blockedList, timeoutMap, blockedByMap) => {
if (fetchedList) { if (fetchedList) {
fetchedList.forEach((blockedChannel) => { fetchedList.forEach((blockedChannel) => {
@ -1231,10 +1232,15 @@ export function doFetchModBlockedList() {
} }
}; };
const channelBlockLists = blockListsPerChannel[i];
const blocked_channels = channelBlockLists && channelBlockLists.blocked_channels; const blocked_channels = channelBlockLists && channelBlockLists.blocked_channels;
const globally_blocked_channels = channelBlockLists && channelBlockLists.globally_blocked_channels; const globally_blocked_channels = channelBlockLists && channelBlockLists.globally_blocked_channels;
const delegated_blocked_channels = channelBlockLists && channelBlockLists.delegated_blocked_channels; const delegated_blocked_channels = channelBlockLists && channelBlockLists.delegated_blocked_channels;
if (i > 0 && i % LOOP_CHUNK_SIZE === 0) {
await yieldThread();
}
storeList(blocked_channels, personalBlockList, personalTimeoutMap); storeList(blocked_channels, personalBlockList, personalTimeoutMap);
storeList(globally_blocked_channels, adminBlockList, adminTimeoutMap); storeList(globally_blocked_channels, adminBlockList, adminTimeoutMap);
storeList( storeList(
@ -1243,7 +1249,7 @@ export function doFetchModBlockedList() {
moderatorTimeoutMap, moderatorTimeoutMap,
moderatorBlockListDelegatorsMap moderatorBlockListDelegatorsMap
); );
}); }
dispatch({ dispatch({
type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED, type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED,