refactor(frontend): added dynamic imports where possible

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/pages/Admin/index.vue

@@ -134,7 +134,7 @@ export default {
 	},
 	data() {
 		return {
-			currentTab: "queueSongs"
+			currentTab: ""
 		};
 	},
 	watch: {

frontend/src/pages/Admin/tabs/News.vue

@@ -220,10 +220,10 @@ import { mapActions, mapState, mapGetters } from "vuex";
 import Toast from "toasters";
 import ws from "../../../ws";
 
-import EditNews from "../../../components/modals/EditNews.vue";
-
 export default {
-	components: { EditNews },
+	components: {
+		EditNews: () => import("../../../components/modals/EditNews.vue")
+	},
 	data() {
 		return {
 			editingNewsId: "",

frontend/src/pages/Admin/tabs/Playlists.vue

@@ -72,7 +72,6 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import EditPlaylist from "../../../components/modals/EditPlaylist/index.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
 import ws from "../../../ws";
@@ -80,7 +79,8 @@ import utils from "../../../../js/utils";
 
 export default {
 	components: {
-		EditPlaylist,
+		EditPlaylist: () =>
+			import("../../../components/modals/EditPlaylist/index.vue"),
 		UserIdToUsername,
 		Report: () => import("../../../components/modals/Report.vue"),
 		EditSong: () => import("../../../components/modals/EditSong.vue")

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -97,11 +97,13 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
-import ViewPunishment from "../../../components/modals/ViewPunishment.vue";
 import ws from "../../../ws";
 
 export default {
-	components: { ViewPunishment },
+	components: {
+		ViewPunishment: () =>
+			import("../../../components/modals/ViewPunishment.vue")
+	},
 	data() {
 		return {
 			viewingPunishmentId: "",

frontend/src/pages/Admin/tabs/QueueSongs.vue

@@ -181,7 +181,6 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import EditSong from "../../../components/modals/EditSong.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
 import FloatingBox from "../../../components/ui/FloatingBox.vue";
@@ -191,7 +190,11 @@ import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
 import ws from "../../../ws";
 
 export default {
-	components: { EditSong, UserIdToUsername, FloatingBox },
+	components: {
+		EditSong: () => import("../../../components/modals/EditSong.vue"),
+		UserIdToUsername,
+		FloatingBox
+	},
 	mixins: [ScrollAndFetchHandler],
 	data() {
 		return {

frontend/src/pages/Admin/tabs/Reports.vue

@@ -73,11 +73,13 @@ import { formatDistance } from "date-fns";
 import Toast from "toasters";
 import ws from "../../../ws";
 
-import ViewReport from "../../../components/modals/ViewReport.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
 export default {
-	components: { ViewReport, UserIdToUsername },
+	components: {
+		ViewReport: () => import("../../../components/modals/ViewReport.vue"),
+		UserIdToUsername
+	},
 	data() {
 		return {
 			viewingReportId: "",

frontend/src/pages/Admin/tabs/Songs.vue

@@ -204,7 +204,6 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import EditSong from "../../../components/modals/EditSong.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
 import FloatingBox from "../../../components/ui/FloatingBox.vue";
@@ -214,7 +213,11 @@ import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
 import ws from "../../../ws";
 
 export default {
-	components: { EditSong, UserIdToUsername, FloatingBox },
+	components: {
+		EditSong: () => import("../../../components/modals/EditSong.vue"),
+		UserIdToUsername,
+		FloatingBox
+	},
 	mixins: [ScrollAndFetchHandler],
 	data() {
 		return {

frontend/src/pages/Admin/tabs/Stations.vue

@@ -189,11 +189,13 @@ import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 import ws from "../../../ws";
 
-import EditStation from "../../../components/modals/EditStation.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
 export default {
-	components: { EditStation, UserIdToUsername },
+	components: {
+		EditStation: () => import("../../../components/modals/EditStation.vue"),
+		UserIdToUsername
+	},
 	data() {
 		return {
 			editingStationId: "",

frontend/src/pages/Admin/tabs/Users.vue

@@ -68,12 +68,14 @@
 <script>
 import { mapState, mapActions, mapGetters } from "vuex";
 
-import EditUser from "../../../components/modals/EditUser.vue";
 import ProfilePicture from "../../../components/ui/ProfilePicture.vue";
 import ws from "../../../ws";
 
 export default {
-	components: { EditUser, ProfilePicture },
+	components: {
+		EditUser: () => import("../../../components/modals/EditUser.vue"),
+		ProfilePicture
+	},
 	data() {
 		return {
 			editingUserId: "",

frontend/src/pages/Home.vue

@@ -442,7 +442,6 @@ import Toast from "toasters";
 
 import MainHeader from "../components/layout/MainHeader.vue";
 import MainFooter from "../components/layout/MainFooter.vue";
-import CreateCommunityStation from "../components/modals/CreateCommunityStation.vue";
 import UserIdToUsername from "../components/common/UserIdToUsername.vue";
 
 import ws from "../ws";
@@ -451,7 +450,8 @@ export default {
 	components: {
 		MainHeader,
 		MainFooter,
-		CreateCommunityStation,
+		CreateCommunityStation: () =>
+			import("../components/modals/CreateCommunityStation.vue"),
 		UserIdToUsername
 	},
 	data() {

frontend/src/pages/Settings/index.vue

@@ -54,24 +54,19 @@ import TabQueryHandler from "../../mixins/TabQueryHandler.vue";
 import MainHeader from "../../components/layout/MainHeader.vue";
 import MainFooter from "../../components/layout/MainFooter.vue";
 
-import SecuritySettings from "./tabs/Security.vue";
-import AccountSettings from "./tabs/Account.vue";
-import ProfileSettings from "./tabs/Profile.vue";
-import PreferencesSettings from "./tabs/Preferences.vue";
-
 export default {
 	components: {
 		MainHeader,
 		MainFooter,
-		SecuritySettings,
-		AccountSettings,
-		ProfileSettings,
-		PreferencesSettings
+		SecuritySettings: () => import("./tabs/Security.vue"),
+		AccountSettings: () => import("./tabs/Account.vue"),
+		ProfileSettings: () => import("./tabs/Profile.vue"),
+		PreferencesSettings: () => import("./tabs/Preferences.vue")
 	},
 	mixins: [TabQueryHandler],
 	data() {
 		return {
-			tab: "profile"
+			tab: ""
 		};
 	},
 	computed: mapGetters({
@@ -85,6 +80,7 @@ export default {
 			this.$route.query.tab === "preferences"
 		)
 			this.tab = this.$route.query.tab;
+		else this.tab = "profile";
 
 		this.localNightmode = this.nightmode;
 

frontend/src/pages/Station/index.vue

@@ -1742,7 +1742,7 @@ export default {
 		},
 		editSong(song) {
 			this.editingSongId = song._id;
-			this.openModal({ sector: "station", modal: "editSong" });
+			this.openModal({ sector: "admin", modal: "editSong" });
 		},
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("station", [