diff --git a/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts b/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
index a23c56c6..fc6e2db9 100644
--- a/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import { eventBus } from '@/utils'
@@ -5,12 +6,11 @@ import { albumStore, preferenceStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import MainContent from '@/components/layout/main-wrapper/MainContent.vue'
 import AlbumArtOverlay from '@/components/ui/AlbumArtOverlay.vue'
-import Visualizer from '@/components/ui/Visualizer.vue'
 
 new class extends UnitTestCase {
   protected test () {
     it('has a translucent overlay per album', async () => {
-      this.mock(albumStore, 'fetchThumbnail', 'https://foo/bar.jpg')
+      this.mock(albumStore, 'fetchThumbnail').mockResolvedValue('https://foo/bar.jpg')
 
       const { getByTestId } = this.render(MainContent, {
         global: {
@@ -21,9 +21,8 @@ new class extends UnitTestCase {
       })
 
       eventBus.emit('SONG_STARTED', factory<Song>('song'))
-      await this.tick(2) // re-render and fetch album thumbnail
 
-      getByTestId('album-art-overlay')
+      await waitFor(() => getByTestId('album-art-overlay'))
     })
 
     it('does not have a translucent over if configured not so', async () => {
@@ -38,27 +37,24 @@ new class extends UnitTestCase {
       })
 
       eventBus.emit('SONG_STARTED', factory<Song>('song'))
-      await this.tick(2) // re-render and fetch album thumbnail
 
-      expect(await queryByTestId('album-art-overlay')).toBeNull()
+      await waitFor(() => expect(queryByTestId('album-art-overlay')).toBeNull())
     })
 
     it('toggles visualizer', async () => {
       const { getByTestId, queryByTestId } = this.render(MainContent, {
         global: {
           stubs: {
-            Visualizer
+            Visualizer: this.stub('visualizer')
           }
         }
       })
 
       eventBus.emit('TOGGLE_VISUALIZER')
-      await this.tick()
-      getByTestId('visualizer')
+      await waitFor(() => getByTestId('visualizer'))
 
       eventBus.emit('TOGGLE_VISUALIZER')
-      await this.tick()
-      expect(await queryByTestId('visualizer')).toBeNull()
+      await waitFor(() => expect(queryByTestId('visualizer')).toBeNull())
     })
   }
 }
diff --git a/resources/assets/js/components/layout/main-wrapper/MainContent.vue b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
index 23d97de1..467d90e3 100644
--- a/resources/assets/js/components/layout/main-wrapper/MainContent.vue
+++ b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
@@ -34,6 +34,7 @@ import { defineAsyncComponent, ref, toRef } from 'vue'
 import { eventBus } from '@/utils'
 import { preferenceStore } from '@/stores'
 import { useThirdPartyServices } from '@/composables'
+
 import HomeScreen from '@/components/screens/HomeScreen.vue'
 import QueueScreen from '@/components/screens/QueueScreen.vue'
 import AlbumListScreen from '@/components/screens/AlbumListScreen.vue'
@@ -41,8 +42,10 @@ import ArtistListScreen from '@/components/screens/ArtistListScreen.vue'
 import AllSongsScreen from '@/components/screens/AllSongsScreen.vue'
 import PlaylistScreen from '@/components/screens/PlaylistScreen.vue'
 import FavoritesScreen from '@/components/screens/FavoritesScreen.vue'
+import RecentlyPlayedScreen from '@/components/screens/RecentlyPlayedScreen.vue'
+import UploadScreen from '@/components/screens/UploadScreen.vue'
+import SearchExcerptsScreen from '@/components/screens/search/SearchExcerptsScreen.vue'
 
-const RecentlyPlayedScreen = defineAsyncComponent(() => import('@/components/screens/RecentlyPlayedScreen.vue'))
 const UserListScreen = defineAsyncComponent(() => import('@/components/screens/UserListScreen.vue'))
 const AlbumArtOverlay = defineAsyncComponent(() => import('@/components/ui/AlbumArtOverlay.vue'))
 const AlbumScreen = defineAsyncComponent(() => import('@/components/screens/AlbumScreen.vue'))
@@ -50,8 +53,6 @@ const ArtistScreen = defineAsyncComponent(() => import('@/components/screens/Art
 const SettingsScreen = defineAsyncComponent(() => import('@/components/screens/SettingsScreen.vue'))
 const ProfileScreen = defineAsyncComponent(() => import('@/components/screens/ProfileScreen.vue'))
 const YoutubeScreen = defineAsyncComponent(() => import('@/components/screens/YouTubeScreen.vue'))
-const UploadScreen = defineAsyncComponent(() => import('@/components/screens/UploadScreen.vue'))
-const SearchExcerptsScreen = defineAsyncComponent(() => import('@/components/screens/search/SearchExcerptsScreen.vue'))
 const SearchSongResultsScreen = defineAsyncComponent(() => import('@/components/screens/search/SearchSongResultsScreen.vue'))
 const Visualizer = defineAsyncComponent(() => import('@/components/ui/Visualizer.vue'))