refactor: Use defineAsyncComponent for component imports

frontend/src/components/LongJobs.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useStore } from "vuex";
-import { ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 
-import FloatingBox from "@/components/FloatingBox.vue";
+const FloatingBox = defineAsyncComponent(
+	() => import("@/components/FloatingBox.vue")
+);
 
 const store = useStore();
 

frontend/src/components/PlaylistTabBase.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, reactive, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 import ws from "@/ws";
 
 import { useModalState } from "@/vuex_helpers";
 
-import PlaylistItem from "@/components/PlaylistItem.vue";
-
 import { useSortablePlaylists } from "@/composables/useSortablePlaylists";
 
+const PlaylistItem = defineAsyncComponent(
+	() => import("@/components/PlaylistItem.vue")
+);
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" },
 	type: {

frontend/src/components/Request.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 
 import Toast from "toasters";
 
-import SongItem from "@/components/SongItem.vue";
-import SearchQueryItem from "@/components/SearchQueryItem.vue";
-import PlaylistTabBase from "@/components/PlaylistTabBase.vue";
-
 // import SearchYoutube from "@/mixins/SearchYoutube.vue";
 // import SearchMusare from "@/mixins/SearchMusare.vue";
 import { useSearchYoutube } from "@/composables/useSearchYoutube";
 import { useSearchMusare } from "@/composables/useSearchMusare";
 
+const SongItem = defineAsyncComponent(
+	() => import("@/components/SongItem.vue")
+);
+const SearchQueryItem = defineAsyncComponent(
+	() => import("@/components/SearchQueryItem.vue")
+);
+const PlaylistTabBase = defineAsyncComponent(
+	() => import("@/components/PlaylistTabBase.vue")
+);
+
 const store = useStore();
 const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
 const { musareSearch, searchForMusareSongs } = useSearchMusare();

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 
 import Toast from "toasters";
 import { useModalState, useModalActions } from "@/vuex_helpers";
 
-import ReportInfoItem from "@/components/ReportInfoItem.vue";
+const ReportInfoItem = defineAsyncComponent(
+	() => import("@/components/ReportInfoItem.vue")
+);
 
 const store = useStore();
 

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 
 import { useModalState } from "@/vuex_helpers";
 
 import { useSearchMusare } from "@/composables/useSearchMusare";
 
-import SongItem from "@/components/SongItem.vue";
+const SongItem = defineAsyncComponent(
+	() => import("@/components/SongItem.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" },

frontend/src/pages/Admin/News.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
 
 const store = useStore();
 

frontend/src/pages/Admin/Playlists.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
-import RunJobDropdown from "@/components/RunJobDropdown.vue";
-
 import utils from "@/utils";
 
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
+const RunJobDropdown = defineAsyncComponent(
+	() => import("@/components/RunJobDropdown.vue")
+);
+
 const store = useStore();
 
 const columnDefault = ref({

frontend/src/pages/Admin/Reports.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
 
 const store = useStore();
 

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
 
 const store = useStore();
 const router = useRouter();

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

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
-import RunJobDropdown from "@/components/RunJobDropdown.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
+const RunJobDropdown = defineAsyncComponent(
+	() => import("@/components/RunJobDropdown.vue")
+);
 
 const store = useStore();
 const route = useRoute();

frontend/src/pages/Admin/Stations.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
-import RunJobDropdown from "@/components/RunJobDropdown.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
+const RunJobDropdown = defineAsyncComponent(
+	() => import("@/components/RunJobDropdown.vue")
+);
 
 const store = useStore();
 

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
 
 const store = useStore();
 

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
 
 const store = useStore();
 

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

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
-import ProfilePicture from "@/components/ProfilePicture.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
+const ProfilePicture = defineAsyncComponent(
+	() => import("@/components/ProfilePicture.vue")
+);
 
 const store = useStore();
 const route = useRoute();

frontend/src/pages/Admin/YouTube/Videos.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { useStore } from "vuex";
 
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
-import RunJobDropdown from "@/components/RunJobDropdown.vue";
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
+const RunJobDropdown = defineAsyncComponent(
+	() => import("@/components/RunJobDropdown.vue")
+);
 
 const store = useStore();
 

frontend/src/pages/Admin/YouTube/index.vue

@@ -1,16 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 
 import Toast from "toasters";
 
-import AdvancedTable from "@/components/AdvancedTable.vue";
-import RunJobDropdown from "@/components/RunJobDropdown.vue";
-import LineChart from "@/components/LineChart.vue";
-
 import ws from "@/ws";
 
+const AdvancedTable = defineAsyncComponent(
+	() => import("@/components/AdvancedTable.vue")
+);
+const RunJobDropdown = defineAsyncComponent(
+	() => import("@/components/RunJobDropdown.vue")
+);
+const LineChart = defineAsyncComponent(
+	() => import("@/components/LineChart.vue")
+);
+
 const store = useStore();
 const route = useRoute();
 

frontend/src/pages/Admin/index.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import {
+	defineAsyncComponent,
+	ref,
+	computed,
+	watch,
+	onMounted,
+	onBeforeUnmount
+} from "vue";
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
 
 import keyboardShortcuts from "@/keyboardShortcuts";
 
-import FloatingBox from "@/components/FloatingBox.vue";
+const FloatingBox = defineAsyncComponent(
+	() => import("@/components/FloatingBox.vue")
+);
 
 const store = useStore();
 const route = useRoute();

frontend/src/pages/Profile/Tabs/RecentActivity.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import {
+	defineAsyncComponent,
+	ref,
+	computed,
+	onMounted,
+	onUnmounted
+} from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 
-import ActivityItem from "@/components/ActivityItem.vue";
 import ws from "@/ws";
 
+const ActivityItem = defineAsyncComponent(
+	() => import("@/components/ActivityItem.vue")
+);
+
 const store = useStore();
 
 const { socket } = store.state.websockets;

frontend/src/pages/Profile/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
 import { format, parseISO } from "date-fns";
@@ -7,10 +7,13 @@ import ws from "@/ws";
 
 import useTabQueryHandler from "@/composables/useTabQueryHandler";
 
-import ProfilePicture from "@/components/ProfilePicture.vue";
-
-import RecentActivity from "./Tabs/RecentActivity.vue";
-import Playlists from "./Tabs/Playlists.vue";
+const ProfilePicture = defineAsyncComponent(
+	() => import("@/components/ProfilePicture.vue")
+);
+const RecentActivity = defineAsyncComponent(
+	() => import("./Tabs/RecentActivity.vue")
+);
+const Playlists = defineAsyncComponent(() => import("./Tabs/Playlists.vue"));
 
 const store = useStore();
 const route = useRoute();

frontend/src/pages/Settings/Tabs/Account.vue

@@ -1,13 +1,25 @@
 <script setup lang="ts">
-import { ref, watch, reactive, computed, onMounted } from "vue";
+import {
+	defineAsyncComponent,
+	ref,
+	watch,
+	reactive,
+	computed,
+	onMounted
+} from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 import Toast from "toasters";
 
-import InputHelpBox from "@/components/InputHelpBox.vue";
-import SaveButton from "@/components/SaveButton.vue";
 import _validation from "@/validation";
 
+const InputHelpBox = defineAsyncComponent(
+	() => import("@/components/InputHelpBox.vue")
+);
+const SaveButton = defineAsyncComponent(
+	() => import("@/components/SaveButton.vue")
+);
+
 const store = useStore();
 const route = useRoute();
 

frontend/src/pages/Settings/Tabs/Preferences.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 import ws from "@/ws";
 
-import SaveButton from "@/components/SaveButton.vue";
+const SaveButton = defineAsyncComponent(
+	() => import("@/components/SaveButton.vue")
+);
 
 const store = useStore();
 

frontend/src/pages/Settings/Tabs/Profile.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { defineAsyncComponent, ref, computed } from "vue";
 import { useStore } from "vuex";
 import Toast from "toasters";
 
-import ProfilePicture from "@/components/ProfilePicture.vue";
-import SaveButton from "@/components/SaveButton.vue";
 import validation from "@/validation";
 
+const ProfilePicture = defineAsyncComponent(
+	() => import("@/components/ProfilePicture.vue")
+);
+const SaveButton = defineAsyncComponent(
+	() => import("@/components/SaveButton.vue")
+);
+
 const store = useStore();
 
 const { socket } = store.state.websockets;

frontend/src/pages/Settings/Tabs/Security.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
-import { ref, watch, reactive, computed, onMounted } from "vue";
+import {
+	defineAsyncComponent,
+	ref,
+	watch,
+	reactive,
+	computed,
+	onMounted
+} from "vue";
 import { useStore } from "vuex";
 
 import Toast from "toasters";
 
-import InputHelpBox from "@/components/InputHelpBox.vue";
 import _validation from "@/validation";
 
+const InputHelpBox = defineAsyncComponent(
+	() => import("@/components/InputHelpBox.vue")
+);
+
 const store = useStore();
 
 const { socket } = store.state.websockets;

frontend/src/pages/Station/Sidebar/Users.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { useStore } from "vuex";
-import { ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import Toast from "toasters";
-import ProfilePicture from "@/components/ProfilePicture.vue";
+
+const ProfilePicture = defineAsyncComponent(
+	() => import("@/components/ProfilePicture.vue")
+);
 
 const store = useStore();
 

frontend/src/pages/Station/Sidebar/index.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
-import { computed, watch, onMounted } from "vue";
+import { defineAsyncComponent, computed, watch, onMounted } from "vue";
 
 import useTabQueryHandler from "@/composables/useTabQueryHandler";
 
-import Queue from "@/components/Queue.vue";
-import Users from "@/pages/Station/Sidebar/Users.vue";
-import Request from "@/components/Request.vue";
+const Queue = defineAsyncComponent(() => import("@/components/Queue.vue"));
+const Users = defineAsyncComponent(
+	() => import("@/pages/Station/Sidebar/Users.vue")
+);
+const Request = defineAsyncComponent(() => import("@/components/Request.vue"));
 
 const store = useStore();
 const route = useRoute();

frontend/src/pages/Team.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 
-import ProfilePicture from "@/components/ProfilePicture.vue";
+const ProfilePicture = defineAsyncComponent(
+	() => import("@/components/ProfilePicture.vue")
+);
 
 const currentTeam = ref([
 	{