fix: Only call store APIs once (#3306)

* move loading value to inside async function

* share loading state and use it for throttling

frontend/composables/partials/use-actions-factory.ts

@@ -37,6 +37,7 @@ export function usePublicStoreActions<T extends BoundT>(
     loading.value = true;
     const allItems = useAsync(async () => {
       const { data } = await api.getAll(page, perPage, params);
+      loading.value = false;
 
       if (data && allRef) {
         allRef.value = data.items;
@@ -49,7 +50,6 @@ export function usePublicStoreActions<T extends BoundT>(
       }
     }, useAsyncKey());
 
-    loading.value = false;
     return allItems;
   }
 
@@ -88,6 +88,7 @@ export function useStoreActions<T extends BoundT>(
     loading.value = true;
     const allItems = useAsync(async () => {
       const { data } = await api.getAll(page, perPage, params);
+      loading.value = false;
 
       if (data && allRef) {
         allRef.value = data.items;
@@ -100,7 +101,6 @@ export function useStoreActions<T extends BoundT>(
       }
     }, useAsyncKey());
 
-    loading.value = false;
     return allItems;
   }
 

frontend/composables/store/use-category-store.ts

@@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
 import { RecipeCategory } from "~/lib/api/types/admin";
 
 const categoryStore: Ref<RecipeCategory[]> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 export function useCategoryData() {
   const data = reactive({
@@ -27,7 +29,7 @@ export function useCategoryData() {
 
 export function usePublicCategoryStore(groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
@@ -36,7 +38,7 @@ export function usePublicCategoryStore(groupSlug: string) {
     },
   };
 
-  if (!categoryStore.value || categoryStore.value?.length === 0) {
+  if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) {
     actions.getAll();
   }
 
@@ -50,7 +52,7 @@ export function usePublicCategoryStore(groupSlug: string) {
 export function useCategoryStore() {
   // passing the group slug switches to using the public API
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
@@ -59,7 +61,7 @@ export function useCategoryStore() {
     },
   };
 
-  if (!categoryStore.value || categoryStore.value?.length === 0) {
+  if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) {
     actions.getAll();
   }
 

frontend/composables/store/use-food-store.ts

@@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
 import { IngredientFood } from "~/lib/api/types/recipe";
 
 let foodStore: Ref<IngredientFood[] | null> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 /**
  * useFoodData returns a template reactive object
@@ -34,7 +36,7 @@ export const useFoodData = function () {
 
 export const usePublicFoodStore = function (groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions(api.foods, foodStore, loading),
@@ -43,7 +45,7 @@ export const usePublicFoodStore = function (groupSlug: string) {
     },
   };
 
-  if (!foodStore.value || foodStore.value.length === 0) {
+  if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) {
     foodStore = actions.getAll();
   }
 
@@ -52,7 +54,7 @@ export const usePublicFoodStore = function (groupSlug: string) {
 
 export const useFoodStore = function () {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions(api.foods, foodStore, loading),
@@ -61,7 +63,7 @@ export const useFoodStore = function () {
     },
   };
 
-  if (!foodStore.value || foodStore.value.length === 0) {
+  if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) {
     foodStore = actions.getAll();
   }
 

frontend/composables/store/use-label-store.ts

@@ -4,6 +4,7 @@ import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 import { useUserApi } from "~/composables/api";
 
 let labelStore: Ref<MultiPurposeLabelOut[] | null> = ref([]);
+const storeLoading = ref(false);
 
 export function useLabelData() {
   const data = reactive({
@@ -28,7 +29,7 @@ export function useLabelData() {
 
 export function useLabelStore() {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<MultiPurposeLabelOut>(api.multiPurposeLabels, labelStore, loading),
@@ -37,7 +38,7 @@ export function useLabelStore() {
     },
   };
 
-  if (!labelStore.value || labelStore.value?.length === 0) {
+  if (!loading.value && (!labelStore.value || labelStore.value?.length === 0)) {
     labelStore = actions.getAll();
   }
 

frontend/composables/store/use-tag-store.ts

@@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
 import { RecipeTag } from "~/lib/api/types/admin";
 
 const items: Ref<RecipeTag[]> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 export function useTagData() {
   const data = reactive({
@@ -27,7 +29,7 @@ export function useTagData() {
 
 export function usePublicTagStore(groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions<RecipeTag>(api.tags, items, loading),
@@ -36,7 +38,7 @@ export function usePublicTagStore(groupSlug: string) {
     },
   };
 
-  if (!items.value || items.value?.length === 0) {
+  if (!loading.value && (!items.value || items.value?.length === 0)) {
     actions.getAll();
   }
 
@@ -49,7 +51,7 @@ export function usePublicTagStore(groupSlug: string) {
 
 export function useTagStore() {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<RecipeTag>(api.tags, items, loading),
@@ -58,7 +60,7 @@ export function useTagStore() {
     },
   };
 
-  if (!items.value || items.value?.length === 0) {
+  if (!loading.value && (!items.value || items.value?.length === 0)) {
     actions.getAll();
   }
 

frontend/composables/store/use-tool-store.ts

@@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
 import { RecipeTool } from "~/lib/api/types/recipe";
 
 const toolStore: Ref<RecipeTool[]> = ref([]);
+const publicStoreLoading = ref(false);
+const storeLoading = ref(false);
 
 export function useToolData() {
   const data = reactive({
@@ -29,7 +31,7 @@ export function useToolData() {
 
 export function usePublicToolStore(groupSlug: string) {
   const api = usePublicExploreApi(groupSlug).explore;
-  const loading = ref(false);
+  const loading = publicStoreLoading;
 
   const actions = {
     ...usePublicStoreActions<RecipeTool>(api.tools, toolStore, loading),
@@ -38,7 +40,7 @@ export function usePublicToolStore(groupSlug: string) {
     },
   };
 
-  if (!toolStore.value || toolStore.value?.length === 0) {
+  if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) {
     actions.getAll();
   }
 
@@ -51,7 +53,7 @@ export function usePublicToolStore(groupSlug: string) {
 
 export function useToolStore() {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<RecipeTool>(api.tools, toolStore, loading),
@@ -60,7 +62,7 @@ export function useToolStore() {
     },
   };
 
-  if (!toolStore.value || toolStore.value?.length === 0) {
+  if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) {
     actions.getAll();
   }
 

frontend/composables/store/use-unit-store.ts

@@ -4,6 +4,7 @@ import { useUserApi } from "~/composables/api";
 import { IngredientUnit } from "~/lib/api/types/recipe";
 
 let unitStore: Ref<IngredientUnit[] | null> = ref([]);
+const storeLoading = ref(false);
 
 /**
  * useUnitData returns a template reactive object
@@ -35,7 +36,7 @@ export const useUnitData = function () {
 
 export const useUnitStore = function () {
   const api = useUserApi();
-  const loading = ref(false);
+  const loading = storeLoading;
 
   const actions = {
     ...useStoreActions<IngredientUnit>(api.units, unitStore, loading),
@@ -44,7 +45,7 @@ export const useUnitStore = function () {
     },
   };
 
-  if (!unitStore.value || unitStore.value.length === 0) {
+  if (!loading.value && (!unitStore.value || unitStore.value.length === 0)) {
     unitStore = actions.getAll();
   }