feat: shared loading state + cleanup loading state management (#5835)

* feat: implement shared loading bar component and polished loading states across the app

* feat: align loading states + ensureQueryData changes

* fix: lint + bugs

* fix: skeleton for manage servers page

* fix: merge conflict fix

apps/frontend/src/pages/hosting/manage/[id].vue

@@ -37,7 +37,8 @@
 </template>
 
 <script setup lang="ts">
-import { ServersManageRootLayout } from '@modrinth/ui'
+import { injectModrinthClient, ServersManageRootLayout } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
 import { reloadNuxtApp } from '#app'
 import { products } from '~/generated/state.json'
@@ -48,6 +49,21 @@ const router = useRouter()
 const config = useRuntimeConfig()
 const serverId = route.params.id as string
 
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+if (serverId) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['servers', 'detail', serverId],
+			queryFn: () => client.archon.servers_v0.get(serverId)!,
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
+
 const auth = (await useAuth()) as unknown as {
 	value: { user: { id: string; username: string; email: string; created: string } }
 }

apps/frontend/src/pages/hosting/manage/[id]/backups.vue

@@ -1,9 +1,28 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManageBackupsPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageBackupsPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
-const { server, isServerRunning } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const { server, serverId, worldId, isServerRunning } = injectModrinthServerContext()
+const queryClient = useQueryClient()
 const flags = useFeatureFlags()
 
+if (worldId.value) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['backups', 'list', serverId],
+			queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
+
 useHead({
 	title: `Backups - ${server.value?.name ?? 'Server'} - Modrinth`,
 })

apps/frontend/src/pages/hosting/manage/[id]/content.vue

@@ -1,7 +1,27 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManageContentPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageContentPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
-const { server } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const { server, serverId, worldId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+if (worldId.value) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['content', 'list', 'v1', serverId],
+			queryFn: () =>
+				client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
 
 useHead({
 	title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,

apps/frontend/src/pages/hosting/manage/[id]/files.vue

@@ -1,9 +1,26 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManageFilesPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageFilesPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
-const { server } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const { server, serverId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
 const flags = useFeatureFlags()
 
+try {
+	await queryClient.ensureQueryData({
+		queryKey: ['files', serverId, '/'],
+		queryFn: () => client.kyros.files_v0.listDirectory('/', 1, 2000),
+		staleTime: 30_000,
+	})
+} catch {
+	// Let mounted layouts' useQuery surface errors; do not fail route setup.
+}
+
 useHead({
 	title: computed(() => `Files - ${server.value?.name ?? 'Server'} - Modrinth`),
 })