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)"
+ >
+
+ {{ v.icon }}
+
+
+
+ {{ v.name }}
+
+ {{ $globals.icons.refreshCircle }}
+
+
+
@@ -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();
+}