Make isFetching a prop

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

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"
@@ -15,7 +16,7 @@
       />
     </template>
 
-    <template #footer="{ isFetching }">
+    <template #footer>
       <footer class="mb-6 mt-4 lg:mb-10">
         <VLoadMore
           :search-type="results.type"
@@ -59,6 +60,10 @@ export default defineComponent({
       type: Object as PropType<Results>,
       required: true,
     },
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
     searchTerm: {
       type: String,
       required: true,

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,
     }
   },

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(),

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,

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,

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,

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,