Use nextTick instead of setTimeout to wait until Vue has rendered cha…

…nges
FreeTubeApp · Sep 7, 2024 · 1ed2bb2 · 1ed2bb2
1 parent 41fe478
commit 1ed2bb2
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 18 deletions.
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
@@ -102,7 +102,7 @@ export default defineComponent({
         if (this.dropdownShown && !this.useModal) {
           // wait until the dropdown is visible
           // then focus it so we can hide it automatically when it loses focus
-          setTimeout(() => {
+          nextTick(() => {
             this.$refs.dropdown?.focus()
           })
         }

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -53,7 +53,7 @@ export default defineComponent({
       if (this.profileListShown) {
         // wait until the profile list is visible
         // then focus it so we can hide it automatically when it loses focus
-        setTimeout(() => {
+        nextTick(() => {
           this.$refs.profileList?.$el?.focus()
         })
       }

diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import FtToastEvents from './ft-toast-events.js'
 
 let id = 0
@@ -38,7 +38,7 @@ export default defineComponent({
         id: id++
       }
       toast.timeout = setTimeout(this.close, time || 3000, toast)
-      setTimeout(() => { toast.isOpen = true })
+      nextTick(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
         this.remove(0)
       }

diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
@@ -274,7 +274,7 @@ export default defineComponent({
         if (dropdownShown && window.innerWidth >= 901) {
           // adds a slight delay so we know that the dropdown has shown up
           // and won't mess up our scrolling
-          setTimeout(() => {
+          nextTick(() => {
             this.$emit('scroll-to-info-area')
           })
         }

diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -169,7 +169,7 @@ export default defineComponent({
 
         this.isLoading = false
 
-        setTimeout(() => {
+        nextTick(() => {
           this.$refs.liveChatComments?.scrollTo({
             top: this.$refs.liveChatComments.scrollHeight,
             behavior: 'instant'
@@ -278,7 +278,7 @@ export default defineComponent({
       this.comments.push(comment)
 
       if (!this.isLoading && this.stayAtBottom) {
-        setTimeout(() => {
+        nextTick(() => {
           this.$refs.liveChatComments?.scrollTo({
             top: this.$refs.liveChatComments.scrollHeight,
             behavior: this.scrollingBehaviour

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
@@ -289,9 +289,9 @@ export default defineComponent({
       // Create a new array to avoid changing array in data store state
       // it could be user playlist or cache playlist
       this.playlistItems = this.playlistItems.toReversed()
-      setTimeout(() => {
+      nextTick(() => {
         this.isLoading = false
-      }, 1)
+      })
     },
 
     togglePauseOnCurrentVideo: function () {

diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import debounce from 'lodash.debounce'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
@@ -427,7 +427,7 @@ export default defineComponent({
           // Stop users from spamming the load more button, by replacing it with a loading symbol until the newly added items are renderered
           this.isLoadingMore = true
 
-          setTimeout(() => {
+          nextTick(() => {
             if (this.userPlaylistVisibleLimit + 100 < this.videoCount) {
               this.userPlaylistVisibleLimit += 100
             } else {

diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
@@ -110,7 +110,7 @@ export default defineComponent({
         this.trendingInstance = instance
 
         this.$store.commit('setTrendingCache', { value: results, page: this.currentTab })
-        setTimeout(() => {
+        nextTick(() => {
           this.$refs[this.currentTab]?.focus()
         })
       } catch (err) {
@@ -158,7 +158,7 @@ export default defineComponent({
         this.shownResults = returnData
         this.isLoading = false
         this.$store.commit('setTrendingCache', { value: returnData, page: this.currentTab })
-        setTimeout(() => {
+        nextTick(() => {
           this.$refs[this.currentTab]?.focus()
         })
       }).catch((err) => {