From 56a3e9924e1934518fafe8819327243bc901221f Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 27 Feb 2024 13:29:55 +0300
Subject: [PATCH 1/9] Use `VMediaCollection` for all search results

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/VLoadMore.vue         |  89 ++++++-----
 frontend/src/components/VLoadMoreOld.vue      | 147 ++++++++++++++++++
 .../VSearchResultsGrid/VAllResultsGrid.vue    | 121 +++-----------
 .../VSearchResultsGrid/VAudioList.vue         |   6 +-
 .../VSearchResultsGrid/VCollectionResults.vue |  71 +++++++++
 .../VSearchResultsGrid/VImageGrid.vue         |   6 +-
 .../VSearchResultsGrid/VMediaCollection.vue   |  19 ++-
 .../VSearchResultsGrid/VSearchResults.vue     | 112 +++++++++++++
 frontend/src/middleware/search.ts             |   2 +-
 frontend/src/pages/search.vue                 |  81 +++++-----
 frontend/src/pages/search/audio.vue           |  40 ++---
 frontend/src/pages/search/image.vue           |  25 ++-
 frontend/src/pages/search/index.vue           |  29 +++-
 frontend/src/stores/media/index.ts            |  18 ++-
 frontend/src/stores/search.ts                 |   5 +
 .../specs/components/v-image-grid.spec.js     |  37 -----
 .../test/unit/specs/pages/browse-page.spec.js |  63 --------
 17 files changed, 529 insertions(+), 342 deletions(-)
 create mode 100644 frontend/src/components/VLoadMoreOld.vue
 create mode 100644 frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
 create mode 100644 frontend/src/components/VSearchResultsGrid/VSearchResults.vue
 delete mode 100644 frontend/test/unit/specs/components/v-image-grid.spec.js
 delete mode 100644 frontend/test/unit/specs/pages/browse-page.spec.js

diff --git a/frontend/src/components/VLoadMore.vue b/frontend/src/components/VLoadMore.vue
index 2d17512136..a6e0c9bbc5 100644
--- a/frontend/src/components/VLoadMore.vue
+++ b/frontend/src/components/VLoadMore.vue
@@ -5,7 +5,7 @@
       class="label-bold lg:description-bold h-16 w-full lg:h-18"
       variant="filled-gray"
       size="disabled"
-      :disabled="fetchState.isFetching"
+      :disabled="isFetching"
       data-testid="load-more"
       @click="onLoadMore"
     >
@@ -14,7 +14,14 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from "vue"
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  type PropType,
+  ref,
+  watch,
+} from "vue"
 import { storeToRefs } from "pinia"
 import { useElementVisibility } from "@vueuse/core"
 
@@ -24,6 +31,10 @@ import { useAnalytics } from "~/composables/use-analytics"
 import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
 import { useI18n } from "~/composables/use-i18n"
+import { defineEvent } from "~/types/emits"
+
+import type { ResultKind } from "~/types/result"
+import type { SupportedSearchType } from "~/constants/media"
 
 import VButton from "~/components/VButton.vue"
 
@@ -32,7 +43,28 @@ export default defineComponent({
   components: {
     VButton,
   },
-  setup() {
+  props: {
+    searchType: {
+      type: String as PropType<SupportedSearchType>,
+      required: true,
+    },
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+    kind: {
+      type: String as PropType<ResultKind>,
+      required: true,
+    },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: {
+    "load-more": defineEvent(),
+  },
+  setup(props, { emit }) {
     const loadMoreSectionRef = ref(null)
     const route = useRoute()
     const i18n = useI18n()
@@ -40,16 +72,14 @@ export default defineComponent({
     const searchStore = useSearchStore()
     const { sendCustomEvent } = useAnalytics()
 
-    // Use the `_searchType` from mediaStore because it falls back to ALL_MEDIA
-    // for unsupported search types.
-    const { fetchState, resultCount, currentPage, _searchType } =
-      storeToRefs(mediaStore)
-    const { searchTerm } = storeToRefs(searchStore)
+    const { currentPage } = storeToRefs(mediaStore)
 
-    const searchStarted = computed(() => {
-      return searchStore.strategy === "default"
-        ? searchTerm.value !== ""
-        : searchStore.collectionParams !== null
+    const eventPayload = computed(() => {
+      return {
+        searchType: props.searchType,
+        query: props.searchTerm,
+        resultPage: currentPage.value || 1,
+      }
     })
 
     /**
@@ -58,38 +88,28 @@ export default defineComponent({
      * there has been no fetching error, and there are more results to fetch,
      * we show the button.
      */
-    const canLoadMore = computed(() => {
-      return Boolean(
-        searchStarted.value &&
-          !fetchState.value.fetchingError &&
-          !fetchState.value.isFinished &&
-          resultCount.value > 0
-      )
-    })
+    const canLoadMore = computed(
+      () => mediaStore.canLoadMore && searchStore.searchStarted
+    )
 
     const reachResultEndEventSent = ref(false)
     /**
-     * On button click, fetch media, persisting the existing results.
+     * On button click, send the analytics events and emit `load-more` event.
+     *
      * The button is disabled when we are fetching, but we still check
      * whether we are currently fetching to be sure we don't fetch multiple times.
      *
      */
     const onLoadMore = async () => {
-      if (fetchState.value.isFetching) {
+      if (props.isFetching) {
         return
       }
 
       reachResultEndEventSent.value = false
 
-      sendCustomEvent("LOAD_MORE_RESULTS", {
-        query: searchStore.searchTerm,
-        searchType: searchStore.searchType,
-        resultPage: currentPage.value || 1,
-      })
+      sendCustomEvent("LOAD_MORE_RESULTS", eventPayload.value)
 
-      await mediaStore.fetchMedia({
-        shouldPersistMedia: true,
-      })
+      emit("load-more")
     }
 
     const sendReachResultEnd = () => {
@@ -97,15 +117,11 @@ export default defineComponent({
       // currentPage is updated from 0, so we use the value or 1.
       // The currentPage can never be 0 here because then the loadMore
       // button would not be visible.
-      sendCustomEvent("REACH_RESULT_END", {
-        searchType: _searchType.value,
-        query: searchTerm.value,
-        resultPage: currentPage.value || 1,
-      })
+      sendCustomEvent("REACH_RESULT_END", eventPayload.value)
     }
 
     const buttonLabel = computed(() =>
-      fetchState.value.isFetching
+      props.isFetching
         ? i18n.t("browsePage.loading")
         : i18n.t("browsePage.load")
     )
@@ -136,7 +152,6 @@ export default defineComponent({
 
     return {
       buttonLabel,
-      fetchState,
       onLoadMore,
       canLoadMore,
 
diff --git a/frontend/src/components/VLoadMoreOld.vue b/frontend/src/components/VLoadMoreOld.vue
new file mode 100644
index 0000000000..0db17d06ee
--- /dev/null
+++ b/frontend/src/components/VLoadMoreOld.vue
@@ -0,0 +1,147 @@
+<template>
+  <div ref="loadMoreSectionRef" class="w-full">
+    <VButton
+      v-show="canLoadMore"
+      class="label-bold lg:description-bold h-16 w-full lg:h-18"
+      variant="filled-gray"
+      size="disabled"
+      :disabled="fetchState.isFetching"
+      data-testid="load-more"
+      @click="onLoadMore"
+    >
+      {{ buttonLabel }}
+    </VButton>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, watch } from "vue"
+import { storeToRefs } from "pinia"
+import { useElementVisibility } from "@vueuse/core"
+
+import { useRoute } from "@nuxtjs/composition-api"
+
+import { useAnalytics } from "~/composables/use-analytics"
+import { useMediaStore } from "~/stores/media"
+import { useSearchStore } from "~/stores/search"
+import { useI18n } from "~/composables/use-i18n"
+
+import VButton from "~/components/VButton.vue"
+
+export default defineComponent({
+  name: "VLoadMoreOld",
+  components: {
+    VButton,
+  },
+  setup() {
+    const loadMoreSectionRef = ref(null)
+    const route = useRoute()
+    const i18n = useI18n()
+    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
+    const { sendCustomEvent } = useAnalytics()
+
+    // Use the `_searchType` from mediaStore because it falls back to ALL_MEDIA
+    // for unsupported search types.
+    const { fetchState, resultCount, currentPage, _searchType } =
+      storeToRefs(mediaStore)
+    const { searchTerm } = storeToRefs(searchStore)
+
+    const searchStarted = computed(() => {
+      return searchStore.strategy === "default"
+        ? searchTerm.value !== ""
+        : searchStore.collectionParams !== null
+    })
+
+    /**
+     * Whether we should show the "Load more" button.
+     * If the user has entered a search term, there is at least 1 page of results,
+     * there has been no fetching error, and there are more results to fetch,
+     * we show the button.
+     */
+    const canLoadMore = computed(() => {
+      return Boolean(
+        searchStarted.value &&
+          !fetchState.value.fetchingError &&
+          !fetchState.value.isFinished &&
+          resultCount.value > 0
+      )
+    })
+
+    const reachResultEndEventSent = ref(false)
+    /**
+     * On button click, fetch media, persisting the existing results.
+     * The button is disabled when we are fetching, but we still check
+     * whether we are currently fetching to be sure we don't fetch multiple times.
+     *
+     */
+    const onLoadMore = async () => {
+      if (fetchState.value.isFetching) {
+        return
+      }
+
+      reachResultEndEventSent.value = false
+
+      sendCustomEvent("LOAD_MORE_RESULTS", {
+        query: searchStore.searchTerm,
+        searchType: searchStore.searchType,
+        resultPage: currentPage.value || 1,
+      })
+
+      await mediaStore.fetchMedia({
+        shouldPersistMedia: true,
+      })
+    }
+
+    const sendReachResultEnd = () => {
+      // This function can be called before the media is fetched and
+      // currentPage is updated from 0, so we use the value or 1.
+      // The currentPage can never be 0 here because then the loadMore
+      // button would not be visible.
+      sendCustomEvent("REACH_RESULT_END", {
+        searchType: _searchType.value,
+        query: searchTerm.value,
+        resultPage: currentPage.value || 1,
+      })
+    }
+
+    const buttonLabel = computed(() =>
+      fetchState.value.isFetching
+        ? i18n.t("browsePage.loading")
+        : i18n.t("browsePage.load")
+    )
+    const mainPageElement = ref<HTMLElement | null>(null)
+    onMounted(() => {
+      mainPageElement.value = document.getElementById("main-page")
+    })
+    const isLoadMoreButtonVisible = useElementVisibility(loadMoreSectionRef, {
+      scrollTarget: mainPageElement,
+    })
+
+    // Reset the reachResultEndEvent whenever the route changes,
+    // to make sure the result end is tracked properly whenever
+    // the search query or content type changes
+    watch(route, () => {
+      reachResultEndEventSent.value = false
+    })
+
+    watch(isLoadMoreButtonVisible, (isVisible) => {
+      if (isVisible) {
+        if (reachResultEndEventSent.value) {
+          return
+        }
+        sendReachResultEnd()
+        reachResultEndEventSent.value = true
+      }
+    })
+
+    return {
+      buttonLabel,
+      fetchState,
+      onLoadMore,
+      canLoadMore,
+
+      loadMoreSectionRef,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
index 23f0caf8e8..b4485f86f6 100644
--- a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
@@ -1,42 +1,16 @@
 <template>
   <div>
-    <div
-      v-if="!noResults"
-      class="results-grid mb-4 mt-2 grid grid-cols-2 gap-4 md:mt-0"
-    >
-      <VContentLink
-        v-for="[mediaType, count] in resultCounts"
-        :key="mediaType"
-        :media-type="mediaType"
-        :search-term="searchTerm"
-        :results-count="count"
-        :to="contentLinkPath(mediaType)"
-      />
-    </div>
-    <VSnackbar size="large" :is-visible="isSnackbarVisible">
-      <i18n path="allResults.snackbar.text" tag="p">
-        <template #spacebar>
-          <kbd class="font-sans">{{ $t(`allResults.snackbar.spacebar`) }}</kbd>
-        </template>
-      </i18n>
-    </VSnackbar>
-    <VGridSkeleton
-      v-if="resultsLoading && allMedia.length === 0"
-      is-for-tab="all"
-    />
+    <VAudioInstructions kind="all" />
     <ol
-      v-else
-      class="results-grid grid grid-cols-2 gap-4"
+      class="grid grid-cols-2 gap-4"
       :class="
         isSidebarVisible
           ? 'lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'
           : 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'
       "
-      :aria-label="
-        $t('browsePage.aria.results', { query: searchTerm }).toString()
-      "
+      :aria-label="collectionLabel"
     >
-      <template v-for="item in allMedia">
+      <template v-for="item in results">
         <VImageCell
           v-if="isDetail.image(item)"
           :key="item.id"
@@ -55,99 +29,50 @@
         />
       </template>
     </ol>
-
-    <VLoadMore class="mb-6 mt-4 lg:mb-10" />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue"
+import { computed, defineComponent, type PropType } from "vue"
 import { storeToRefs } from "pinia"
 
-import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
-import { isDetail } from "~/types/media"
-
-import { useI18n } from "~/composables/use-i18n"
-
-import type { SupportedMediaType } from "~/constants/media"
+import { type AudioDetail, type ImageDetail, isDetail } from "~/types/media"
 
-import VSnackbar from "~/components/VSnackbar.vue"
 import VImageCell from "~/components/VImageCell/VImageCell.vue"
 import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
-import VLoadMore from "~/components/VLoadMore.vue"
-import VContentLink from "~/components/VContentLink/VContentLink.vue"
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
+import VAudioInstructions from "~/components/VSearchResultsGrid/VAudioInstructions.vue"
 
 export default defineComponent({
   name: "VAllResultsGrid",
   components: {
-    VSnackbar,
     VImageCell,
     VAudioResult,
-    VLoadMore,
-    VGridSkeleton,
-    VContentLink,
+    VAudioInstructions,
+  },
+  props: {
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+    results: {
+      type: Array as PropType<(AudioDetail | ImageDetail)[]>,
+      required: true,
+    },
+    collectionLabel: {
+      type: String,
+      required: true,
+    },
   },
   setup() {
-    const i18n = useI18n()
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-
-    const searchTerm = computed(() => searchStore.searchTerm)
-
-    const resultsLoading = computed(() => {
-      return (
-        Boolean(mediaStore.fetchState.fetchingError) ||
-        mediaStore.fetchState.isFetching ||
-        !mediaStore.fetchState.hasStarted
-      )
-    })
-
-    const contentLinkPath = (mediaType: SupportedMediaType) =>
-      searchStore.getSearchPath({ type: mediaType })
-
-    const allMedia = computed(() => mediaStore.allMedia)
-
-    const isError = computed(() => !!mediaStore.fetchState.fetchingError)
-
-    const fetchState = computed(() => mediaStore.fetchState)
-
-    const errorHeader = computed(() => {
-      const type = i18n.t("browsePage.searchForm.audio")
-      return i18n.t("browsePage.fetchingError", { type })
-    })
-
-    const resultCounts = computed(() => mediaStore.resultCountsPerMediaType)
-
-    const noResults = computed(
-      () => fetchState.value.isFinished && allMedia.value.length === 0
-    )
-
     const uiStore = useUiStore()
-    const {
-      areInstructionsVisible: isSnackbarVisible,
-      isFilterVisible: isSidebarVisible,
-    } = storeToRefs(uiStore)
+    const { isFilterVisible: isSidebarVisible } = storeToRefs(uiStore)
 
     const isSm = computed(() => uiStore.isBreakpoint("sm"))
 
     return {
-      searchTerm,
-      isError,
-      errorHeader,
-      allMedia,
-      fetchState,
-      resultsLoading,
-      resultCounts,
-      noResults,
-
-      contentLinkPath,
-
       isSidebarVisible,
-      isSnackbarVisible,
       isSm,
 
       isDetail,
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioList.vue b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
index fb116ecb4b..e1551bd596 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioList.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
@@ -33,7 +33,7 @@
       />
     </ol>
     <footer v-if="kind !== 'related'" class="mt-4">
-      <VLoadMore />
+      <VLoadMoreOld />
     </footer>
   </section>
 </template>
@@ -50,7 +50,7 @@ import { useSearchStore } from "~/stores/search"
 
 import { useUiStore } from "~/stores/ui"
 
-import VLoadMore from "~/components/VLoadMore.vue"
+import VLoadMoreOld from "~/components/VLoadMoreOld.vue"
 import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
 import VSnackbar from "~/components/VSnackbar.vue"
 import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
@@ -65,7 +65,7 @@ export default defineComponent({
     VAudioResult,
     VSnackbar,
     VGridSkeleton,
-    VLoadMore,
+    VLoadMoreOld,
   },
   props: {
     results: {
diff --git a/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
new file mode 100644
index 0000000000..1aa4e2c5a3
--- /dev/null
+++ b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
@@ -0,0 +1,71 @@
+<template>
+  <VMediaCollection
+    :results="results"
+    :search-term="searchTerm"
+    :collection-label="collectionLabel"
+    kind="collection"
+  >
+    <template #header>
+      <VCollectionHeader
+        v-if="isSupportedMediaType(results.type)"
+        class="mb-2 md:mb-3"
+        :media-type="results.type"
+        :collection-params="collectionParams"
+      />
+    </template>
+
+    <template #footer="{ isFetching }">
+      <footer class="mb-6 mt-4 lg:mb-10">
+        <VLoadMore
+          :search-type="results.type"
+          kind="collection"
+          :search-term="searchTerm"
+          :is-fetching="isFetching"
+          class="mb-4"
+          @load-more="$emit('load-more')"
+        />
+      </footer>
+    </template>
+  </VMediaCollection>
+</template>
+<script lang="ts">
+import { defineComponent, type PropType } from "vue"
+
+import { isSupportedMediaType } from "~/constants/media"
+
+import type { CollectionParams } from "~/types/search"
+import type { Results } from "~/types/result"
+
+import { defineEvent } from "~/types/emits"
+
+import VCollectionHeader from "~/components/VCollectionHeader/VCollectionHeader.vue"
+import VMediaCollection from "~/components/VSearchResultsGrid/VMediaCollection.vue"
+import VLoadMore from "~/components/VLoadMore.vue"
+
+export default defineComponent({
+  name: "VCollectionResults",
+  components: { VLoadMore, VMediaCollection, VCollectionHeader },
+  props: {
+    collectionParams: {
+      type: Object as PropType<CollectionParams>,
+      required: true,
+    },
+    collectionLabel: {
+      type: String,
+      required: true,
+    },
+    results: {
+      type: Object as PropType<Results>,
+      required: true,
+    },
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: {
+    "load-more": defineEvent(),
+  },
+  methods: { isSupportedMediaType },
+})
+</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue b/frontend/src/components/VSearchResultsGrid/VImageGrid.vue
index bd17866ebf..015f029c0f 100644
--- a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue
+++ b/frontend/src/components/VSearchResultsGrid/VImageGrid.vue
@@ -16,7 +16,7 @@
       />
     </ol>
     <footer v-if="kind !== 'related'" class="pt-4">
-      <VLoadMore />
+      <VLoadMoreOld />
     </footer>
   </section>
 </template>
@@ -38,12 +38,12 @@ import type { ImageDetail } from "~/types/media"
 import type { ResultKind } from "~/types/result"
 
 import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
-import VLoadMore from "~/components/VLoadMore.vue"
+import VLoadMoreOld from "~/components/VLoadMoreOld.vue"
 import VImageCell from "~/components/VImageCell/VImageCell.vue"
 
 export default defineComponent({
   name: "ImageGrid",
-  components: { VGridSkeleton, VLoadMore, VImageCell },
+  components: { VGridSkeleton, VLoadMoreOld, VImageCell },
   props: {
     results: {
       type: Array as PropType<ImageDetail[]>,
diff --git a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
index 062e1639a0..df7f2a0447 100644
--- a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
@@ -15,7 +15,7 @@
       :class="{ 'pt-2 sm:pt-0': results.type === 'image' }"
     />
 
-    <slot name="footer" v-bind="{ isFetching }" />
+    <slot name="footer" :is-fetching="_isFetching" />
 
     <VScrollButton
       v-show="showScrollButton"
@@ -27,10 +27,10 @@
 <script lang="ts">
 import { computed, defineComponent, inject, type PropType, ref } from "vue"
 
-import { IsSidebarVisibleKey, ShowScrollButtonKey } from "~/types/provides"
 import type { Results } from "~/types/result"
-
+import { IsSidebarVisibleKey, ShowScrollButtonKey } from "~/types/provides"
 import { defineEvent } from "~/types/emits"
+import { useMediaStore } from "~/stores/media"
 
 import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
 import VAllResultsGrid from "~/components/VSearchResultsGrid/VAllResultsGrid.vue"
@@ -68,9 +68,12 @@ export default defineComponent({
       type: String as PropType<string | null>,
       default: null,
     },
+    /**
+     * Overrides the value from the media store.
+     * Used for the related media which uses a different store.
+     */
     isFetching: {
       type: Boolean,
-      required: true,
     },
   },
   emits: {
@@ -80,8 +83,13 @@ export default defineComponent({
     const showScrollButton = inject(ShowScrollButtonKey, ref(false))
     const isSidebarVisible = inject(IsSidebarVisibleKey, ref(false))
 
+    const mediaStore = useMediaStore()
+    const _isFetching = computed(
+      () => props.isFetching ?? mediaStore.fetchState.isFetching
+    )
+
     const showSkeleton = computed(() => {
-      return props.isFetching && props.results.items.length === 0
+      return _isFetching.value && props.results.items.length === 0
     })
 
     const component = computed(() => {
@@ -98,6 +106,7 @@ export default defineComponent({
       showSkeleton,
       showScrollButton,
       isSidebarVisible,
+      _isFetching,
       component,
     }
   },
diff --git a/frontend/src/components/VSearchResultsGrid/VSearchResults.vue b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
new file mode 100644
index 0000000000..d7f7e63282
--- /dev/null
+++ b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
@@ -0,0 +1,112 @@
+<template>
+  <VMediaCollection
+    :collection-label="collectionLabel"
+    :results="results"
+    :search-term="searchTerm"
+    kind="search"
+  >
+    <template #header>
+      <header v-if="searchTerm" class="my-0 md:mb-8 md:mt-4">
+        <VSearchResultsTitle
+          :size="results.type === 'all' ? 'large' : 'default'"
+          >{{ searchTerm }}</VSearchResultsTitle
+        >
+      </header>
+
+      <div
+        v-if="results.type === 'all'"
+        class="mb-4 mt-2 grid grid-cols-2 gap-4 md:mt-0"
+      >
+        <VContentLink
+          v-for="[mediaType, count] in resultCounts"
+          :key="mediaType"
+          :media-type="mediaType"
+          :search-term="searchTerm"
+          :results-count="count"
+          :to="contentLinkPath(mediaType)"
+        />
+      </div>
+    </template>
+    <template #footer="{ isFetching }">
+      <footer class="mb-6 mt-4 lg:mb-10">
+        <VLoadMore
+          :search-type="results.type"
+          kind="search"
+          :search-term="searchTerm"
+          :is-fetching="isFetching"
+          class="mb-4"
+          @load-more="$emit('load-more')"
+        />
+        <VExternalSearchForm
+          v-if="results.type !== 'all'"
+          :search-term="searchTerm"
+          :is-supported="true"
+          :has-no-results="false"
+        />
+      </footer>
+    </template>
+  </VMediaCollection>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue"
+
+import { useI18n } from "~/composables/use-i18n"
+
+import { useMediaStore } from "~/stores/media"
+import { useSearchStore } from "~/stores/search"
+import { defineEvent } from "~/types/emits"
+
+import type { SupportedMediaType } from "~/constants/media"
+import type { Results } from "~/types/result"
+
+import VSearchResultsTitle from "~/components/VSearchResultsTitle.vue"
+import VMediaCollection from "~/components/VSearchResultsGrid/VMediaCollection.vue"
+import VLoadMore from "~/components/VLoadMore.vue"
+import VExternalSearchForm from "~/components/VExternalSearch/VExternalSearchForm.vue"
+import VContentLink from "~/components/VContentLink/VContentLink.vue"
+
+export default defineComponent({
+  name: "VSearchResults",
+  components: {
+    VContentLink,
+    VExternalSearchForm,
+    VLoadMore,
+    VMediaCollection,
+    VSearchResultsTitle,
+  },
+  props: {
+    searchTerm: {
+      type: String as PropType<string>,
+      required: true,
+    },
+    results: {
+      type: Object as PropType<Results>,
+      required: true,
+    },
+  },
+  emits: {
+    "load-more": defineEvent(),
+  },
+  setup(props) {
+    const i18n = useI18n()
+    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
+
+    const collectionLabel = computed(() => {
+      return i18n
+        .t("browsePage.aria.results", { query: props.searchTerm })
+        .toString()
+    })
+    const contentLinkPath = (mediaType: SupportedMediaType) =>
+      searchStore.getSearchPath({ type: mediaType })
+
+    const resultCounts = computed(() => mediaStore.resultCountsPerMediaType)
+
+    return {
+      collectionLabel,
+      contentLinkPath,
+      resultCounts,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/middleware/search.ts b/frontend/src/middleware/search.ts
index ba337051ee..4a100a678e 100644
--- a/frontend/src/middleware/search.ts
+++ b/frontend/src/middleware/search.ts
@@ -47,7 +47,7 @@ export const searchMiddleware: Middleware = async ({
     const results = await mediaStore.fetchMedia()
 
     const fetchingError = mediaStore.fetchState.fetchingError
-    if (!results && fetchingError && !handledClientSide(fetchingError)) {
+    if (!results.length && fetchingError && !handledClientSide(fetchingError)) {
       nuxtError(fetchingError)
     }
   }
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index b95cb25f87..4a4c8da475 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -10,39 +10,21 @@
       class="w-full py-10"
     />
     <section v-else>
-      <header v-if="query.q && supported" class="my-0 md:mb-8 md:mt-4">
-        <VSearchResultsTitle :size="isAllView ? 'large' : 'default'">{{
-          searchTerm
-        }}</VSearchResultsTitle>
-      </header>
       <NuxtChild
         :key="$route.path"
-        :results="
-          isSupportedMediaType(searchType) ? resultItems[searchType] : null
-        "
-        :fetch-state="fetchState"
-        :search-term="query.q"
+        :results="searchResults"
+        :search-term="searchTerm"
         :supported="supported"
+        :handle-load-more="handleLoadMore"
         data-testid="search-results"
       />
-      <VExternalSearchForm
-        v-if="!isAllView"
-        :search-term="searchTerm"
-        :is-supported="supported"
-        :has-no-results="false"
-      />
-      <VScrollButton
-        v-show="showScrollButton"
-        :is-filter-sidebar-visible="isSidebarVisible"
-        data-testid="scroll-button"
-      />
     </section>
   </div>
 </template>
 
 <script lang="ts">
 import { isShallowEqualObjects } from "@wordpress/is-shallow-equal"
-import { computed, inject, ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import { watchDebounced } from "@vueuse/core"
 import { storeToRefs } from "pinia"
 import {
@@ -57,33 +39,25 @@ import {
 import { searchMiddleware } from "~/middleware/search"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
-import { ALL_MEDIA, isSupportedMediaType } from "~/constants/media"
+import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
+import { ALL_MEDIA } from "~/constants/media"
 
 import { skipToContentTargetId } from "~/constants/window"
-import { IsSidebarVisibleKey, ShowScrollButtonKey } from "~/types/provides"
+import type { Results } from "~/types/result"
 import { areQueriesEqual } from "~/utils/search-query-transform"
 import { handledClientSide, isRetriable } from "~/utils/errors"
 
 import VErrorSection from "~/components/VErrorSection/VErrorSection.vue"
-import VScrollButton from "~/components/VScrollButton.vue"
-import VExternalSearchForm from "~/components/VExternalSearch/VExternalSearchForm.vue"
-import VSearchResultsTitle from "~/components/VSearchResultsTitle.vue"
 
 export default defineComponent({
   name: "BrowsePage",
   components: {
     VErrorSection,
-    VSearchResultsTitle,
-    VExternalSearchForm,
-    VScrollButton,
   },
   layout: "search-layout",
   middleware: searchMiddleware,
   fetchOnServer: false,
   setup() {
-    const showScrollButton = inject(ShowScrollButtonKey)
-    const isSidebarVisible = inject(IsSidebarVisibleKey)
     const featureFlagStore = useFeatureFlagStore()
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
@@ -105,9 +79,7 @@ export default defineComponent({
       searchTypeIsSupported: supported,
     } = storeToRefs(searchStore)
 
-    const { resultCount, fetchState, resultItems } = storeToRefs(mediaStore)
-
-    const isAllView = computed(() => searchType.value === ALL_MEDIA)
+    const { resultCount, fetchState } = storeToRefs(mediaStore)
 
     const needsFetching = computed(() =>
       Boolean(supported.value && !resultCount.value && searchTerm.value !== "")
@@ -125,22 +97,41 @@ export default defineComponent({
 
     const { error: nuxtError } = useContext()
 
+    const searchResults = ref<Results | null>(
+      isSearchTypeSupported(searchType.value)
+        ? ({
+            type: searchType.value,
+            items:
+              searchType.value === ALL_MEDIA
+                ? mediaStore.allMedia
+                : mediaStore.resultItems[searchType.value],
+          } as Results)
+        : null
+    )
+
     const fetchMedia = async (
       payload: { shouldPersistMedia?: boolean } = {}
     ) => {
+      if (!isSearchTypeSupported(searchType.value)) {
+        return
+      }
       /**
        * If the fetch has already started in the middleware,
        * and there is an error status that will not change if retried, don't re-fetch.
        */
       const shouldNotRefetch =
-        mediaStore.fetchState.hasStarted &&
+        fetchState.value.hasStarted &&
         fetchingError.value !== null &&
         !isRetriable(fetchingError.value)
       if (shouldNotRefetch) {
         return
       }
+      if (!payload.shouldPersistMedia) {
+        searchResults.value = { type: searchType.value, items: [] }
+      }
 
-      await mediaStore.fetchMedia(payload)
+      const media = await mediaStore.fetchMedia(payload)
+      searchResults.value = { type: searchType.value, items: media } as Results
 
       if (
         fetchingError.value === null ||
@@ -151,7 +142,7 @@ export default defineComponent({
       return nuxtError(fetchingError.value)
     }
 
-    const fetchingError = computed(() => mediaStore.fetchState.fetchingError)
+    const fetchingError = computed(() => fetchState.value.fetchingError)
 
     /**
      * Search middleware runs when the path changes. This watcher
@@ -203,23 +194,21 @@ export default defineComponent({
         await fetchMedia()
       }
     })
+    const handleLoadMore = async () => {
+      await fetchMedia({ shouldPersistMedia: true })
+    }
 
     return {
-      showScrollButton,
       searchTerm,
       searchType,
       supported,
       query,
-      isSupportedMediaType,
 
       resultCount,
-      fetchState,
-      resultItems,
-      needsFetching,
-      isSidebarVisible,
+      searchResults,
       fetchingError,
 
-      isAllView,
+      handleLoadMore,
 
       skipToContentTargetId,
     }
diff --git a/frontend/src/pages/search/audio.vue b/frontend/src/pages/search/audio.vue
index e35bc8defb..6c1c8c1af5 100644
--- a/frontend/src/pages/search/audio.vue
+++ b/frontend/src/pages/search/audio.vue
@@ -1,49 +1,37 @@
 <template>
-  <VAudioList
+  <VSearchResults
     :results="results"
     kind="search"
-    :fetch-state="fetchState"
-    :collection-label="collectionLabel"
+    :search-term="searchTerm"
+    @load-more="handleLoadMore"
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+import { defineComponent, PropType } from "vue"
 
-import { useSearchStore } from "~/stores/search"
-import { useI18n } from "~/composables/use-i18n"
-import type { AudioDetail } from "~/types/media"
-import type { FetchState } from "~/types/fetch-state"
+import type { AudioResults } from "~/types/result"
 
-import VAudioList from "~/components/VSearchResultsGrid/VAudioList.vue"
+import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
 
 export default defineComponent({
   name: "AudioSearch",
   components: {
-    VAudioList,
+    VSearchResults,
   },
   props: {
     results: {
-      type: Array as PropType<AudioDetail[]>,
+      type: Object as PropType<AudioResults>,
       required: true,
     },
-    fetchState: {
-      type: Object as PropType<FetchState>,
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+    handleLoadMore: {
+      type: Function as PropType<() => void>,
       required: true,
     },
-  },
-  setup() {
-    const i18n = useI18n()
-
-    const collectionLabel = computed(() => {
-      const query = useSearchStore().searchTerm
-
-      return i18n.t("browsePage.aria.results", { query }).toString()
-    })
-
-    return {
-      collectionLabel,
-    }
   },
 })
 </script>
diff --git a/frontend/src/pages/search/image.vue b/frontend/src/pages/search/image.vue
index 68db335091..bdb0dddd79 100644
--- a/frontend/src/pages/search/image.vue
+++ b/frontend/src/pages/search/image.vue
@@ -1,38 +1,35 @@
 <template>
-  <VImageGrid
+  <VSearchResults
     :results="results"
-    :fetch-state="fetchState"
     kind="search"
-    :image-grid-label="
-      $t('browsePage.aria.results', { query: searchTerm }).toString()
-    "
+    :search-term="searchTerm"
+    @load-more="handleLoadMore"
   />
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
-import type { ImageDetail } from "~/types/media"
-import type { FetchState } from "~/types/fetch-state"
+import type { ImageResults } from "~/types/result"
 
-import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
+import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
 
 export default defineComponent({
   name: "ImageSearch",
-  components: { VImageGrid },
+  components: { VSearchResults },
   props: {
     results: {
-      type: Array as PropType<ImageDetail[]>,
-      required: true,
-    },
-    fetchState: {
-      type: Object as PropType<FetchState>,
+      type: Object as PropType<ImageResults>,
       required: true,
     },
     searchTerm: {
       type: String,
       required: true,
     },
+    handleLoadMore: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
   },
 })
 </script>
diff --git a/frontend/src/pages/search/index.vue b/frontend/src/pages/search/index.vue
index 079473bc73..9be8d4eff8 100644
--- a/frontend/src/pages/search/index.vue
+++ b/frontend/src/pages/search/index.vue
@@ -1,14 +1,35 @@
 <template>
-  <VAllResultsGrid />
+  <VSearchResults
+    :results="results"
+    :search-term="searchTerm"
+    kind="search"
+    @load-more="handleLoadMore"
+  />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, type PropType } from "vue"
 
-import VAllResultsGrid from "~/components/VSearchResultsGrid/VAllResultsGrid.vue"
+import type { AllMediaResults } from "~/types/result"
+
+import VSearchResults from "~/components/VSearchResultsGrid/VSearchResults.vue"
 
 export default defineComponent({
   name: "SearchIndex",
-  components: { VAllResultsGrid },
+  components: { VSearchResults },
+  props: {
+    results: {
+      type: Object as PropType<AllMediaResults>,
+      required: true,
+    },
+    searchTerm: {
+      type: String,
+      required: true,
+    },
+    handleLoadMore: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
+  },
 })
 </script>
diff --git a/frontend/src/stores/media/index.ts b/frontend/src/stores/media/index.ts
index 71c37fac05..959e14fe45 100644
--- a/frontend/src/stores/media/index.ts
+++ b/frontend/src/stores/media/index.ts
@@ -286,6 +286,14 @@ export const useMediaStore = defineStore("media", {
           !this.mediaFetchState[type].isFinished
       )
     },
+
+    canLoadMore(): boolean {
+      return (
+        !this.fetchState.fetchingError &&
+        !this.fetchState.isFinished &&
+        this.resultCount > 0
+      )
+    },
   },
 
   actions: {
@@ -414,20 +422,20 @@ export const useMediaStore = defineStore("media", {
 
       const mediaToFetch = this._fetchableMediaTypes
 
-      const resultCounts = await Promise.all(
+      await Promise.allSettled(
         mediaToFetch.map((mediaType) =>
           this.fetchSingleMediaType({ mediaType, shouldPersistMedia })
         )
       )
-      const resultCount = resultCounts.includes(null)
-        ? null
-        : (resultCounts as number[]).reduce((a, b) => a + b, 0)
 
       this.currentPage =
         mediaType === ALL_MEDIA
           ? this.currentPage + 1
           : this.results[mediaType].page
-      return resultCount
+
+      return mediaType === ALL_MEDIA
+        ? this.allMedia
+        : this.resultItems[mediaType]
     },
 
     clearMedia() {
diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
index 8ac22e8f21..737ed12c9c 100644
--- a/frontend/src/stores/search.ts
+++ b/frontend/src/stores/search.ts
@@ -149,6 +149,11 @@ export const useSearchStore = defineStore("search", {
     state.recentSearches = useStorage<string[]>("recent-searches", [])
   },
   getters: {
+    searchStarted(state) {
+      return state.strategy === "default"
+        ? state.searchTerm.length > 0
+        : state.collectionParams !== null
+    },
     filterCategories(state) {
       return Object.keys(state.filters) as FilterCategory[]
     },
diff --git a/frontend/test/unit/specs/components/v-image-grid.spec.js b/frontend/test/unit/specs/components/v-image-grid.spec.js
deleted file mode 100644
index fb2ad0d730..0000000000
--- a/frontend/test/unit/specs/components/v-image-grid.spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { screen } from "@testing-library/vue"
-
-import { render } from "~~/test/unit/test-utils/render"
-
-import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
-
-const propsData = {
-  results: [
-    { id: "i1", url: "http://localhost:8080/i1.png", title: "image1" },
-    { id: "i2", url: "http://localhost:8080/i2.jpg", title: "image2" },
-    { id: "i3", url: "http://localhost:8080/i3.svg", title: "image3" },
-  ],
-  fetchState: {
-    isSinglePage: true,
-    isFetching: false,
-    fetchingError: null,
-  },
-  kind: "related",
-  imageGridLabel: "Image Results",
-}
-
-describe("VImageGrid", () => {
-  let options
-  beforeEach(() => {
-    options = {
-      props: propsData,
-      stubs: ["VLicense"],
-    }
-  })
-  it("renders images without load more button for related images", () => {
-    const imageCount = propsData.results.length
-    render(VImageGrid, options)
-    expect(screen.queryAllByRole("img").length).toEqual(imageCount)
-    expect(screen.queryAllByRole("figure").length).toEqual(imageCount)
-    expect(screen.queryByTestId("load-more")).toBeNull()
-  })
-})
diff --git a/frontend/test/unit/specs/pages/browse-page.spec.js b/frontend/test/unit/specs/pages/browse-page.spec.js
deleted file mode 100644
index 409ae111be..0000000000
--- a/frontend/test/unit/specs/pages/browse-page.spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { screen } from "@testing-library/vue"
-import { ref } from "vue"
-
-import { render } from "~~/test/unit/test-utils/render"
-
-import { IMAGE } from "~/constants/media"
-import { useSearchStore } from "~/stores/search"
-
-import SearchIndex from "~/pages/search.vue"
-
-import {
-  IsHeaderScrolledKey,
-  IsSidebarVisibleKey,
-  ShowScrollButtonKey,
-} from "~/types/provides"
-
-describe("SearchIndex", () => {
-  let options
-  const defaultProvideOptions = {
-    showScrollButton: ref(false),
-    [IsHeaderScrolledKey]: ref(false),
-    [IsSidebarVisibleKey]: ref(false),
-    [ShowScrollButtonKey]: ref(false),
-  }
-  let searchStore
-
-  beforeEach(() => {
-    options = {
-      provide: defaultProvideOptions,
-      mocks: {
-        $router: { path: { name: "search-image" } },
-        $route: { path: "/search/image" },
-      },
-      stubs: {
-        NuxtChild: true,
-        VSearchGrid: true,
-      },
-    }
-  })
-
-  it("hides the scroll button when injected value is false", () => {
-    options.provide.showScrollButton.value = false
-
-    render(SearchIndex, options, (localVue, options) => {
-      searchStore = useSearchStore(options.pinia)
-      searchStore.setSearchTerm("cat")
-      searchStore.setSearchType(IMAGE)
-    })
-
-    expect(screen.queryByLabelText(/scroll/i)).not.toBeVisible()
-  })
-
-  it("shows the scroll button when injected value is true", () => {
-    options.provide[ShowScrollButtonKey].value = true
-    render(SearchIndex, options, (localVue, options) => {
-      searchStore = useSearchStore(options.pinia)
-      searchStore.setSearchTerm("cat")
-      searchStore.setSearchType(IMAGE)
-    })
-
-    expect(screen.queryByLabelText(/scroll/i)).toBeVisible()
-  })
-})

From 77ea5234c2cb3b789c9d08b833836ad1b76e1829 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 7 Mar 2024 18:59:04 +0300
Subject: [PATCH 2/9] Make isFetching a prop

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../VSearchResultsGrid/VCollectionResults.vue        |  7 ++++++-
 .../VSearchResultsGrid/VMediaCollection.vue          | 12 +++---------
 .../components/VSearchResultsGrid/VSearchResults.vue |  7 ++++++-
 frontend/src/pages/search.vue                        |  3 +++
 frontend/src/pages/search/audio.vue                  |  7 ++++++-
 frontend/src/pages/search/image.vue                  |  7 ++++++-
 frontend/src/pages/search/index.vue                  |  5 +++++
 7 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
index 1aa4e2c5a3..40b66f70fa 100644
--- a/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
+++ b/frontend/src/components/VSearchResultsGrid/VCollectionResults.vue
@@ -1,6 +1,7 @@
 <template>
   <VMediaCollection
     :results="results"
+    :is-fetching="isFetching"
     :search-term="searchTerm"
     :collection-label="collectionLabel"
     kind="collection"
@@ -14,7 +15,7 @@
       />
     </template>
 
-    <template #footer="{ isFetching }">
+    <template #footer>
       <footer class="mb-6 mt-4 lg:mb-10">
         <VLoadMore
           :search-type="results.type"
@@ -58,6 +59,10 @@ export default defineComponent({
       type: Object as PropType<Results>,
       required: true,
     },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
     searchTerm: {
       type: String,
       required: true,
diff --git a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
index df7f2a0447..23bfda46e1 100644
--- a/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
+++ b/frontend/src/components/VSearchResultsGrid/VMediaCollection.vue
@@ -15,7 +15,7 @@
       :class="{ 'pt-2 sm:pt-0': results.type === 'image' }"
     />
 
-    <slot name="footer" :is-fetching="_isFetching" />
+    <slot name="footer" />
 
     <VScrollButton
       v-show="showScrollButton"
@@ -30,7 +30,6 @@ import { computed, defineComponent, inject, type PropType, ref } from "vue"
 import type { Results } from "~/types/result"
 import { IsSidebarVisibleKey, ShowScrollButtonKey } from "~/types/provides"
 import { defineEvent } from "~/types/emits"
-import { useMediaStore } from "~/stores/media"
 
 import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
 import VAllResultsGrid from "~/components/VSearchResultsGrid/VAllResultsGrid.vue"
@@ -74,6 +73,7 @@ export default defineComponent({
      */
     isFetching: {
       type: Boolean,
+      required: true,
     },
   },
   emits: {
@@ -83,13 +83,8 @@ export default defineComponent({
     const showScrollButton = inject(ShowScrollButtonKey, ref(false))
     const isSidebarVisible = inject(IsSidebarVisibleKey, ref(false))
 
-    const mediaStore = useMediaStore()
-    const _isFetching = computed(
-      () => props.isFetching ?? mediaStore.fetchState.isFetching
-    )
-
     const showSkeleton = computed(() => {
-      return _isFetching.value && props.results.items.length === 0
+      return props.isFetching && props.results.items.length === 0
     })
 
     const component = computed(() => {
@@ -106,7 +101,6 @@ export default defineComponent({
       showSkeleton,
       showScrollButton,
       isSidebarVisible,
-      _isFetching,
       component,
     }
   },
diff --git a/frontend/src/components/VSearchResultsGrid/VSearchResults.vue b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
index d7f7e63282..1205d2f166 100644
--- a/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
+++ b/frontend/src/components/VSearchResultsGrid/VSearchResults.vue
@@ -2,6 +2,7 @@
   <VMediaCollection
     :collection-label="collectionLabel"
     :results="results"
+    :is-fetching="isFetching"
     :search-term="searchTerm"
     kind="search"
   >
@@ -27,7 +28,7 @@
         />
       </div>
     </template>
-    <template #footer="{ isFetching }">
+    <template #footer>
       <footer class="mb-6 mt-4 lg:mb-10">
         <VLoadMore
           :search-type="results.type"
@@ -83,6 +84,10 @@ export default defineComponent({
       type: Object as PropType<Results>,
       required: true,
     },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: {
     "load-more": defineEvent(),
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 4a4c8da475..5419b1f972 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -13,6 +13,7 @@
       <NuxtChild
         :key="$route.path"
         :results="searchResults"
+        :is-fetching="isFetching"
         :search-term="searchTerm"
         :supported="supported"
         :handle-load-more="handleLoadMore"
@@ -143,6 +144,7 @@ export default defineComponent({
     }
 
     const fetchingError = computed(() => fetchState.value.fetchingError)
+    const isFetching = computed(() => fetchState.value.isFetching)
 
     /**
      * Search middleware runs when the path changes. This watcher
@@ -206,6 +208,7 @@ export default defineComponent({
 
       resultCount,
       searchResults,
+      isFetching,
       fetchingError,
 
       handleLoadMore,
diff --git a/frontend/src/pages/search/audio.vue b/frontend/src/pages/search/audio.vue
index 6c1c8c1af5..dcb5e44b80 100644
--- a/frontend/src/pages/search/audio.vue
+++ b/frontend/src/pages/search/audio.vue
@@ -1,8 +1,9 @@
 <template>
   <VSearchResults
     :results="results"
-    kind="search"
+    :is-fetching="isFetching"
     :search-term="searchTerm"
+    kind="search"
     @load-more="handleLoadMore"
   />
 </template>
@@ -24,6 +25,10 @@ export default defineComponent({
       type: Object as PropType<AudioResults>,
       required: true,
     },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
     searchTerm: {
       type: String,
       required: true,
diff --git a/frontend/src/pages/search/image.vue b/frontend/src/pages/search/image.vue
index bdb0dddd79..d6a6374296 100644
--- a/frontend/src/pages/search/image.vue
+++ b/frontend/src/pages/search/image.vue
@@ -1,8 +1,9 @@
 <template>
   <VSearchResults
     :results="results"
-    kind="search"
+    :is-fetching="isFetching"
     :search-term="searchTerm"
+    kind="search"
     @load-more="handleLoadMore"
   />
 </template>
@@ -22,6 +23,10 @@ export default defineComponent({
       type: Object as PropType<ImageResults>,
       required: true,
     },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
     searchTerm: {
       type: String,
       required: true,
diff --git a/frontend/src/pages/search/index.vue b/frontend/src/pages/search/index.vue
index 9be8d4eff8..46defa4de0 100644
--- a/frontend/src/pages/search/index.vue
+++ b/frontend/src/pages/search/index.vue
@@ -1,6 +1,7 @@
 <template>
   <VSearchResults
     :results="results"
+    :is-fetching="isFetching"
     :search-term="searchTerm"
     kind="search"
     @load-more="handleLoadMore"
@@ -22,6 +23,10 @@ export default defineComponent({
       type: Object as PropType<AllMediaResults>,
       required: true,
     },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
     searchTerm: {
       type: String,
       required: true,

From e5e32bd982aef545a21a1d1e97ad08177c258e97 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 7 Mar 2024 19:11:42 +0300
Subject: [PATCH 3/9] Fix results not updating when filters are removed

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/pages/search.vue | 3 +++
 frontend/src/stores/search.ts | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 5419b1f972..51672e4b1f 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -161,6 +161,9 @@ export default defineComponent({
         const { query: urlQuery, path } = newRoute
         searchStore.setSearchStateFromUrl({ urlQuery, path })
 
+        const mediaStore = useMediaStore()
+        mediaStore.clearMedia()
+
         /**
          * By default, Nuxt only scrolls to top when the path changes.
          * This is a workaround to scroll to top when the query changes.
diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
index 737ed12c9c..b254a2f29f 100644
--- a/frontend/src/stores/search.ts
+++ b/frontend/src/stores/search.ts
@@ -316,9 +316,6 @@ export const useSearchStore = defineStore("search", {
       this.strategy = "default"
 
       this.addRecentSearch(formattedTerm)
-
-      const mediaStore = useMediaStore()
-      mediaStore.clearMedia()
     },
     /**
      * Sets the collectionParams and mediaType for the collection page.
@@ -348,6 +345,9 @@ export const useSearchStore = defineStore("search", {
       this.strategy = "default"
       this.collectionParams = null
 
+      const mediaStore = useMediaStore()
+      mediaStore.clearMedia()
+
       this.setSearchTerm(query.q)
       this.searchType = pathToSearchType(path)
 

From b8873a671fd7d434ef62ddefd784975138976a43 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 8 Mar 2024 11:13:47 +0300
Subject: [PATCH 4/9] Fix collection fetching

Handle fetching in `collection.vue` page, and replace `VCollectionPage` with `VCollectionResults`

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/VCollectionPage.vue | 110 --------------------
 frontend/src/composables/use-collection.ts  |  66 ++++++++++++
 frontend/src/pages/audio/collection.vue     |  55 ++++++++--
 frontend/src/pages/image/collection.vue     |  55 ++++++++--
 4 files changed, 160 insertions(+), 126 deletions(-)
 create mode 100644 frontend/src/composables/use-collection.ts

diff --git a/frontend/src/components/VCollectionPage.vue b/frontend/src/components/VCollectionPage.vue
index 7467ccc348..e69de29bb2 100644
--- a/frontend/src/components/VCollectionPage.vue
+++ b/frontend/src/components/VCollectionPage.vue
@@ -1,110 +0,0 @@
-<template>
-  <div class="p-6 pt-0 lg:p-10 lg:pt-2">
-    <VCollectionHeader
-      v-if="collectionParams"
-      :collection-params="collectionParams"
-      :creator-url="creatorUrl"
-      :media-type="mediaType"
-      class="mb-2 md:mb-3"
-    />
-    <VAudioList
-      v-if="results.type === 'audio'"
-      :collection-label="collectionLabel"
-      :fetch-state="fetchState"
-      kind="collection"
-      :results="results.items"
-    />
-    <VImageGrid
-      v-if="results.type === 'image'"
-      :image-grid-label="collectionLabel"
-      :fetch-state="fetchState"
-      kind="collection"
-      :results="results.items"
-    />
-  </div>
-</template>
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
-
-import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
-import type { SupportedMediaType } from "~/constants/media"
-
-import { Results } from "~/types/result"
-
-import { useI18n } from "~/composables/use-i18n"
-
-import VCollectionHeader from "~/components/VCollectionHeader/VCollectionHeader.vue"
-import VAudioList from "~/components/VSearchResultsGrid/VAudioList.vue"
-import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
-
-export default defineComponent({
-  name: "VCollectionPage",
-  components: { VAudioList, VImageGrid, VCollectionHeader },
-  props: {
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const i18n = useI18n()
-    const mediaStore = useMediaStore()
-
-    const fetchState = computed(() => mediaStore.fetchState)
-    const results = computed<Results>(() => {
-      return {
-        type: props.mediaType,
-        items: mediaStore.resultItems[props.mediaType],
-      } as Results
-    })
-
-    const creatorUrl = computed(() => {
-      const media = results.value.items
-      return media.length > 0 ? media[0].creator_url : undefined
-    })
-
-    const searchStore = useSearchStore()
-    const collectionParams = computed(() => searchStore.collectionParams)
-
-    const collectionLabel = computed(() => {
-      const collection = collectionParams.value?.collection
-      switch (collection) {
-        case "tag": {
-          return i18n
-            .t(`collection.ariaLabel.tag.${props.mediaType}`, {
-              tag: collectionParams.value?.tag,
-            })
-            .toString()
-        }
-        case "source": {
-          return i18n
-            .t(`collection.ariaLabel.source.${props.mediaType}`, {
-              source: collectionParams.value?.source,
-            })
-            .toString()
-        }
-        case "creator": {
-          return i18n
-            .t(`collection.ariaLabel.creator.${props.mediaType}`, {
-              creator: collectionParams.value?.creator,
-              source: collectionParams.value?.source,
-            })
-            .toString()
-        }
-        default: {
-          return ""
-        }
-      }
-    })
-
-    return {
-      fetchState,
-      results,
-      creatorUrl,
-      collectionParams,
-      collectionLabel,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/composables/use-collection.ts b/frontend/src/composables/use-collection.ts
new file mode 100644
index 0000000000..4c83262614
--- /dev/null
+++ b/frontend/src/composables/use-collection.ts
@@ -0,0 +1,66 @@
+import { computed, ref } from "vue"
+
+import { useMediaStore } from "~/stores/media"
+import { useSearchStore } from "~/stores/search"
+import { useI18n } from "~/composables/use-i18n"
+import type { DetailFromMediaType } from "~/types/media"
+import type { SupportedMediaType } from "~/constants/media"
+
+export const useCollection = <T extends SupportedMediaType>({
+  mediaType,
+}: {
+  mediaType: T
+}) => {
+  const mediaStore = useMediaStore()
+  const searchStore = useSearchStore()
+
+  const collectionParams = computed(() => searchStore.collectionParams)
+  const isFetching = computed(() => mediaStore.fetchState.isFetching)
+
+  const media = ref<DetailFromMediaType<typeof mediaType>[]>([])
+  const creatorUrl = ref<string>()
+
+  const i18n = useI18n()
+
+  const collectionLabel = computed(() => {
+    if (!collectionParams.value) {
+      return ""
+    }
+    const { collection, ...params } = collectionParams.value
+    return i18n
+      .t(`collection.label.${collection}.image`, { ...params })
+      .toString()
+  })
+
+  const fetchMedia = async (
+    { shouldPersistMedia }: { shouldPersistMedia: boolean } = {
+      shouldPersistMedia: false,
+    }
+  ) => {
+    if (mediaStore._searchType !== mediaType) {
+      throw new Error(
+        `Search type is incorrectly set in the store to ${mediaStore._searchType} when it should be "${mediaType}"`
+      )
+    }
+    media.value = (await mediaStore.fetchMedia({
+      shouldPersistMedia,
+    })) as (typeof media)["value"]
+    creatorUrl.value =
+      media.value.length > 0 ? media.value[0].creator_url : undefined
+  }
+
+  const handleLoadMore = async () => {
+    await fetchMedia({ shouldPersistMedia: true })
+  }
+
+  const results = computed(() => ({ type: mediaType, items: media.value }))
+
+  return {
+    results,
+    creatorUrl,
+    fetchMedia,
+    handleLoadMore,
+    collectionLabel,
+    isFetching,
+  }
+}
diff --git a/frontend/src/pages/audio/collection.vue b/frontend/src/pages/audio/collection.vue
index 973d89cd61..e5d6aed02f 100644
--- a/frontend/src/pages/audio/collection.vue
+++ b/frontend/src/pages/audio/collection.vue
@@ -1,27 +1,66 @@
 <template>
-  <VCollectionPage media-type="audio" />
+  <div class="p-6 pt-0 lg:p-10 lg:pt-2">
+    <VCollectionResults
+      v-if="collectionParams"
+      search-term=""
+      :is-fetching="isFetching"
+      :results="results"
+      :collection-label="collectionLabel"
+      :collection-params="collectionParams"
+      @load-more="handleLoadMore"
+    />
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, useFetch } from "@nuxtjs/composition-api"
+import { defineComponent, useFetch, useMeta } from "@nuxtjs/composition-api"
+import { computed } from "vue"
 
-import { useMediaStore } from "~/stores/media"
 import { collectionMiddleware } from "~/middleware/collection"
+import { useSearchStore } from "~/stores/search"
+import { useCollection } from "~/composables/use-collection"
+import { AUDIO } from "~/constants/media"
 
-import VCollectionPage from "~/components/VCollectionPage.vue"
+import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
 export default defineComponent({
   name: "VAudioCollectionPage",
-  components: { VCollectionPage },
+  components: { VCollectionResults },
   layout: "content-layout",
   middleware: collectionMiddleware,
   setup() {
-    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
+
+    const collectionParams = computed(() => searchStore.collectionParams)
+
+    const {
+      results,
+      creatorUrl,
+      fetchMedia,
+      handleLoadMore,
+      collectionLabel,
+      isFetching,
+    } = useCollection({
+      mediaType: AUDIO,
+    })
 
     useFetch(async () => {
-      await mediaStore.fetchMedia()
+      await fetchMedia()
     })
-    return {}
+
+    useMeta({
+      meta: [{ hid: "robots", name: "robots", content: "all" }],
+    })
+
+    return {
+      results,
+      collectionParams,
+      isFetching,
+      creatorUrl,
+      collectionLabel,
+      handleLoadMore,
+    }
   },
+  head: {},
 })
 </script>
diff --git a/frontend/src/pages/image/collection.vue b/frontend/src/pages/image/collection.vue
index bf4028df62..133dba9257 100644
--- a/frontend/src/pages/image/collection.vue
+++ b/frontend/src/pages/image/collection.vue
@@ -1,27 +1,66 @@
 <template>
-  <VCollectionPage media-type="image" />
+  <div class="p-6 pt-0 lg:p-10 lg:pt-2">
+    <VCollectionResults
+      v-if="collectionParams"
+      search-term=""
+      :is-fetching="isFetching"
+      :results="results"
+      :collection-label="collectionLabel"
+      :collection-params="collectionParams"
+      @load-more="handleLoadMore"
+    />
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, useFetch } from "@nuxtjs/composition-api"
+import { defineComponent, useFetch, useMeta } from "@nuxtjs/composition-api"
+import { computed } from "vue"
 
-import { useMediaStore } from "~/stores/media"
 import { collectionMiddleware } from "~/middleware/collection"
+import { useCollection } from "~/composables/use-collection"
+import { useSearchStore } from "~/stores/search"
+import { IMAGE } from "~/constants/media"
 
-import VCollectionPage from "~/components/VCollectionPage.vue"
+import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
 export default defineComponent({
   name: "VImageCollectionPage",
-  components: { VCollectionPage },
+  components: { VCollectionResults },
   layout: "content-layout",
   middleware: collectionMiddleware,
   setup() {
-    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
+
+    const collectionParams = computed(() => searchStore.collectionParams)
+
+    const {
+      results,
+      creatorUrl,
+      fetchMedia,
+      handleLoadMore,
+      collectionLabel,
+      isFetching,
+    } = useCollection({
+      mediaType: IMAGE,
+    })
+
+    useMeta({
+      meta: [{ hid: "robots", name: "robots", content: "all" }],
+    })
 
     useFetch(async () => {
-      await mediaStore.fetchMedia()
+      await fetchMedia()
     })
-    return {}
+
+    return {
+      collectionParams,
+      results,
+      isFetching,
+      creatorUrl,
+      collectionLabel,
+      handleLoadMore,
+    }
   },
+  head: {},
 })
 </script>

From b54faa871815b019851b24bd63e6dca96739221f Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 12 Mar 2024 15:24:16 +0300
Subject: [PATCH 5/9] Delete unused components

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/VCollectionPage.vue   |   0
 frontend/src/components/VLoadMoreOld.vue      | 147 ------------------
 .../VSearchResultsGrid/VAudioList.vue         | 121 --------------
 .../VSearchResultsGrid/VImageGrid.vue         |  99 ------------
 4 files changed, 367 deletions(-)
 delete mode 100644 frontend/src/components/VCollectionPage.vue
 delete mode 100644 frontend/src/components/VLoadMoreOld.vue
 delete mode 100644 frontend/src/components/VSearchResultsGrid/VAudioList.vue
 delete mode 100644 frontend/src/components/VSearchResultsGrid/VImageGrid.vue

diff --git a/frontend/src/components/VCollectionPage.vue b/frontend/src/components/VCollectionPage.vue
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/src/components/VLoadMoreOld.vue b/frontend/src/components/VLoadMoreOld.vue
deleted file mode 100644
index 0db17d06ee..0000000000
--- a/frontend/src/components/VLoadMoreOld.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <div ref="loadMoreSectionRef" class="w-full">
-    <VButton
-      v-show="canLoadMore"
-      class="label-bold lg:description-bold h-16 w-full lg:h-18"
-      variant="filled-gray"
-      size="disabled"
-      :disabled="fetchState.isFetching"
-      data-testid="load-more"
-      @click="onLoadMore"
-    >
-      {{ buttonLabel }}
-    </VButton>
-  </div>
-</template>
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from "vue"
-import { storeToRefs } from "pinia"
-import { useElementVisibility } from "@vueuse/core"
-
-import { useRoute } from "@nuxtjs/composition-api"
-
-import { useAnalytics } from "~/composables/use-analytics"
-import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
-import { useI18n } from "~/composables/use-i18n"
-
-import VButton from "~/components/VButton.vue"
-
-export default defineComponent({
-  name: "VLoadMoreOld",
-  components: {
-    VButton,
-  },
-  setup() {
-    const loadMoreSectionRef = ref(null)
-    const route = useRoute()
-    const i18n = useI18n()
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const { sendCustomEvent } = useAnalytics()
-
-    // Use the `_searchType` from mediaStore because it falls back to ALL_MEDIA
-    // for unsupported search types.
-    const { fetchState, resultCount, currentPage, _searchType } =
-      storeToRefs(mediaStore)
-    const { searchTerm } = storeToRefs(searchStore)
-
-    const searchStarted = computed(() => {
-      return searchStore.strategy === "default"
-        ? searchTerm.value !== ""
-        : searchStore.collectionParams !== null
-    })
-
-    /**
-     * Whether we should show the "Load more" button.
-     * If the user has entered a search term, there is at least 1 page of results,
-     * there has been no fetching error, and there are more results to fetch,
-     * we show the button.
-     */
-    const canLoadMore = computed(() => {
-      return Boolean(
-        searchStarted.value &&
-          !fetchState.value.fetchingError &&
-          !fetchState.value.isFinished &&
-          resultCount.value > 0
-      )
-    })
-
-    const reachResultEndEventSent = ref(false)
-    /**
-     * On button click, fetch media, persisting the existing results.
-     * The button is disabled when we are fetching, but we still check
-     * whether we are currently fetching to be sure we don't fetch multiple times.
-     *
-     */
-    const onLoadMore = async () => {
-      if (fetchState.value.isFetching) {
-        return
-      }
-
-      reachResultEndEventSent.value = false
-
-      sendCustomEvent("LOAD_MORE_RESULTS", {
-        query: searchStore.searchTerm,
-        searchType: searchStore.searchType,
-        resultPage: currentPage.value || 1,
-      })
-
-      await mediaStore.fetchMedia({
-        shouldPersistMedia: true,
-      })
-    }
-
-    const sendReachResultEnd = () => {
-      // This function can be called before the media is fetched and
-      // currentPage is updated from 0, so we use the value or 1.
-      // The currentPage can never be 0 here because then the loadMore
-      // button would not be visible.
-      sendCustomEvent("REACH_RESULT_END", {
-        searchType: _searchType.value,
-        query: searchTerm.value,
-        resultPage: currentPage.value || 1,
-      })
-    }
-
-    const buttonLabel = computed(() =>
-      fetchState.value.isFetching
-        ? i18n.t("browsePage.loading")
-        : i18n.t("browsePage.load")
-    )
-    const mainPageElement = ref<HTMLElement | null>(null)
-    onMounted(() => {
-      mainPageElement.value = document.getElementById("main-page")
-    })
-    const isLoadMoreButtonVisible = useElementVisibility(loadMoreSectionRef, {
-      scrollTarget: mainPageElement,
-    })
-
-    // Reset the reachResultEndEvent whenever the route changes,
-    // to make sure the result end is tracked properly whenever
-    // the search query or content type changes
-    watch(route, () => {
-      reachResultEndEventSent.value = false
-    })
-
-    watch(isLoadMoreButtonVisible, (isVisible) => {
-      if (isVisible) {
-        if (reachResultEndEventSent.value) {
-          return
-        }
-        sendReachResultEnd()
-        reachResultEndEventSent.value = true
-      }
-    })
-
-    return {
-      buttonLabel,
-      fetchState,
-      onLoadMore,
-      canLoadMore,
-
-      loadMoreSectionRef,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioList.vue b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
deleted file mode 100644
index e1551bd596..0000000000
--- a/frontend/src/components/VSearchResultsGrid/VAudioList.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <section>
-    <VGridSkeleton
-      v-if="results && results.length === 0 && !fetchState.isFinished"
-      is-for-tab="audio"
-    />
-    <VSnackbar size="large" :is-visible="isSnackbarVisible">
-      <i18n path="audioResults.snackbar.text" tag="p">
-        <template
-          v-for="keyboardKey in ['spacebar', 'left', 'right']"
-          #[keyboardKey]
-        >
-          <kbd :key="keyboardKey" class="font-sans">{{
-            $t(`audioResults.snackbar.${keyboardKey}`)
-          }}</kbd>
-        </template>
-      </i18n>
-    </VSnackbar>
-    <!-- Negative margin compensates for the `p-4` padding in row layout. -->
-    <ol
-      :aria-label="collectionLabel"
-      class="-mx-2 flex flex-col md:-mx-4"
-      :class="kind === 'related' ? 'gap-4' : 'gap-2 md:gap-1'"
-    >
-      <VAudioResult
-        v-for="audio in results"
-        :key="audio.id"
-        :search-term="searchTerm"
-        :audio="audio"
-        layout="row"
-        :size="audioTrackSize"
-        :kind="kind"
-      />
-    </ol>
-    <footer v-if="kind !== 'related'" class="mt-4">
-      <VLoadMoreOld />
-    </footer>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
-
-import type { AudioDetail } from "~/types/media"
-import type { FetchState } from "~/types/fetch-state"
-import type { ResultKind } from "~/types/result"
-import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
-
-import { useSearchStore } from "~/stores/search"
-
-import { useUiStore } from "~/stores/ui"
-
-import VLoadMoreOld from "~/components/VLoadMoreOld.vue"
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
-import VSnackbar from "~/components/VSnackbar.vue"
-import VAudioResult from "~/components/VSearchResultsGrid/VAudioResult.vue"
-
-/**
- * This component shows a loading skeleton if the results are not yet loaded,
- * and then shows the list of audio, with the Load more button if needed.
- */
-export default defineComponent({
-  name: "VAudioList",
-  components: {
-    VAudioResult,
-    VSnackbar,
-    VGridSkeleton,
-    VLoadMoreOld,
-  },
-  props: {
-    results: {
-      type: Array as PropType<AudioDetail[]>,
-      default: () => [],
-    },
-    /**
-     * If used for Related audio, do not show the Load more button.
-     */
-    kind: {
-      type: String as PropType<ResultKind>,
-      required: true,
-    },
-    fetchState: {
-      type: Object as PropType<FetchState>,
-      required: true,
-    },
-    /**
-     * The label used for the list of audio for accessibility.
-     */
-    collectionLabel: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { isVisible: isSnackbarVisible } = useAudioSnackbar()
-
-    const uiStore = useUiStore()
-
-    const audioTrackSize = computed(() => {
-      if (props.kind === "related") {
-        return uiStore.isBreakpoint("sm") ? "m" : "s"
-      } else {
-        return !uiStore.isBreakpoint("sm")
-          ? "s"
-          : uiStore.isBreakpoint("xl")
-            ? "l"
-            : "m"
-      }
-    })
-
-    const searchStore = useSearchStore()
-    const searchTerm = computed(() => searchStore.searchTerm)
-
-    return {
-      audioTrackSize,
-      searchTerm,
-      isSnackbarVisible,
-    }
-  },
-})
-</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue b/frontend/src/components/VSearchResultsGrid/VImageGrid.vue
deleted file mode 100644
index 015f029c0f..0000000000
--- a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <section>
-    <VGridSkeleton
-      v-if="results && !results.length && !fetchState.isFinished"
-      is-for-tab="image"
-    />
-    <ol class="image-grid flex flex-wrap gap-4" :aria-label="imageGridLabel">
-      <VImageCell
-        v-for="image in results"
-        :key="image.id"
-        :image="image"
-        :search-term="searchTerm"
-        aspect-ratio="intrinsic"
-        :kind="kind"
-        :related-to="relatedTo"
-      />
-    </ol>
-    <footer v-if="kind !== 'related'" class="pt-4">
-      <VLoadMoreOld />
-    </footer>
-  </section>
-</template>
-
-<script lang="ts">
-/**
- * This component receives an array of images as a prop, and
- * is responsible for displaying them as a grid.
- * It can also fetch more images when 'Load More' is clicked.
- * Used to display both image search results, and related images.
- */
-import { computed, defineComponent, PropType } from "vue"
-
-import { useSearchStore } from "~/stores/search"
-import { useRelatedMediaStore } from "~/stores/media/related-media"
-
-import type { FetchState } from "~/types/fetch-state"
-import type { ImageDetail } from "~/types/media"
-import type { ResultKind } from "~/types/result"
-
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
-import VLoadMoreOld from "~/components/VLoadMoreOld.vue"
-import VImageCell from "~/components/VImageCell/VImageCell.vue"
-
-export default defineComponent({
-  name: "ImageGrid",
-  components: { VGridSkeleton, VLoadMoreOld, VImageCell },
-  props: {
-    results: {
-      type: Array as PropType<ImageDetail[]>,
-      default: () => [],
-    },
-    /**
-     * `VImageGrid` is used for the image search results, related images,
-     * and the image collection page.
-     * The load more button is not shown for related images.
-     */
-    kind: {
-      type: String as PropType<ResultKind>,
-      default: "search",
-    },
-    fetchState: {
-      type: Object as PropType<FetchState>,
-      required: true,
-    },
-    imageGridLabel: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const searchStore = useSearchStore()
-
-    const searchTerm = computed(() => searchStore.searchTerm)
-
-    const relatedTo = computed(() => {
-      return props.kind === "related"
-        ? useRelatedMediaStore().mainMediaId
-        : null
-    })
-
-    return { searchTerm, relatedTo }
-  },
-})
-</script>
-
-<style scoped>
-@screen md {
-  .image-grid:after {
-    /**
-   * This keeps the last item in the results from expanding to fill
-   * all available space, which can result in a final row with a
-   * single, 100% wide image.
-   */
-
-    content: "";
-    flex-grow: 999999999;
-  }
-}
-</style>

From d004240402de4f3b97db76ca576c12d643bd749a Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 15 Mar 2024 22:36:17 +0300
Subject: [PATCH 6/9] Fix bugs discovered during code review

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/composables/use-collection.ts  | 66 ------------------
 frontend/src/composables/use-search-type.ts |  9 ++-
 frontend/src/pages/audio/collection.vue     | 74 +++++++++++++++------
 frontend/src/pages/image/collection.vue     | 68 ++++++++++++++-----
 frontend/src/pages/search.vue               | 14 +---
 frontend/src/stores/media/index.ts          |  3 -
 6 files changed, 115 insertions(+), 119 deletions(-)
 delete mode 100644 frontend/src/composables/use-collection.ts

diff --git a/frontend/src/composables/use-collection.ts b/frontend/src/composables/use-collection.ts
deleted file mode 100644
index 4c83262614..0000000000
--- a/frontend/src/composables/use-collection.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { computed, ref } from "vue"
-
-import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
-import { useI18n } from "~/composables/use-i18n"
-import type { DetailFromMediaType } from "~/types/media"
-import type { SupportedMediaType } from "~/constants/media"
-
-export const useCollection = <T extends SupportedMediaType>({
-  mediaType,
-}: {
-  mediaType: T
-}) => {
-  const mediaStore = useMediaStore()
-  const searchStore = useSearchStore()
-
-  const collectionParams = computed(() => searchStore.collectionParams)
-  const isFetching = computed(() => mediaStore.fetchState.isFetching)
-
-  const media = ref<DetailFromMediaType<typeof mediaType>[]>([])
-  const creatorUrl = ref<string>()
-
-  const i18n = useI18n()
-
-  const collectionLabel = computed(() => {
-    if (!collectionParams.value) {
-      return ""
-    }
-    const { collection, ...params } = collectionParams.value
-    return i18n
-      .t(`collection.label.${collection}.image`, { ...params })
-      .toString()
-  })
-
-  const fetchMedia = async (
-    { shouldPersistMedia }: { shouldPersistMedia: boolean } = {
-      shouldPersistMedia: false,
-    }
-  ) => {
-    if (mediaStore._searchType !== mediaType) {
-      throw new Error(
-        `Search type is incorrectly set in the store to ${mediaStore._searchType} when it should be "${mediaType}"`
-      )
-    }
-    media.value = (await mediaStore.fetchMedia({
-      shouldPersistMedia,
-    })) as (typeof media)["value"]
-    creatorUrl.value =
-      media.value.length > 0 ? media.value[0].creator_url : undefined
-  }
-
-  const handleLoadMore = async () => {
-    await fetchMedia({ shouldPersistMedia: true })
-  }
-
-  const results = computed(() => ({ type: mediaType, items: media.value }))
-
-  return {
-    results,
-    creatorUrl,
-    fetchMedia,
-    handleLoadMore,
-    collectionLabel,
-    isFetching,
-  }
-}
diff --git a/frontend/src/composables/use-search-type.ts b/frontend/src/composables/use-search-type.ts
index 970b888a0c..4e0d4f218e 100644
--- a/frontend/src/composables/use-search-type.ts
+++ b/frontend/src/composables/use-search-type.ts
@@ -11,7 +11,6 @@ import {
   SearchType,
 } from "~/constants/media"
 
-import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
@@ -65,8 +64,14 @@ export default function useSearchType() {
       next: searchType,
       component: componentName,
     })
+
+    // `setActiveType` is called after the search middleware
+    // ran and updated the search store state
+    // TODO: Figure out why
+    if (activeType.value === searchType) {
+      return
+    }
     useSearchStore().setSearchType(searchType)
-    useMediaStore().clearMedia()
     previousSearchType.value = searchType
   }
 
diff --git a/frontend/src/pages/audio/collection.vue b/frontend/src/pages/audio/collection.vue
index e5d6aed02f..9c01fd0a59 100644
--- a/frontend/src/pages/audio/collection.vue
+++ b/frontend/src/pages/audio/collection.vue
@@ -4,22 +4,29 @@
       v-if="collectionParams"
       search-term=""
       :is-fetching="isFetching"
-      :results="results"
+      :results="{ type: 'audio', items: media }"
       :collection-label="collectionLabel"
       :collection-params="collectionParams"
-      @load-more="handleLoadMore"
+      @load-more="loadMore"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, useFetch, useMeta } from "@nuxtjs/composition-api"
-import { computed } from "vue"
+import {
+  defineComponent,
+  useFetch,
+  useMeta,
+  useRoute,
+} from "@nuxtjs/composition-api"
+import { computed, ref, watch } from "vue"
 
 import { collectionMiddleware } from "~/middleware/collection"
 import { useSearchStore } from "~/stores/search"
-import { useCollection } from "~/composables/use-collection"
-import { AUDIO } from "~/constants/media"
+
+import { useMediaStore } from "~/stores/media"
+import type { AudioDetail } from "~/types/media"
+import { useI18n } from "~/composables/use-i18n"
 
 import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
@@ -29,36 +36,63 @@ export default defineComponent({
   layout: "content-layout",
   middleware: collectionMiddleware,
   setup() {
+    const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
 
     const collectionParams = computed(() => searchStore.collectionParams)
+    const isFetching = computed(() => mediaStore.fetchState.isFetching)
 
-    const {
-      results,
-      creatorUrl,
-      fetchMedia,
-      handleLoadMore,
-      collectionLabel,
-      isFetching,
-    } = useCollection({
-      mediaType: AUDIO,
+    const media = ref<AudioDetail[]>([])
+    const creatorUrl = ref<string>()
+
+    const i18n = useI18n()
+
+    const collectionLabel = computed(() => {
+      if (!collectionParams.value) {
+        return ""
+      }
+      const { collection, ...params } = collectionParams.value
+      return i18n
+        .t(`collection.label.${collection}.audio`, { ...params })
+        .toString()
+    })
+
+    const fetchMedia = async (
+      { shouldPersistMedia }: { shouldPersistMedia: boolean } = {
+        shouldPersistMedia: false,
+      }
+    ) => {
+      media.value = (await mediaStore.fetchMedia({
+        shouldPersistMedia,
+      })) as (typeof media)["value"]
+      creatorUrl.value =
+        media.value.length > 0 ? media.value[0].creator_url : undefined
+    }
+    const loadMore = () => {
+      fetchMedia({ shouldPersistMedia: true })
+    }
+
+    useMeta({
+      meta: [{ hid: "robots", name: "robots", content: "all" }],
     })
 
     useFetch(async () => {
       await fetchMedia()
     })
 
-    useMeta({
-      meta: [{ hid: "robots", name: "robots", content: "all" }],
+    // Fetch media when the route changes, e.g. when the user navigates from
+    // a creator collection page to a source collection page.
+    const route = useRoute()
+    watch(route, () => {
+      fetchMedia()
     })
 
     return {
-      results,
       collectionParams,
       isFetching,
-      creatorUrl,
+      media,
       collectionLabel,
-      handleLoadMore,
+      loadMore,
     }
   },
   head: {},
diff --git a/frontend/src/pages/image/collection.vue b/frontend/src/pages/image/collection.vue
index 133dba9257..4cbb5d9a8d 100644
--- a/frontend/src/pages/image/collection.vue
+++ b/frontend/src/pages/image/collection.vue
@@ -4,22 +4,28 @@
       v-if="collectionParams"
       search-term=""
       :is-fetching="isFetching"
-      :results="results"
+      :results="{ type: 'image', items: media }"
       :collection-label="collectionLabel"
       :collection-params="collectionParams"
-      @load-more="handleLoadMore"
+      @load-more="loadMore"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, useFetch, useMeta } from "@nuxtjs/composition-api"
-import { computed } from "vue"
+import {
+  defineComponent,
+  useFetch,
+  useMeta,
+  useRoute,
+} from "@nuxtjs/composition-api"
+import { computed, ref, watch } from "vue"
 
 import { collectionMiddleware } from "~/middleware/collection"
-import { useCollection } from "~/composables/use-collection"
+import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
-import { IMAGE } from "~/constants/media"
+import type { ImageDetail } from "~/types/media"
+import { useI18n } from "~/composables/use-i18n"
 
 import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
@@ -29,21 +35,42 @@ export default defineComponent({
   layout: "content-layout",
   middleware: collectionMiddleware,
   setup() {
+    const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
 
     const collectionParams = computed(() => searchStore.collectionParams)
+    const isFetching = computed(() => mediaStore.fetchState.isFetching)
 
-    const {
-      results,
-      creatorUrl,
-      fetchMedia,
-      handleLoadMore,
-      collectionLabel,
-      isFetching,
-    } = useCollection({
-      mediaType: IMAGE,
+    const media = ref<ImageDetail[]>([])
+    const creatorUrl = ref<string>()
+
+    const i18n = useI18n()
+
+    const collectionLabel = computed(() => {
+      if (!collectionParams.value) {
+        return ""
+      }
+      const { collection, ...params } = collectionParams.value
+      return i18n
+        .t(`collection.label.${collection}.image`, { ...params })
+        .toString()
     })
 
+    const fetchMedia = async (
+      { shouldPersistMedia }: { shouldPersistMedia: boolean } = {
+        shouldPersistMedia: false,
+      }
+    ) => {
+      media.value = (await mediaStore.fetchMedia({
+        shouldPersistMedia,
+      })) as (typeof media)["value"]
+      creatorUrl.value =
+        media.value.length > 0 ? media.value[0].creator_url : undefined
+    }
+    const loadMore = () => {
+      fetchMedia({ shouldPersistMedia: true })
+    }
+
     useMeta({
       meta: [{ hid: "robots", name: "robots", content: "all" }],
     })
@@ -52,13 +79,20 @@ export default defineComponent({
       await fetchMedia()
     })
 
+    // Fetch media when the route changes, e.g. when the user navigates from
+    // a creator collection page to a source collection page.
+    const route = useRoute()
+    watch(route, () => {
+      fetchMedia()
+    })
+
     return {
       collectionParams,
-      results,
       isFetching,
       creatorUrl,
       collectionLabel,
-      handleLoadMore,
+      loadMore,
+      media,
     }
   },
   head: {},
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 51672e4b1f..29134ae2e1 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -147,23 +147,15 @@ export default defineComponent({
     const isFetching = computed(() => fetchState.value.isFetching)
 
     /**
-     * Search middleware runs when the path changes. This watcher
-     * is necessary to handle the query changes.
-     *
-     * It updates the search store state from the URL query,
-     * fetches media, and scrolls to top if necessary.
+     * The search middleware updates the search store on every path or query
+     * change.
+     * This watcher fetches media, and scrolls to top if necessary.
      */
     watch(route, async (newRoute, oldRoute) => {
       if (
         newRoute.path !== oldRoute.path ||
         !isShallowEqualObjects(newRoute.query, oldRoute.query)
       ) {
-        const { query: urlQuery, path } = newRoute
-        searchStore.setSearchStateFromUrl({ urlQuery, path })
-
-        const mediaStore = useMediaStore()
-        mediaStore.clearMedia()
-
         /**
          * By default, Nuxt only scrolls to top when the path changes.
          * This is a workaround to scroll to top when the query changes.
diff --git a/frontend/src/stores/media/index.ts b/frontend/src/stores/media/index.ts
index 959e14fe45..b87c55e0a4 100644
--- a/frontend/src/stores/media/index.ts
+++ b/frontend/src/stores/media/index.ts
@@ -416,9 +416,6 @@ export const useMediaStore = defineStore("media", {
     async fetchMedia(payload: { shouldPersistMedia?: boolean } = {}) {
       const mediaType = this._searchType
       const shouldPersistMedia = Boolean(payload.shouldPersistMedia)
-      if (!shouldPersistMedia) {
-        this.clearMedia()
-      }
 
       const mediaToFetch = this._fetchableMediaTypes
 

From 3217c7f82c2c65c2067f1bd162034b1eb93f56bf Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 18 Mar 2024 18:54:18 +0300
Subject: [PATCH 7/9] Fix i18n key

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/pages/audio/collection.vue | 2 +-
 frontend/src/pages/image/collection.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/audio/collection.vue b/frontend/src/pages/audio/collection.vue
index 9c01fd0a59..5c26b87bc5 100644
--- a/frontend/src/pages/audio/collection.vue
+++ b/frontend/src/pages/audio/collection.vue
@@ -53,7 +53,7 @@ export default defineComponent({
       }
       const { collection, ...params } = collectionParams.value
       return i18n
-        .t(`collection.label.${collection}.audio`, { ...params })
+        .t(`collection.ariaLabel.${collection}.audio`, { ...params })
         .toString()
     })
 
diff --git a/frontend/src/pages/image/collection.vue b/frontend/src/pages/image/collection.vue
index 4cbb5d9a8d..dc58c0584f 100644
--- a/frontend/src/pages/image/collection.vue
+++ b/frontend/src/pages/image/collection.vue
@@ -52,7 +52,7 @@ export default defineComponent({
       }
       const { collection, ...params } = collectionParams.value
       return i18n
-        .t(`collection.label.${collection}.image`, { ...params })
+        .t(`collection.ariaLabel.${collection}.image`, { ...params })
         .toString()
     })
 

From 273f585aee096449d106f4d175b47492f84cdf02 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 19 Mar 2024 14:28:28 +0300
Subject: [PATCH 8/9] Update `canLoadMore` computation

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 frontend/src/components/VLoadMore.vue | 21 ++++++++-------------
 frontend/src/stores/media/index.ts    | 13 +++++++++----
 frontend/src/stores/search.ts         |  8 ++------
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/VLoadMore.vue b/frontend/src/components/VLoadMore.vue
index a6e0c9bbc5..cdf8453af5 100644
--- a/frontend/src/components/VLoadMore.vue
+++ b/frontend/src/components/VLoadMore.vue
@@ -25,11 +25,9 @@ import {
 import { storeToRefs } from "pinia"
 import { useElementVisibility } from "@vueuse/core"
 
-import { useRoute } from "@nuxtjs/composition-api"
+import { useContext, useRoute } from "@nuxtjs/composition-api"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useMediaStore } from "~/stores/media"
-import { useSearchStore } from "~/stores/search"
 import { useI18n } from "~/composables/use-i18n"
 import { defineEvent } from "~/types/emits"
 
@@ -69,8 +67,7 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18n()
     const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const { sendCustomEvent } = useAnalytics()
+    const { $sendCustomEvent } = useContext()
 
     const { currentPage } = storeToRefs(mediaStore)
 
@@ -84,13 +81,11 @@ export default defineComponent({
 
     /**
      * Whether we should show the "Load more" button.
-     * If the user has entered a search term, there is at least 1 page of results,
-     * there has been no fetching error, and there are more results to fetch,
-     * we show the button.
+     * If the fetching for the current query has started, there is at least
+     * 1 page of results, there has been no fetching error, and there are
+     * more results to fetch, we show the button.
      */
-    const canLoadMore = computed(
-      () => mediaStore.canLoadMore && searchStore.searchStarted
-    )
+    const canLoadMore = computed(() => mediaStore.canLoadMore)
 
     const reachResultEndEventSent = ref(false)
     /**
@@ -107,7 +102,7 @@ export default defineComponent({
 
       reachResultEndEventSent.value = false
 
-      sendCustomEvent("LOAD_MORE_RESULTS", eventPayload.value)
+      $sendCustomEvent("LOAD_MORE_RESULTS", eventPayload.value)
 
       emit("load-more")
     }
@@ -117,7 +112,7 @@ export default defineComponent({
       // currentPage is updated from 0, so we use the value or 1.
       // The currentPage can never be 0 here because then the loadMore
       // button would not be visible.
-      sendCustomEvent("REACH_RESULT_END", eventPayload.value)
+      $sendCustomEvent("REACH_RESULT_END", eventPayload.value)
     }
 
     const buttonLabel = computed(() =>
diff --git a/frontend/src/stores/media/index.ts b/frontend/src/stores/media/index.ts
index b87c55e0a4..5c35ee48e6 100644
--- a/frontend/src/stores/media/index.ts
+++ b/frontend/src/stores/media/index.ts
@@ -24,6 +24,10 @@ import { isSearchTypeSupported, useSearchStore } from "~/stores/search"
 import { useRelatedMediaStore } from "~/stores/media/related-media"
 import { deepFreeze } from "~/utils/deep-freeze"
 
+interface SearchFetchState extends Omit<FetchState, "hasStarted"> {
+  hasStarted: boolean
+}
+
 export type MediaStoreResult = {
   count: number
   pageCount: number
@@ -37,8 +41,8 @@ export interface MediaState {
     image: MediaStoreResult
   }
   mediaFetchState: {
-    audio: FetchState
-    image: FetchState
+    audio: SearchFetchState
+    image: SearchFetchState
   }
   currentPage: number
 }
@@ -143,12 +147,12 @@ export const useMediaStore = defineStore("media", {
      * Search fetching state for selected search type. For 'All content', aggregates
      * the values for supported media types.
      */
-    fetchState(): FetchState {
+    fetchState(): SearchFetchState {
       if (this._searchType === ALL_MEDIA) {
         /**
          * For all_media, we return 'All media fetching error' if all types have some kind of error.
          */
-        const atLeastOne = (property: keyof FetchState) =>
+        const atLeastOne = (property: keyof SearchFetchState) =>
           supportedMediaTypes.some(
             (type) => this.mediaFetchState[type][property]
           )
@@ -289,6 +293,7 @@ export const useMediaStore = defineStore("media", {
 
     canLoadMore(): boolean {
       return (
+        this.fetchState.hasStarted &&
         !this.fetchState.fetchingError &&
         !this.fetchState.isFinished &&
         this.resultCount > 0
diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
index b254a2f29f..9ba0975c39 100644
--- a/frontend/src/stores/search.ts
+++ b/frontend/src/stores/search.ts
@@ -149,11 +149,6 @@ export const useSearchStore = defineStore("search", {
     state.recentSearches = useStorage<string[]>("recent-searches", [])
   },
   getters: {
-    searchStarted(state) {
-      return state.strategy === "default"
-        ? state.searchTerm.length > 0
-        : state.collectionParams !== null
-    },
     filterCategories(state) {
       return Object.keys(state.filters) as FilterCategory[]
     },
@@ -331,7 +326,8 @@ export const useSearchStore = defineStore("search", {
       this.clearFilters()
     },
     /**
-     * Called when a /search path is server-rendered.
+     * Called before navigating to a `/search` path, and when the
+     * path after `/search` or query parameters change.
      */
     setSearchStateFromUrl({
       path,

From d10d4437529bb05bb56db109fca2559597b2b9cb Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 19 Mar 2024 17:15:23 +0300
Subject: [PATCH 9/9] Update Story

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../components/meta/CustomButtonComponents.stories.mdx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/meta/CustomButtonComponents.stories.mdx b/frontend/src/components/meta/CustomButtonComponents.stories.mdx
index 81933fafbf..d93effa84a 100644
--- a/frontend/src/components/meta/CustomButtonComponents.stories.mdx
+++ b/frontend/src/components/meta/CustomButtonComponents.stories.mdx
@@ -6,7 +6,6 @@ import {
   Story,
 } from "@storybook/addon-docs"
 import VLoadMore from "~/components/VLoadMore.vue"
-import { useSearchStore } from "~/stores/search"
 import { useMediaStore } from "~/stores/media"
 
 <Meta title="Components/CustomButtonComponents" />
@@ -17,9 +16,8 @@ export const Template = (args) => ({
   `,
   components: { VLoadMore },
   setup() {
-    const searchStore = useSearchStore()
-    searchStore.setSearchTerm("cat")
     const mediaStore = useMediaStore()
+    mediaStore._startFetching("image")
     mediaStore.results.image.count = 1
     return { args }
   },
@@ -37,6 +35,12 @@ export const Template = (args) => ({
     parameters={{
       viewport: { defaultViewport: "sm" },
     }}
+    args={{
+      kind: "search",
+      searchType: "image",
+      searchTerm: "cat",
+      isFetching: false,
+    }}
   >
     {Template.bind({})}
   </Story>