refactor(EditPlaylist): playlist gets cleared on modal close, and when loading songs it tells the user that

frontend/src/components/modals/EditPlaylist/index.vue

@@ -195,6 +195,12 @@
 									</div>
 								</template>
 							</draggable>
+							<p
+								v-else-if="gettingSongs"
+								class="nothing-here-text"
+							>
+								Loading songs...
+							</p>
 							<p v-else class="nothing-here-text">
 								This playlist doesn't have any songs.
 							</p>
@@ -283,7 +289,8 @@ export default {
 		return {
 			utils,
 			drag: false,
-			apiDomain: ""
+			apiDomain: "",
+			gettingSongs: false
 		};
 	},
 	computed: {
@@ -325,12 +332,14 @@ export default {
 		})
 	},
 	mounted() {
+		this.gettingSongs = true;
 		this.socket.dispatch("playlists.getPlaylist", this.editing, res => {
 			if (res.status === "success") {
 				// this.playlist = res.data.playlist;
 				// this.playlist.songs.sort((a, b) => a.position - b.position);
 				this.setPlaylist(res.data.playlist);
 			} else new Toast(res.message);
+			this.gettingSongs = false;
 		});
 
 		this.socket.on(
@@ -390,6 +399,9 @@ export default {
 			{ modal: "editPlaylist" }
 		);
 	},
+	beforeUnmount() {
+		this.clearPlaylist();
+	},
 	methods: {
 		isEditable() {
 			return (
@@ -575,6 +587,7 @@ export default {
 		}),
 		...mapActions("modals/editPlaylist", [
 			"setPlaylist",
+			"clearPlaylist",
 			"addSong",
 			"removeSong",
 			"repositionedSong"

frontend/src/store/modules/modals/editPlaylist.js

@@ -10,6 +10,7 @@ export default {
 	actions: {
 		showTab: ({ commit }, tab) => commit("showTab", tab),
 		setPlaylist: ({ commit }, playlist) => commit("setPlaylist", playlist),
+		clearPlaylist: ({ commit }) => commit("clearPlaylist"),
 		addSong: ({ commit }, song) => commit("addSong", song),
 		removeSong: ({ commit }, youtubeId) => commit("removeSong", youtubeId),
 		updatePlaylistSongs: ({ commit }, playlistSongs) =>
@@ -24,6 +25,9 @@ export default {
 			state.playlist = { ...playlist };
 			state.playlist.songs.sort((a, b) => a.position - b.position);
 		},
+		clearPlaylist(state) {
+			state.playlist = { songs: [] };
+		},
 		addSong(state, song) {
 			state.playlist.songs.push(song);
 		},