updated rollup plugin node-resolve; improved favorites refresh animation

src/js/app.js

@@ -60,11 +60,11 @@ socket.on('logging_in', function () {
 socket.on('init_autologin', function () {
 	let arl = localStorage.getItem('arl')
 	let accountNum = localStorage.getItem('accountNum')
-	if (arl){
+	if (arl) {
 		arl = arl.trim()
-		if (accountNum != 0){
+		if (accountNum != 0) {
 			socket.emit('login', arl, true, accountNum)
-		}else{
+		} else {
 			socket.emit('login', arl)
 		}
 	}
@@ -130,27 +130,27 @@ socket.on('logged_out', function () {
 })
 
 socket.on('cancellingCurrentItem', function (uuid) {
-	toast('Cancelling current item.', 'loading', false, 'cancelling_'+uuid)
+	toast('Cancelling current item.', 'loading', false, 'cancelling_' + uuid)
 })
 
 socket.on('currentItemCancelled', function (uuid) {
-	toast('Current item cancelled.', 'done', true, 'cancelling_'+uuid)
+	toast('Current item cancelled.', 'done', true, 'cancelling_' + uuid)
 })
 
 socket.on('startAddingArtist', function (data) {
-	toast(`Adding ${data.name} albums to queue`, 'loading', false, 'artist_'+data.id)
+	toast(`Adding ${data.name} albums to queue`, 'loading', false, 'artist_' + data.id)
 })
 
 socket.on('finishAddingArtist', function (data) {
-	toast(`Added ${data.name} albums to queue`, 'done', true, 'artist_'+data.id)
+	toast(`Added ${data.name} albums to queue`, 'done', true, 'artist_' + data.id)
 })
 
 socket.on('startConvertingSpotifyPlaylist', function (id) {
-	toast("Converting spotify tracks to deezer tracks", 'loading', false, 'spotifyplaylist_'+id)
+	toast('Converting spotify tracks to deezer tracks', 'loading', false, 'spotifyplaylist_' + id)
 })
 
 socket.on('finishConvertingSpotifyPlaylist', function (id) {
-	toast("Spotify playlist converted", 'done', true, 'spotifyplaylist_'+id)
+	toast('Spotify playlist converted', 'done', true, 'spotifyplaylist_' + id)
 })
 
 socket.on('errorMessage', function (error) {

src/js/modules/components/favorites-tab.js

@@ -5,6 +5,7 @@ import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
 import Utils from '../utils.js'
+import { toast } from '../toasts'
 
 const FavoritesTab = new Vue({
 	data() {
@@ -47,18 +48,29 @@ const FavoritesTab = new Vue({
 		updated_userTracks(data) {
 			this.tracks = data
 		},
-		reloadTabs(){
-			this.$refs.reloadButton.classList.add("spin")
+		reloadTabs() {
+			this.$refs.reloadButton.classList.add('spin')
 			socket.emit('update_userFavorites')
-			if (localStorage.getItem('spotifyUser')) socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
+			if (localStorage.getItem('spotifyUser'))
+				socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
 		},
-		updated_userFavorites(data){
+		updated_userFavorites(data) {
 			const { tracks, albums, artists, playlists } = data
 			this.tracks = tracks
 			this.albums = albums
 			this.artists = artists
 			this.playlists = playlists
-			this.$refs.reloadButton.classList.remove("spin")
+
+			// Removing animation class only when the animation has completed an iteration
+			// Prevents animation ugly stutter
+			this.$refs.reloadButton.addEventListener(
+				'animationiteration',
+				() => {
+					this.$refs.reloadButton.classList.remove('spin')
+					toast('Refresh completed!', 'done', true, 'favorites-refresh-toast')
+				},
+				{ once: true }
+			)
 		},
 		initFavorites(data) {
 			this.updated_userFavorites(data)

src/styles/scss/base/_animations.scss

@@ -0,0 +1,9 @@
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}

src/styles/scss/style.scss

@@ -1,6 +1,7 @@
 @import './base/base';
 @import './base/normalize';
 @import './base/mixins';
+@import './base/animations';
 
 @import './globals/globals';
 @import './globals/tables';

src/styles/scss/tabs/_favorites-tab.scss

@@ -2,26 +2,14 @@
 	color: var(--accent-text);
 }
 
-div.reload-button {
-	width: 36px;
-	height: 36px;
-}
-div.reload-button i{
-	padding: 6px;
-}
+.reload-button {
+	&.reload-button--inline {
+		display: inline-block;
+	}
 
-div.reload-button.spin {
-	animation-name: spin;
-  animation-duration: 0.5s;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-out;
-}
-
-@keyframes spin {
-    from {
-        transform:rotate(0deg);
-    }
-    to {
-        transform:rotate(360deg);
-    }
+	&.spin {
+		i {
+			animation: spin 500ms infinite ease-out reverse;
+		}
+	}
 }

src/styles/scss/tabs/_tabs.scss

@@ -9,7 +9,7 @@
 }
 
 .tab button {
-	background-color: var(--primary-background);
+	background-color: var(--main-background);
 	color: var(--foreground);
 }
 
@@ -42,8 +42,7 @@
 	&__tab {
 		flex: 1;
 		font-size: 1.2rem;
-		// width: 10rem;
-		padding: 1em;
+		padding: .8em;
 		border-top: 3px solid var(--foreground);
 		text-align: center;