diff --git a/frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPageParts/RecipeExplorerPageSearch.vue b/frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPageParts/RecipeExplorerPageSearch.vue index a90d78032..cb2951402 100644 --- a/frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPageParts/RecipeExplorerPageSearch.vue +++ b/frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPageParts/RecipeExplorerPageSearch.vue @@ -53,10 +53,23 @@ :active="state.orderBy === v.value" slim density="comfortable" - :prepend-icon="v.icon" - :title="v.name" - @click="setOrderBy(v.value)" - /> + @click="v.value === 'random' ? setRandomOrderByWrapper() : setOrderBy(v.value)" + > + + + + @@ -131,6 +144,7 @@ const $auth = useMealieAuth(); const route = useRoute(); const { $globals } = useNuxtApp(); const i18n = useI18n(); +const showRandomLoading = ref(false); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || ""); @@ -141,6 +155,7 @@ const { reset, toggleOrderDirection, setOrderBy, + setRandomOrderBy, filterItems, initialize, } = useRecipeExplorerSearch(groupSlug); @@ -205,6 +220,14 @@ const input: Ref = ref(null); function hideKeyboard() { input.value?.blur(); } + +// function to show refresh icon +async function setRandomOrderByWrapper() { + if (!showRandomLoading.value) { + showRandomLoading.value = true; + } + await setRandomOrderBy(); +}