fix: shopping list frontend throttling on bulk actions (#1853)

* pause refresh when updating list

* throttle recipe +/- to one concurrent request
This commit is contained in:
Michael Genson 2022-11-30 23:29:27 -06:00 committed by GitHub
parent 1c87a87627
commit b7ab16a7df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -215,6 +215,7 @@ export default defineComponent({
},
setup() {
const { idle } = useIdle(5 * 60 * 1000) // 5 minutes
const loading = ref(true);
const userApi = useUserApi();
const edit = ref(false);
@ -241,8 +242,8 @@ export default defineComponent({
// constantly polls for changes
async function pollForChanges() {
// pause polling if the user isn't active
if (idle.value) {
// pause polling if the user isn't active or we're busy
if (idle.value || loading.value) {
return;
}
@ -269,6 +270,7 @@ export default defineComponent({
}
// start polling
loading.value = false;
const pollFrequency = 5000;
let attempts = 0;
@ -338,9 +340,11 @@ export default defineComponent({
return;
}
loading.value = true;
deleteListItems(checked);
refresh();
loading.value = false;
}
// =====================================
@ -454,27 +458,33 @@ export default defineComponent({
});
async function addRecipeReferenceToList(recipeId: string) {
if (!shoppingList.value) {
if (!shoppingList.value || loading.value) {
return;
}
loading.value = true;
const { data } = await userApi.shopping.lists.addRecipe(shoppingList.value.id, recipeId);
if (data) {
refresh();
}
loading.value = false;
}
async function removeRecipeReferenceToList(recipeId: string) {
if (!shoppingList.value) {
if (!shoppingList.value || loading.value) {
return;
}
loading.value = true;
const { data } = await userApi.shopping.lists.removeRecipe(shoppingList.value.id, recipeId);
if (data) {
refresh();
}
loading.value = false;
}
// =====================================
@ -490,6 +500,7 @@ export default defineComponent({
return;
}
loading.value = true;
if (item.checked && shoppingList.value.listItems) {
const lst = shoppingList.value.listItems.filter((itm) => itm.id !== item.id);
lst.push(item);
@ -501,6 +512,8 @@ export default defineComponent({
if (data) {
refresh();
}
loading.value = false;
}
async function deleteListItem(item: ShoppingListItemOut) {
@ -508,11 +521,14 @@ export default defineComponent({
return;
}
loading.value = true;
const { data } = await userApi.shopping.items.deleteOne(item.id);
if (data) {
refresh();
}
loading.value = false;
}
// =====================================
@ -540,6 +556,7 @@ export default defineComponent({
return;
}
loading.value = true;
const { data } = await userApi.shopping.items.createOne(createListItemData.value);
if (data) {
@ -547,6 +564,8 @@ export default defineComponent({
createEditorOpen.value = false;
refresh();
}
loading.value = false;
}
function updateIndex(data: ShoppingListItemOut[]) {
@ -562,11 +581,14 @@ export default defineComponent({
return;
}
loading.value = true;
const { data } = await userApi.shopping.items.deleteMany(items);
if (data) {
refresh();
}
loading.value = false;
}
async function updateListItems() {
@ -580,11 +602,14 @@ export default defineComponent({
return itm;
});
loading.value = true;
const { data } = await userApi.shopping.items.updateMany(shoppingList.value.listItems);
if (data) {
refresh();
}
loading.value = false;
}
return {