diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index 90ca0fb20f555..6c12092874425 100644 --- 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 index 3dc775de48391..3e8eeffeb8e93 100644 --- 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 index c85fbf55f65cc..15697ca25061d 100644 --- 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 index cab55a969e06c..ed57aa9f23d86 100644 --- 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 index 6a6daaefab93f..973eaddc551a9 100644 --- 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 index e9fad636e8999..ec0ccd27cfc1c 100644 --- 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 index fc7c8c798b431..7e838e955c0b0 100644 --- 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 index a8717845ada1f..533f9cf8b56e5 100644 --- 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) => {