fix: Update the random button flow (#6248)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeExplorerPage/RecipeExplorerPageParts/RecipeExplorerPageSearch.vue

@@ -53,10 +53,23 @@
                 :active="state.orderBy === v.value"
                 slim
                 density="comfortable"
-                :prepend-icon="v.icon"
+                @click="v.value === 'random' ? setRandomOrderByWrapper() : setOrderBy(v.value)"
-                :title="v.name"
+              >
-                @click="setOrderBy(v.value)"
+                <template #prepend>
-              />
+                  <v-icon>{{ v.icon }}</v-icon>
+                </template>
+
+                <template #title>
+                  <span>{{ v.name }}</span>
+                  <v-icon
+                    v-if="v.value === 'random' && showRandomLoading"
+                    size="small"
+                    class="ml-3"
+                  >
+                    {{ $globals.icons.refreshCircle }}
+                  </v-icon>
+                </template>
+              </v-list-item>
             </v-list>
           </v-card>
         </v-menu>
@@ -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<any> = ref(null);
 function hideKeyboard() {
   input.value?.blur();
 }
+
+// function to show refresh icon
+async function setRandomOrderByWrapper() {
+  if (!showRandomLoading.value) {
+    showRandomLoading.value = true;
+  }
+  await setRandomOrderBy();
+}
 </script>
 
 <style scoped>

frontend/composables/use-recipe-explorer-search.ts

@@ -30,6 +30,7 @@ interface RecipeExplorerSearchState {
     requireAllTags: boolean;
     requireAllTools: boolean;
     requireAllFoods: boolean;
+    randomSeed: number;
   }>;
   selectedCategories: Ref<NoUndefinedField<RecipeCategory>[]>;
   selectedFoods: Ref<IngredientFood[]>;
@@ -41,6 +42,7 @@ interface RecipeExplorerSearchState {
   reset: () => void;
   toggleOrderDirection: () => void;
   setOrderBy: (value: string) => void;
+  setRandomOrderBy: () => void;
   filterItems: (item: RecipeCategory | RecipeTag | RecipeTool, urlPrefix: string) => void;
   initialize: () => Promise<void>;
 }
@@ -67,6 +69,7 @@ function createRecipeExplorerSearchState(groupSlug: ComputedRef<string>): Recipe
     requireAllTags: false,
     requireAllTools: false,
     requireAllFoods: false,
+    randomSeed: 0,
   });
 
   // Store references
@@ -131,9 +134,16 @@ function createRecipeExplorerSearchState(groupSlug: ComputedRef<string>): Recipe
     return {
       ...passedQuery.value,
       _searchSeed: Date.now().toString(),
+      _randomSeed: state.value.randomSeed,
     };
   });
 
+  // Update the seed to trigger a new search
+  function setRandomOrderBy() {
+    state.value.orderBy = "random";
+    state.value.randomSeed = Date.now();
+  }
+
   // Wait utility for async hydration
   function waitUntilAndExecute(
     condition: () => boolean,
@@ -442,6 +452,7 @@ function createRecipeExplorerSearchState(groupSlug: ComputedRef<string>): Recipe
     reset,
     toggleOrderDirection,
     setOrderBy,
+    setRandomOrderBy,
     filterItems,
     initialize,
   };