Only refresh current trending tab (#6667)

* only refresh current trending tab * fix refresh message not showing
FreeTubeApp · Jan 30, 2025 · ffdd1ec · ffdd1ec
1 parent 80b46da
commit ffdd1ec
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 30 deletions.
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
@@ -54,7 +54,12 @@ const state = {
   externalPlayerValues: [],
   externalPlayerCmdArguments: {},
   lastPopularRefreshTimestamp: '',
-  lastTrendingRefreshTimestamp: '',
+  lastTrendingRefreshTimestamp: {
+    default: '',
+    music: '',
+    gaming: '',
+    movies: ''
+  },
   subscriptionFirstAutoFetchRunData: {
     videos: false,
     liveStreams: false,
@@ -905,21 +910,24 @@ const mutations = {
     state.trendingCache[page] = value
   },
 
-  setLastTrendingRefreshTimestamp (state, timestamp) {
-    state.lastTrendingRefreshTimestamp = timestamp
+  /**
+   * @param {typeof state} state
+   * @param {{page: 'default' | 'music' | 'gaming' | 'movies', timestamp: Date}} param1
+   */
+  setLastTrendingRefreshTimestamp (state, { page, timestamp }) {
+    state.lastTrendingRefreshTimestamp[page] = timestamp
   },
 
   setLastPopularRefreshTimestamp (state, timestamp) {
     state.lastPopularRefreshTimestamp = timestamp
   },
 
-  clearTrendingCache(state) {
-    state.trendingCache = {
-      default: null,
-      music: null,
-      gaming: null,
-      movies: null
-    }
+  /**
+   * @param {typeof state} state
+   * @param {'default' | 'music' | 'gaming' | 'movies'} page
+   */
+  clearTrendingCache(state, page) {
+    state.trendingCache[page] = null
   },
 
   setCachedPlaylist(state, value) {

diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <FtLoader
-      v-if="isLoading"
-      :fullscreen="true"
-    />
     <FtCard
-      v-else
       class="card"
     >
       <h2>
@@ -106,14 +101,21 @@
           {{ $t("Trending.Movies").toUpperCase() }}
         </div>
       </FtFlexBox>
-      <FtElementList
+      <div
         id="trendingPanel"
         role="tabpanel"
-        :data="shownResults"
-      />
+      >
+        <FtLoader
+          v-if="isLoading[currentTab]"
+        />
+        <FtElementList
+          v-else
+          :data="shownResults"
+        />
+      </div>
     </FtCard>
     <FtRefreshWidget
-      :disable-refresh="isLoading"
+      :disable-refresh="isLoading[currentTab]"
       :last-refresh-timestamp="lastTrendingRefreshTimestamp"
       :title="$t('Trending.Trending')"
       @click="getTrendingInfo(true)"
@@ -152,7 +154,7 @@ const backendFallback = computed(() => {
 })
 
 const lastTrendingRefreshTimestamp = computed(() => {
-  return getRelativeTimeFromDate(store.getters.getLastTrendingRefreshTimestamp, true)
+  return getRelativeTimeFromDate(store.getters.getLastTrendingRefreshTimestamp[currentTab.value], true)
 })
 
 /** @type {import('vue').ComputedRef<string>} */
@@ -165,7 +167,7 @@ const trendingCache = computed(() => {
   return store.getters.getTrendingCache
 })
 
-const isLoading = ref(false)
+const isLoading = ref({ default: false, music: false, gaming: false, movies: false })
 const shownResults = shallowRef([])
 
 /** @type {import('vue').Ref<'default' | 'music' | 'gaming' | 'movies'>} */
@@ -190,7 +192,7 @@ function getTrendingInfo(refresh = false) {
       trendingInstance = null
     }
 
-    store.commit('clearTrendingCache')
+    store.commit('clearTrendingCache', currentTab.value)
   }
 
   if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
@@ -199,17 +201,17 @@ function getTrendingInfo(refresh = false) {
     getTrendingInfoLocal()
   }
 
-  store.commit('setLastTrendingRefreshTimestamp', new Date())
+  store.commit('setLastTrendingRefreshTimestamp', { page: currentTab.value, timestamp: new Date() })
 }
 
 async function getTrendingInfoLocal() {
-  isLoading.value = true
+  isLoading.value[currentTab.value] = true
 
   try {
     const { results, instance } = await getLocalTrending(region.value, currentTab.value, trendingInstance)
 
     shownResults.value = results
-    isLoading.value = false
+    isLoading.value[currentTab.value] = false
     trendingInstance = instance
 
     store.commit('setTrendingCache', { value: results, page: currentTab.value })
@@ -226,21 +228,21 @@ async function getTrendingInfoLocal() {
       showToast(t('Falling back to Invidious API'))
       getTrendingInfoInvidious()
     } else {
-      isLoading.value = false
+      isLoading.value[currentTab.value] = false
     }
   }
 }
 
 function getTrendingInfoInvidious() {
-  isLoading.value = true
+  isLoading.value[currentTab.value] = true
 
   getInvidiousTrending(currentTab.value, region.value).then((items) => {
     if (!items) {
       return
     }
 
     shownResults.value = items
-    isLoading.value = false
+    isLoading.value[currentTab.value] = false
     store.commit('setTrendingCache', { value: items, page: currentTab.value })
     nextTick(() => {
       focusTab(currentTab.value)
@@ -256,7 +258,7 @@ function getTrendingInfoInvidious() {
       showToast(t('Falling back to Local API'))
       getTrendingInfoLocal()
     } else {
-      isLoading.value = false
+      isLoading.value[currentTab.value] = false
     }
   })
 }
@@ -332,7 +334,7 @@ function keyboardShortcutHandler(event) {
   switch (event.key.toLowerCase()) {
     case 'f5':
     case KeyboardShortcuts.APP.SITUATIONAL.REFRESH:
-      if (!isLoading.value) {
+      if (!isLoading.value[currentTab.value]) {
         getTrendingInfo(true)
       }
       break